WHY?
웹사이트 제작을 하다보면 CSS를 통해 프론트엔드단 디자인을 진행한다. 그런데 일반적으로 쓰는 CSS문법들은 당연하게 생각하면서 쓰고 있는데, 생각해보면 내가 CSS문법에 대해서 이해하여 쓰는게 아닌 그냥 때려 맞추는게 아닌가 싶을정도로 코드를 짜고있다는 느낌이 들었다.
프론트엔드를 이해하기 위해서는 가장 기초적인 CSS를 먼저 제대로 알고 진행하기 위해 끄적여본다.
파레토의 법칙
css에서 상위 20% 스펙이 전체 css코드의 80%를 차지한다.
실제로 실전에서 자주 쓰이는 css는 몇개 되지 않는다.
선택자(Selector)
ul li:hover a[target="_blank"] { color : blue };
// ul부터 target=_blank까지가 선택자(selector)이다.
CSS를 처음 배우게되면 첫번째 챕터에 있는 SELECTOR다
이전에는 Selector의 학습이 필수적이었지만, 현재에는 중요도가 예전같지 않다.
왜 selector가 덜 중요해졌을까?
예전에는 html과 css를 분리해서 html을 최대한 건들지 않고 css만으로 디자인을 하는 것이 중요했습니다.
하지만 지금은 웹프레임워크 위에서 html과 css를 묶어 컴포넌트로 다루는 방식으로 진화를 했습니다.
그래서 html의 수정과 css의 수정이 한 곳에서 이루어지다보니 selector가 복잡할수록 오히려 html을
수정하는데 문제가 더 발생BEM ( CSS 개발 방법론 )
코드를 작성할 시 가독성을 높인다면 효율적으로 일을 할 수 있고, 다른 개발자가 코드를 유지보수할 때에도 명확성과 일관성을 높일 수 있습니다.
그런 방법들 때문에 요즘은 CSS 표준에 따른 방법론이 BEM입니다.
BEM(Block Element Modifier)
header__form--email 과 같은 클래스명이 있다면, 이것이 BEM 방법론을 활용한 것
BEM 방법론은 ID에는 사용할 수 없고, 오직 클래스명에만 활용할 수 있다는 점Block(전체를 감싸고 있는 블럭요소)
블럭(block)은 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 말합니다.
헤더, 풋터, 사이드바, 메인 컨텐츠 영역을 가지고 있다고 가정하면
각각의 영역들이 블럭으로 간주되는 것
블럭 요소는 클래스의 어근을 형성하고 항상 맨 앞에 위치Element
요소(element)는 블럭이 포함하고 있는 한 조각
블럭은 전체를 말하고 요소들은 그 조각들을 일컫고 각 요소는 두개의 밑줄표시로 연결 -> 블럭 다음에 위치시킴
CSS
.block__element { property : value; }
두 개의 밑줄표시는 시각적으로 쉽게 그리고 빨리 코드를 찾고 조작할 수 있도록 도와줌
CSS
.header__logo { proerty : value; }
.header__tagline { property : value; }
.header__searchbar { property : value; }
.header__navigation { property : value; }
-> 클래스명은 간단하고 명확하며 정확하게 유지해야 한다
-> StyleSheet와 HTML 역시 DRY(don't repeat yourself)로 유지되어야 함
Modifiers
modifier는 블럭 또는 요소의 속성, 이 속성은 블럭 또는 요소의 외관이나 상태를 변화시킴
클래스명을 지을때의 목적은 그 요소를 반복하여 재사용할 수 있게 하기 위한 것이여서 요소의 스타일이 같은 것이라면 사이트의 다른 영역이라 할지라도 새로운 클래스를 정의하지 않아도됨
특정 요소의 스타일을 수정할 필요가 있을 때, modifier만 활용하면 됨
_요소 또는 블럭 다음에 두개의 하이픈('--')을 추가하여 modifier를 표시
CSS
.block--modifier {...}
.block__element--modifier{...}
Point! 모든 이름은 간단 명료해야함
절대적으로 필요하지 않는 이상, 추가적인 클래스를 만들거나 똑같은 스타일을 반복하면 안됨
