[10분 테코톡] 동동의 CSS 방법론

[10분 테코톡]
CSS 방법론 - 동동
https://www.youtube.com/watch?v=B70h37mpD74&t=555s

1. CSS란?
 - HTML 또는 XML로 쓰여진 문서의 스타일을 나타내기 위해 사용되는 언어
 - 문서의 구조와 스타일(디자인)을 분리하여 HTML이나 XML의 각 요소를 꾸미는 것이 역할

2. CSS 등장 이전/이후의 스타일링
  2-1. CSS 등장 이전
      - 각 요소의 전용 속성이나 style 속성으로 스타일을 일일이 지정
       >> 발생하는 문제점
             - 같은 스타일 요소를 여러 페이지마다 사용하면,
               하나를 수정할 때마다 그만큼 반복하여 수정해야 함
             - HTML은 본래 문서 구조를 의미하므로
               HTML에 직접 스타일을 지정하는 것은 바람직하지 않음

  2-2. CCS 등장 이후'
      - CSS 파일에 스타일 기재, HTML에는 문서의 구조를 작성
          >> 관심사의 분리 적용
      - CSS는 기본적으로 전역 범위
          => 한번 p요소에 스타일을 부여 시, 여러 페이지에서도 동일하게 적용
      - p요소의 스타일을 수정하는 경우, 
        한 곳만 수정하면 여러 페이지에도 수정된 내용이 적용되어 반복 수정 회피

3. CSS의 문제점
   - CSS에서는 모든 것이 전역 범위이므로, 모든 스타일링이 서로 간섭할 가능성 존재
   - CSS파일이 분리되어 있다 하더라도 이 파일들을 읽어 들인 HTML에서는
     모든 스타일링이 동일한 범위 안에 존재하게 됨
   - 웹 사이트가 점점 복잡해지면서 유지보수가 용이한 CSS를 작성하는 것이 어려워 짐
       >> 이를 해결하기 위한 CSS 방법론이 여러가지 대두

4. OOCSS
   - OOCSS란?
      > Object Oriented CSS 
          : 객체 지향 CSS
     > 니콜 설리번(Nicole Sullivan) 제창
     >> 주요 발상
          1. 레고처럼 자유로운 조합이 가능한 모듈의 집합을 만듦
          2. 그 모듈을 조합해 페이지 제작
          3. 신규페이지를 만드는 경우에도 기본적으로 추가적인 CSS를 만들 필요가 없음

     >> 레고와 같은 모듈을 구현하기 위한 두 가지 원칙
          1. 스트럭처(구조)와 스킨(화면) 분리
               : 둘의 구분이 명확하게 결정되어 있지는 않음
                  >> 공통적인 부분을 스트럭쳐에 해당한다고 보면 됨
          2. 컨테이너와 콘텐츠 분리
               : 컨테이너 - '영역' | 콘텐츠 - '모듈'
                >> 특정한 컨텍스트에 지나치게 의존하지 않음
                >> '모듈을 가능한 특정한 영역에 의존하지 않도록 한다.'는 지침 의미

 >> OOCSS 정리
      : OOCSS의 역사는 매우 길며 명확하게 규칙이라고 불리는 것도 많지 않음
      : 다른 CSS 방법론들은 기본적으로 크건 작건 OOCSS를 참조하면서 개선한 것
      : 오늘날 OOCSS 한 가지만으로 실질적인 CSS 설계를 수행하는 것은
        그다지 현실적이지 않음
   >> 그럼에도 10년 전 제창한 사고방식이 다른 CSS 설계 기법에 녹아들어
        지금까지도 사용되는 것을 생각한다면? 
          - OOCSS가 표방한 사고는 CSS 설계에 있어 '하나의 진리'라고 해도 과언이 아니라고
            생각

