Utility-First CSS를 옹호하며
"상속보다는 컴포넌트를 선호하라." 디자인 패턴에 나오는 문장으로, Utility-First CSS의 기초이다. 또한 불변성, 구성 가능성, 예측 가능성, 부작용 방지 등 함수형 프로그래밍과 많은 원칙을 공유한다.
이러한 용어 뒤에 숨어 있는 목표는 유지 보수와 확장이 더 쉬운 코드를 작성하는 것이다.
"인라인 스타일을 사용하는 것이 낫다."
Utility-First CSS는 스타일 속성을 통해 HTML 노드에 CSS 규칙을 적용하는 방식과 비교하게 된다. 이러한 스타일링 방식은 나쁜 방식으로 여겨지고 이후에 별도의 스타일시트와 클래스 추상화로 발전시켰다.
Utility-First CSS도 다르지 않다. 모든 CSS 속성을 개별적으로 선언한다. 이를 통해 코드 재사용, 유사 클래스, 유사 엘리먼트, 전처리기 및 브라우저 캐싱을 사용할 수 있다. 하지만 Atomic CSS를 선호하지 않는 사람들은 인라인 스타일과 연관시킨다. Atomic 클래스는 규모가 작고 규칙이 하나이며 이론적이지 않고 기능적인 방식으로 이름을 지정한다.
즉, 겉모습은 비슷해 보일지라도 그 내용은 다르다. 두 가지 방법의 차이점을 알아보자.
인라인 스타일
인라인 스타일은 기존의 정의를 따를 필요 없이 원하는 모든 것을 할 수 있다. 새로운 HTML 노드에 스타일을 지정할 때마다 모든 것을 다시 작성해야한다. 이는 페이지를 무겁게 만드는 원인이 된다.
<h2 style="font-size: 16px; font-weight: bold; color: purple">Stranger Things</h2>
<p style="font-size: 13px; font-style: italic">Stranger Things is an American science fiction-horror web television...</p>
<h2 style="font-size: 16px; font-weight: bold; color: purple">Game of Thrones</h2>
<p style="font-size: 13px; font-style: italic">Game of Thrones is an American fantasy drama television...</p>불필요한 코드가 나열되고 파일 크기가 무거우며, 단일 디자인 컨셉에 대한 여러 출저 자료가 필요하다.
<button style="padding: 5px 8px; font-size: 13px">Button</button>
<button style="padding: 0 8px; font-size: 13px; line-height: 23px">Button</button>
<button style="display: flex; padding: 0 8px; font-size: 13px; height: 23px; align-items: center">Button</button>동일한 스타일 작업을 위한 세 가지 방법이다. 이를 신뢰할 수 있는 단일 소스가 없기 때문에 쉽게 발생하며 시각적으로 일치하지 않을 수 있다.
Utility-First CSS
Utility 클래스는 복잡한 컴포넌트를 구성하는 데 사용할 수 있는 API를 제공한다. 스타일을 다시 작성하는 것이 아닌 스타일과 동작을 한 번에 정의하는 클래스를 사용하게 된다.
<h2 class="font-16 font-bold font-purple">Stranger Things</h2>
<p class="font-13 font-italic">Stranger Things is an American science fiction-horror web television...</p>
<h2 class="font-16 font-bold font-purple">Game of Thrones</h2>
<p class="font-13 font-italic">Game of Thrones is an American fantasy drama television...</p>/* Font sizes */
.font-13 { font-size: 13px }
.font-16 { font-size: 16px }
...
/* Font styles */
.font-bold { font-weight: bold }
.font-italic { font-style: italic }
...
/* Font colors */
.font-purple { color: purple }
...미리 정의된 CSS 규칙을 이용하면 아무리 작은 단위라도 제한된 스타일을 선택해야 한다. 인라인 스타일과 달리 모든 스타일을 자유롭게 할 수 없다. 한편, 이 점을 이용하여 더 큰 컴포넌트를 구성한다. 이 접근 방식은 요소의 스타일을 지정할 수 있는 방법을 제한해 일관성을 유지한다.
또한 단일 소스를 제공하여 색상을 사용하는 각 요소에 대해 동일한 색상을 다시 선언하는 대신 클래스에서 한 번 정의하고 필요할 때마다 해당 클래스를 사용할 수 있다. 그 외에도 별도의 스타일링을 사용하면 클래스 및 유사 엘리먼트, 전처리기 캐싱 등 인라인 스타일에서는 사용할 수 없는 다양한 이점을 활용할 수 있다.
Atomic 스타일이 제한되어 있어도 상관 없다고 할 수도 있다. 잘못 사용하면 인라인 스타일과 같이 일관성 없는 레이아웃이 발생할 수 있기 때문이다. 하지만 이는 기술적인 문제가 아닌 사용하는 사람의 문제이다. 범위를 지정할 수 있든 없든 모든 접근 방식과 언어에서 똑같은 문제가 발생할 것이다.
2탄은 나중에 이어서 작성!!
