• CSS for JavaScript Developers • Josh W Comeau’s Course Platform Taught by Josh W Comeau

module0 Fundamentals Recap

Anatomy of a Style Rule

建立一些必要的術語(terminology)：

• declaration
  • A declaration is a combination of a property and a value.

1
2
3
4
5
6
7
8

.code-snippet {
  padding: 32px;
  white-space: pre-wrap;
}

/*   padding: 32px; 是 first declaration */
/*   white-space: pre-wrap; 是 second declaration */

• rule
  • A rule, also known as a style, is a collection of declarations, targeting one or more selectors. A stylesheet is made up of multiple rules.

1
2
3
4
5
6
7
8

p {
  font-size: 1rem;
}
.big-paragraph {
  font-size: 1.25rem;
  font-weight: 500;
}

A rule, also known as a style, is a collection of declarations, targeting one or more selectors. In this example, we have two rules, and the first one targets all “p” tags.

Media Queries

Media queries use the @media syntax. You can kinda think of it as an if statement in JavaScript:

1
2
3
4
5

if (condition) {

 // Some JS that will run if the condition is met.

}

1
2
3
4
5
6

@media (condition) {

 /* Some CSS that'll run if the condition is met. */

}

The syntax looks quite a lot like the declaration syntax, especially since max-width: 1023px is a valid CSS declaration! Unfortunately, this is misleading; In the context of a media query, max-width is a “media feature”, not a CSS property. They just happen to share the same name.

1
2
3
4

/* 🚫 Not valid, since `font-size` can't be queried */
@media (font-size: 32px) {
}

selectors

Pseudo-classes button:hover / button:focus / input:checked

If we were to do this in JS, we’d need to register event listeners, but we’d also need to manage the state somehow, to know if the element is currently being hovered. As a result, CSS makes this kind of thing much simpler! Pseudo-classes - CSS: Cascading Style Sheets | MDN

Pseudo-element input::placeholder p::before/ p::after

Pseudo-elements are like pseudo-classes, but they don’t target a specific state. Instead, they target “sub-elements” within an element.

• ::befor ::after 就只是隱藏的 span 而已（有很好的例子） ::before and ::after are really just secret spans, nothing more. It’s syntactic sugar. 通常不要使用這兩個屬性。 In general, we probably shouldn’t use these two pseudo-elements. In a vanilla HTML/CSS world, it can be helpful to “bundle” content in with a CSS selector. In the era of components, however, we have better ways of bundling content.

• 不過，如果 content 屬性是空字串，用來顯示一些裝飾形狀顏色的，那使用是沒什麼問題。 if the effect is entirely decorative (eg. colorful shapes), I believe it’s fine to create them with an empty content string:

Combinators

The term “combinator” refers to a character that combines multiple selectors. In this case, the space character combines nav and a to create a descendant selector. The descendant selector will apply to all descendants, no matter how deeply nested they are. For example, the anchor tags will still work even if they’re inside a list:

Color formats

• 推薦使用 HSL 格式 （或稱 HSB）可以。

  • Hue ，0 ~ 359 degree
  • Saturation 0 ~ 100 % 飽和度
  • Lightness 0 ~ 100 %

• 使用 HSL 格式優點：

  • 較直覺的知道代表什麼顏色
  • 可以直接調整 s / l 而不影響色相 hue，實際在 shadow 等應用非常方便！

CSS 的參數傳入，通常用 / 分割開來

• 例如在 grid 中的 grid-column： 1 / 3
• 例如在 hsl 中的 background-color: hsl(340deg 100% 50% / 0.75);

Units

這邊說的更詳細：請正確使用 em / rem（重點） Why you shouldn’t set font-sizes using em - YouTube

For font-sizes, always use rem to avoid compounding problem.

rem are useful when we are trying to use media queries

在不同的 media 設定適合的 html { font-size: xxx } ，卡蹦！全部字體都會跟著改變！

Use em for properties other than fontSize like margin, padding, width etc…

注意不要這樣做：Please note, You shouldn’t actually set a px font size on the html tag. This will override a user’s chosen default font size.

可以這樣做：

1
2
3
4
5

html {
  /* 20% bigger `rem` values, app-wide! */
  font-size: 1.2em;
}

Typography

line-height 是不使用單位的，不要自己加上單位。

p {

line-height: 20px; // 錯誤示範

}

In order to make our apps and websites as accessible as possible, we want to choose a pretty generous value for line-height. This will help those experiencing low vision conditions, as well as those with cognitive difficulties like dyslexia.