5. SMACSS
   - SMACSS란?
      > Scalable and Modular Architecture for CSS 
          : CSS를 위한 확장 가능한 모듈 아키텍쳐를 지향하며 제창
          : 보다 폭넓고 실제로 웹사이트를 구축하는 데 있어 
            빼놓을 수 없는 베이스나 레이아웃 코드를 다루는 방법까지 설명
      > 조나단 스눅(Jonathan Snook) 제창
      > CSS 코드를 그 역할에 따라 분류한 것이 특징
         1. 베이스(Base) 규칙
             - 프로젝트의 표준 스타일을 정의
               (바탕화면 색깔 등 프로젝트 전반에 적용되는 스타일링)
             - 리셋 CSS, 노멀라이즈 CSS도 베이스 규칙에 포함됨

         2. 레이아웃(Layout) 규칙
             - 헤더, 메인 영역, 사이드 바 등 웹사이트의 레이아웃을 구성하는 
               큰 모듈에 관한 규칙
             - 대부분 특정 페이지에서 한 차례만 사용하므로 
               ID 셀렉터를 활용한 스타일링을 허용
             - 반복적으로 사용하는 모듈의 경우에는 클래스 셀렉터를 이용
           >> 만약 특정 페이지에서만 레이아웃을 변경하고 싶은 경우?
                 - 손자 셀렉텨를 이용해 레이아웃 모듈의 스타일을 덮어씀

         3. 모듈(Module) 규칙
             - 타이틀(Title), 버튼(Button), 카드(Card), 내비게이션(Navigation) 등
               일반적인 UI 컴포넌트를 나타냄
             - 모든 모듈은 레이아웃 규칙 안에 배치되는 것을 가정
             - 다른 페이지로 이동하거나 다른 레이아웃 안에 삽입하더라도
               형태가 부서지거나 달라지지 않고 사용할 수 있어야 함
                  > 특정 컨텍스트에 지나치게 의존하지 않도록 작성하어야 함
             - 모듈의 루트 요소에는 반드시 클래스 셀렉터 사용

         4. 스테이트(State) 규칙
             - 기존 스타일을 덮어쓰거나 확장하기 위해 사용
             - 기존 스타일을 모두 덮어써서 스테이스 스타일을 반영하는 것을
               기대하기 때문에 필요한 경우에는 !important 사용도 권장
             - 스테이트는 레이아웃이나 모듈에 할당할 수 있음
             - 스테이트 규칙에 따른 클래스의 이름은 모드 is- 접두사를 붙임
                > 어떤 모듈에 적용하는지를 명확하게 하기 위하여
                   스테이트 이름에 모듈 이름을 포함시킬 것을 권장

     >> 레이아웃 또는 모듈과 스테이트를 구분하는 쉬운 방법
           > 스테이트 : 자바스크립트에 의존

         5. 테마(Theme) 규칙
             - 사이트 내 레이아웃이나 색상, 텍스트 처리 등을 일정한 규칙에 따라 덮어쓰는것
             - 기존의 다양한 스타일링이 덮어쓰기의 대상이 됨
                ex ) 다크모드 전환, 테마 컬러 변경 등
             - theme 접두사를 붙일 것을 권장            

 >> SMACSS 정리
     : 프로젝트에서 고려해야 하는 대부분의 CSS 규칙을 포함
     : 각 규칙이 엄격하지 않아 유연하나,
      경우에 따라 규칙이 너무 유연하여 실제 코드의 지침으로 삼기 어려움
          > 느슨한 개발을 하기에는 적합
     : 모듈 규칙에 OOCSS를 적용하거나 다음에 설명할 BEM의 규칙을
       일부 적용하는 등 다른 설계기법과 조합하는 경우가 많음

