요즘 css가 춘추전국시대 마냥 여러 프레임워크, 라이브러리가 있다.
- 전,후 처리기 : scss, sass, postcss
- css-in-js : styled-components, emotion, css module, styled JSX, ...
- 프레임워크 : bootstrap, tailwind, ...
- 방법론 : BEM, Atomic CSS (Utility-first CSS)
그만큼 로드시 성능, 규모가 클 때 협업시 유지보수, className의 직관성등 최고의 효율을 찾고있기 때문일 것이다. 그리고 컴포넌트로 웹을 구현하는 트렌드도 변화에 큰 기여를 하고있다. 사용해본 프레임워크나 라이브러리들에 대한 개인적인 생각과, 요즘 Atomic CSS방식이 뜨고있는 이유를 끄적이려 한다.
근데 프론트는 트렌드가 너무 빨리 바뀐다.
상남자 특) 그냥 쌩 css로 짬ㅋ
먼저 요즘 현업에서 많이 쓰이는건 sass, styled-components, emotion, tailwind, bootstrap 정도일 것 같다. (예상ㅋ)
그냥 css나 scss를 사용하는 곳도 많을테고, bootstrap이야 옛날부터 써왔으니 굳이 마이그레이션을 하지않았다면 많이들 사용중일 것이다.
styled-components와 css module, emotion은 현업에서 가장 많이 쓰이는 css-in-js들이다. 모두 상황에 따라 매력적인 선택지라고 생각한다.
본인은 요즘 tailwind CSS를 사용중이다. 사실 이 글을 쓰는 이유도 tailwind의 만족도가 높아서이다. (일단 이름을 안지어도 된다.)
bootstrap이나 mui는 디자인이 너무 획일화 되어있고, styled-components는 다 좋은데
내 깜찍한 컴포넌트들이 점점 괴랄해지는 것 같다.
그리고 css에 class가 없으니 [낭만]이 없달까?
그래서 결론은, tailwind CSS가 주목받기 시작한지 좀 됐는데 CSS 방법론을 통해 그 이유를 알아보려한다.
방법론
(먼저 관련된 기깔난 글 / 야무진 글)<- 너무너무 잘 정리해 놓으셨다.
방법론.... 이름만 있어보이지 그냥 class이름 어떻게 지을까다.
(사실 있어보이지도 않음ㅋ)
사람마다 다르게 지을것이기에 협업시 효율을 위해 약속...을 하는거라고 보면된다.
BEM, SMACSS, OOCSS등 유명한 방법론들 중 BEM이 실무에서 압도적으로 많이 쓰인다. 근데 요즘 뜨고있는게 (tailwind같은) Atomic CSS다. 왜일까?
일단 BEM과 Atomic CSS에 대해 간단히 살펴보자.
BEM
B : block (menu, header,form 같이 누가봐도 한 덩어리인 친구들)
E : Element (block에 종속된 친구들. form안에 input이라던가...)
M : modifier (block이나 element의 상태)
를 의미하고, class="header__navigation--first" 이런 식으로 이름을 짓는다.
(빨갛다고 class="red" 안한다는 뜻ㅋ)
개인적으로 파일 크기가 커지면 이렇게 bem방식으로 css를 쓰는게 scss보다 좋다고 생각한다. 이유는
1. scss->css 트랜스파일링 오버헤드
2. 셀렉터 중첩시 탐색시간
이다. sass에서 셀렉터를 많이 중첩하면 큰 사이트를 로드하는데 분명! 유의미한 체감차가 있을 것이다.
why?
브라우저는 셀렉터를 오른쪽 부터 읽는다. 예를 들어 section > div{...}는 모든 div중 부모로 section을 가진 친구를 찾는다. 셀렉터 중첩도 많고 div도 많으면 DOM search 시간은...? 오우 쒯
Atomic CSS
Atomic CSS는 흔히 Utility-first CSS와 혼용되어 언급 되는데, 문자 그대로 'utility'를 우선시 하겠다는 뜻이다. tailwind를 보면 사용량, 만족도, 관심도 모두 상승세다.
https://2021.stateofcss.com/ko-KR/technologies/css-frameworks
<button className = "bg-red-400 hover:bg-grey-700 text-white"/>
이런식으로 쓰이는데, 사실 쫌 더럽다.
시멘틱 하지않고 가독성이 나쁜 옛날에 쓰던 in-line방식이라 시대를 역행하는 기분마저 든다. 그럼에도 주목받는 이유는 다 있다.
위에 올린 관련글의 카카오 관계자 분의 말처럼, in-line방식은 분명 직관적이고 편한 방법임은 부정할 수 없다. 그리고 요즘 같이 css가 컴포넌트에 국한되고, 웹 프레임워크가 시멘틱과 중복 방지역할을 해주기 때문에 새로운 대세가 되었다. css 파일 사이즈?걱정할 필요없다.
그리고 무엇보다... 이름을 고민할 필요가 없다
