Table of contents
Open Table of contents
CSS (Cascading Style Sheet)
CSS에 대한 역사를 간단하게 설명하면서 이 주제를 시작하고자 한다.
CSS 라는 언어가 생기기 전에는 HTML이라는 문서 작성을 위한 언어가 있었다.
HTML은 각각의 의미가 있는 Tag로 서식을 적용할 수 있었고 이후 웹의 발전과 함께 다양한 서식을 적용하고자 style 속성을 통해 inline-style을 적용하기 시작했다.
이후 inline-style의 중복 문제를 해결하기 위해 CSS가 등장하게 된다.
CSS
CSS로 HTML에서 하나 이상의 요소를 선택하여 스타일을 적용할 수 있고, Cascading 방식으로 상속의 개념이 적용되어 원하는 부분에 같은 스타일을 반복 적용할 수 있다.
초반에는 Tag를 선택하는 것이 일반적이었으나, 이후 HTML 문서에 class 속성을 작성하고 CSS에서 선택하여 스타일을 적용하는 방식으로 발전하였다.
HTML 요소를 선택하는 방법이 점점 복잡해지면서 CSS를 좀 더 직관적으로 작성할 수 있는 SCSS가 등장하게 된다. (preprocess 방식으로 작성된 scss파일을 css로 변환한다)
BEM
class 중심의 선택자가 유행하면서 class를 직관적으로 작성하기 위한 BEM 이라는 방법론이 등장하게 되었다.
BEM은 요소를 Block, Element, Modifier로 나누어 클래스의 이름을 의미있게 작성하는 방법이다.
모듈 개념의 등장
CSS의 Global Scope와 Specificity라는 특징 때문에 프로젝트의 규모가 커질수록 중복과 우선순위의 문제를 해결하기 힘들어졌고 따라서 각 요소를 컴포넌트 단위로 작성하는 방법을 도입하게 되었다.
CSS-in-JS 방식의 Styled-Component와 Emotion을 사용하여 JS로 작성한 컴포넌트에 스타일을 적용한 다음 컴파일하여 해당 컴포넌트만을 위한 CSS를 적용한다.
모듈 방식의 CSS는 전역 스코프와 명시도 문제를 해결할 수 있지만 컴포넌트가 랜더링 될 때 스타일을 동적으로 생성하기 때문에 성능이 떨어질 수 있다는 단점이 있다.
Utility Class 방식의 재등장
CSS-in-JS의 성능상의 단점을 극복하기 위해 유틸리티 클래스 방식이 다시 유행하게 되었다.
유틸리티 클래스 방식을 사용하는 대표적인 라이브러리는 Bootstrap과 Tailwind CSS가 있다.
이 방식은 미리 정의된 CSS를 class 속성을 통해 HTML에 직접 작성하기 때문에 직접 CSS를 작성하는 노력을 줄일 수 있고 zero-runtime 방식이기 때문에 CSS-in-JS에 비해 성능상 이점이 있다.
(zero-runtime이라는 것은 컴포넌트를 랜더링하기 위한 별도의 실행 과정이 필요하지 않다는 의미이다.)
CSS-in-JS는 컴포넌트의 데이터, 컨텍스트에 따라 동적인 스타일을 생성할 수 있고, 유틸리티 방식은 최대한 적은 CSS를 사용하면서 일관성 있는 디자인을 유도한다.