6. BEM
   - BEM란?
      > Block, Element, Modifier
      > 러시아의 Yandex 사가 제창한 컴포넌트 기반 웹 개발 접근법
      > UI를 독립적인 블록으로 분리함으로써
         복잡한 페이지에서도 간단하고 신속하게 개발을 수행하는 것이 목적
      > 기본적으로 모듈 기반의 방법이지만,
         그 내용이 다른 설계 기법에 비해 엄격하고 강력하여 세계적으로 이름이 알려졌으며
         실제로 널리 사용되고 있음

         1. Block
             - 재사용할 수 있는 기능적으로 독립한 페이지 구성요소
                > HTML에서 Block은 클래스 속성으로 나타냄
                     >> 즉, CSS에서는 클래스 셀렉터를 사용!
                          : 상세도를 가능한 균일하게 유지하려는 것
                          : Modifier나 Mix를 사용한 덮어쓰기를 쉽게 하기 위해서임
                   >> HTML에 여러 클래스가 붙어 있는 경우에도 상세도는 균일하게 유지
             - BEM을 사용할 때는 ID 셀렉터 또는 요소 셀렉터를 사용하면 안 됨
             - Block 이름은 상태(state)가 아닌 용도(purpose)를 나타냄
                    >> 목적을 나타내는 메뉴 또는 버튼으로 네이밍
             - Block은 환경에 영향을 미치지 않아야 함
                  > Block 자체에 대한 외부 지오메트리(margin) 또는
                     Block의 위치(position)를 설정하지 않아야 함  
                       > Block 자체에 대한 margin, position 설정 시,
                          외부의 환경에 의존적 
                           => 기능적으로 독립적이여야 한다는 Block 정의와 상반됨
              - Block들은 서로 중첩 가능
                    ex ) head block 
                          [logo block, search block, auth block] 포함

         2. Element
             - Block의 복합 부품, Block과 별도로 사용할 수 없음
             - Element 이름은 상태(state)가 아닌 용도(purpose)를 나타냄
                   ex ) item, text = 적합한 element 이름
                         red, big = 적합한 element 이름 아님
             - 명명법 : block-name__element-name
                    >> block이름 기재하고 두 개의 언더바 기재 후, element 이름 기재
             - Element는 항상 Block의 부분이어야 하며, Block으로부터
               분리하여 사용해서는 안 됨.
                  > Element를 단독으로 사용하고 싶다면 
                     그 요소가 Element가 아니라 Block인지 검토해봐야 함
             - 모든 Block이 Element를 가지는 것은 아님
                  > 어떤 Block은 Element없이 단독으로도 사용
             - Element는 서로 중첩 가능
                   > 다만, Element는 Block의 부분이지 다른 Element의 부분이 아님
                         >> Element는 항상 Block의 하위 엔티티
                   > Element의 이름은 block__element1__element2 와 같이 될 수 없음

         >> Block을 만들어야 할까 Element를 만들어야 할까?
              - 구현된 다른 페이지 컴포넌트에 의존하지 않고 코드가 재사용됨
                    >> Block
              - 부모 엔티티(Block) 없이 구분해서 사용할 수 없음
                    >> Element
              - 더 작은 부분으로 나눠어져야 하는 Element
                    >> Block / Mix
                       > BEM에서는 Elements의 Elements는 만들 수 없음 

         3. Modifier
             - Block 또는 Element의 모양, 상태 또는 동작을 정의
             - Modifier 이름은 모양(appearance), 상태(state), 동작(behavior)를 나타냄
                  >> Block 또는 Element의 모양, 행동, 상태를 변경하는 것
                        > 대체하는 것이 아님!!!
                  어떤 사이즈? 어떤 테마? >> --size_s, theme_islands
                  어떻게 다른 것들과 다른가? >> --disabled, focused, etc.
                  어떻게 행동할 것인가? >> --directions_left-top
             - Modifier는 홀로 사용되지 않음
            >> Modifier 유형
                  1. Boolean
                      - Modifier 유무만 중요하고 그 값이 무관할 때 사용
                           : disabled, focused          
                      - Boolean modifier가 있으면 해당 값이 참으로 간주
                          > Key Value 유형에서 true인 value가 생략된 것이라고 생각
                      - 명명법
                           : block-name_modifier-name
                           : block-name__element-name_modifier-name

                  2. Key-Value
                      - Modifier 값이 중요한 경우에 사용 
                            : size_s, theme_islands
                      - 동일한 유형의 Modifier를 동시에 사용 불가능
                      - 명명법
                           : block-name--modifier-name_modifier-value
                           : block-name__element-name_modifier-name_modifier-value
               ※ MindBEMding
                   - Modifier 전후의 구분 문자를 언더바 한 개에서 하이픈 두 개로 변경한 스타일
                      : 기본적인 규칙은 동일
                    ex ) 
                         block-name--modifier-name
                         block-name__element-name--modifier-name
                         blcok-name--modifier-name--modifier-value
                         block-name__element-name--modifier-name--modifier-value

                  3. Mix
                      - Block과 Element가 하나의 HTML 요소에 존재하는 것을 의미
                      - 코드 중복을 피하면서 여러 BEM 엔티티의 동작과 스타일을 결합
                      - 기존 BEM 엔티티를 기반으로 의미상 새로운 인터페이스 컴포넌트 작성
                      - 가급적 상세도를 높이지 않고 Block의 독립성을 유지할 수 있음
                        

7. 새로운 CSS 방법론
    >> OOCSS, SMACSS, BEM은 비교적 역사가 오래된 CSS 방법론
          : 각자의 방법으로 유지보수가 용이한 CSS 설계 방법을 제시

   - 기존 CSS 방법론의 문제점
        : CSS가 HTML 구조와 강하게 결합되어 있음
        : HTML에 의존하는 CSS
             - HTML에서 스타일이 필요한 요소에 클래스명을 부여
             - 클래스명이 부여된 요소에 대하여 CSS에서 스타일링
        : CSS에 의존하는 HTML
             - CSS에서 HTML과 독립적으로 스타일을 선언
             - HTML에서는 선언되어 있는 스타일에 한하여 마크업 작성
           
   >> 기존의 CSS 방법론의 문제점을 해결하기 위해 등장한 Utility-First CSS 방법론 대두
      - Utility-First CSS
          : 시멘틱하고 컨텍스트에 의존하지 않는 CSS를 작성하지 않음
          : 클래스명만 보아도 CSS 속성과 값을 바로 유추할 수 있도록 
            단 하나의 속성과 값을 나타내는 CSS를 사전에 미리 정의
          : 미리 정의된 클래스를 마치 HTML 요소에 제공하는 API로 생각하여
            API(클래스명)을 HTML에 조합해서 사용
 
      > CSS가 등장하기 전, inline style과 다른 점
           - 아무 값이나 지정할 수 있는 게 아님.
             사전에 정해진 리스트에서 골라야 하므로 전체적인 일관성을 높일 수 있음
             ex ) 
              inline-style : font-size : 14px, font-size:13px, font-size:0.9rem,..
              CSS : text-sm or text-xs | py-3 or py-4 | text-dark of text-light
           - hover, focus 등의 의사 클래스 셀렉터도 사용 가능
           - media query를 사용할 수 있어 반응형 디자인에 대응이 수월  

   >> 널리 알려진 Utility-First CSS
          - Tailwind CSS
          - Tachyons
          - Atomic CSS
   ※ State of CSS 2020 -비교하는 사이트
          - CSS 프레임워크
          - CSS 방법론
          - 시상식