THE Red: 견고한 UI 설계 - CSS
===

###### tags: `석기`

---

## CSS가 어려운 이유

### 결합 기호

**css 명세 읽는 법**

:::success
공백 -> && -> || -> |
:::

순서로 그룹핑하여 생각한다.

a b | c || d && e f
[a b] | c || d && [e f]
[a b] | c || [d && [e f]]
[a b] | [ c || [d && [e f]]

---

## CSS의 절대 권력, 초기화

### CSS reset 꼭 필요한가?

- 덮어쓰는 CSS를 습관적으로 쓰이는 경우가 많다.
- Universal selector * reset
- 쓰지말아라!

    *,
    ::before,
    ::after {
      ...  
    }

- 덮어쓰기 너무 자주 사용된다.

**결론**
- CSS reset을 다시 만들어보자.

body {
    margin: 0;
    overflow-wrap: break-word;
}

:lang(ko) { word-break: keep-all; }

img {
    max-width: 100%;
    height: auto;
}

---

## 웹은 덩어리, 구성 요소, 변형의 반복으로 구성.

### BEM

:::info
Block
- 재사용 가능한 독립적인 블록
Element
- 블록을 구성하는 종속적인 하위 요소
Modifier
- 블록 또는 요소의 변형 (모양, 상태, 동작)
:::

==특징==
1. 의미론적 클래스 선택자 작명 규칙.
2. 다른 형식의 선택자 사용 제한
3. 전역에서 유일한 이름 권장
4. 낮은 선택자 특이성 유지
5. 병렬개발 가능 (HTML - CSS 연결 느슨.)

==명명 규칙==
1. 두개 언더바는 하위요소
2. 두개 하이픈은 상태 변형
3. 하나의 이름에 요소, 변형은 한번만 허용.