CSS leason for box model & specificity.

css-basics.md

CSS Basics

---

Agenda

• Basics
• The Cascade
• Specificity
• Box Model
• Layout
• Naming Conventions

---

Basics

---

选择 (Selector)

/* 👇 This is the selector */
.red {
  color: red;
}

---

属性 (Property)

.red {
  color: red;
/* 👆 this is the property. */
}

---

值 (Value)

.red {
  color: red;
      /* 👆 this is the value. */
}

---

Selector Example

---

级联 (Cascade)

CSS stands for Cascading Style Sheets.

The "Cascade" in CSS applies rules from top to bottom.

---

黄果树瀑布 (Huangguoshu Waterfall)

---

Cascade Example

---

特异性 (Specificity)

Specificity determines, which rule is applied by the browsers.

---

Specificity is usually the reason why your CSS-rules don’t apply to some elements, although you think they should.

---

If two selectors apply to the same element, the one with higher specificity wins.

---

SpeciFISHity

---

---

---

---

---

---

计算器 (Specificity Calculator)

specificity.keegan.st

---

Box Model

---

Notebook is the content.

Bubblewrap is the padding.

Bag is the border.

Space between bag to other bag is margin.

---

Conventions

---

BEM

CSS Tricks - BEM 101

BEM Example - CodePen

BEM Example

---

Functional / Atomic

Functional Example - CodePen

Functional Example

---