CSS 프레임워크 - "Best practices"는 무엇일까

Introduction
이번 글에서는 CSS 프레임워크 선택에 있어서 주요 요소와 CSS에 대하여 알려진 사실들을 다루겠습니다.

---

최근에 프론트엔드 개발에 관심도가 높아지면서 자연스럽게 CSS에 대한 관심이 올라가고 있습니다.
그래서 찾아보았습니다. CSS 분야에서 지금 가장 주목받고 있는 프레임워크는 무엇인지,
또한 CSS를 다룰때 무엇이 개발자들을 고통스럽게 하는지.

1. Best CSS는 무엇인가?

우선, Best CSS가 무엇인지에 대한 궁금증으로 시작하였고, 구글 검색을 통해 결과를 찾아볼 수 있었습니다.

 

( 2023-11-01 검색 )

 
가장 먼저 노출되는 "24 Best CSS Frameworks ..." 에서 들여다보면 트렌드를 한눈에 파악할 수 있습니다.
 

[1] 원문글 링크

title, 24 Best CSS Frameworks To Look Forward In 2023

There are a lot of new CSS frameworks emerging, and many of these focus on accessibility, responsiveness, and performance. Each framework has its pros and cons, and it is up to the developer to choose the best framework out there, depending on the scope of the project.

많은 새로운 CSS 프레임워크들이 나오고 있으며, 이 중 많은 것들이 접근성, 반응성 및 성능에 중점을 두고 있습니다. 각 프레임워크마다 장단점이 있으며, 프로젝트 범위에 따라 최적의 프레임워크를 선택하는 것은 개발자의 역할입니다.

 

2. CSS 프레임워크를 고민하는 이유

저희 회사의 기반인 E-커머스를 고려할 때, UI 개발의 가장 중요한 측면은 빠른 결과물 제공이며, 이로써 디자인, 기획, 개발 여러 방면에서 더 나은 제품을 개발하는데 중요한 역할을 합니다. 따라서 CSS 프레임워크의 선택은 개발자들에게 고민 요소로 존재하고 있으며, 개발자들은 CSS 프레임워크를 통한 개발의 유연성과 생산성을 항상 바라고 있다 생각이 들었습니다.
 
이러한 고민의 목표를 달성하기 위해서 CSS 프레임워크의 선택이 중요하다고 판단되었습니다. Bootstrap, Sass, BEM, 혹은 CSS-in-JS와 트렌드가 되고있는 TailwindCSS, Atomic CSS 등 많은 후보군 중에서 어떤 것을 선택할지 고민하게 되었으며, 그러한 과정에서 TailwindCSS가 왜 많은 개발자들에게 호평을 받고 있는지 알아보았습니다.
 

3. CSS를 이해하는 과정

HTML 1990, 마크업언어의 탄생

CSS는 원래 애트리뷰트를 엘리먼트와 연관시키는 더 유연한 메커니즘을 제공하기 위해 고안됐다. 이를 통해, 원래 HTML에는 없던 애트리뷰트가 엘리먼트에 추가됐다. 이로 인해 HTML과 CSS에서 일부 애트리뷰트를 동시에 설정할 수 있고, 나머지는 CSS에서만 설정할 수 있다. 프로그래머 사회에서는 예전 방식의 애트리뷰트 설정을 아예 더 이상 사용하지 말아야 한다는 입장이 꽤 강하지만, 이런 주장은 기존 코드를 유지보수하는 문제를 고려하지 않은 주장이다.

– 한 권으로 읽는 컴퓨터 구조와 프로그래밍

 
웹 사용증가 그리고 inline-style
초기엔 위와 같이 태그에 직접 style을 지정

<h2 style="color:blue;">hello world</h2>

 
위와 같은 방식으로 inline-style을 사용하였다가 코드가 점점 커지고 가독성이 떨어지며 반복적인 태그 선언의 문제 등등으로 인해 CSS 언어가 개발되었습니다.
 
진화 그리고 문제점
그 후 CSS는 프레임워크와 웹 개발 분야에서 발전하면서 다양한 문제에 직면하게 되었습니다.
특히나 CSS는 많은 개발자들에게 고통과 문제점들을 경험시켜주었습니다.

• 화면 표현의 어려움
• CSS의 재사용성 부족
• !important 규칙의 남용
• Ctrl + C 및 V 만으로 문제 해결이 어려움
• 모든 이벤트 효과를 고려해야하는 어려움
• 많은 HTML 태그 및 복잡한 선택자

 

4. TailwindCSS는 왜 1등을 달리나?

tailwindcss의 장점과 1등인 이유를 찾아보았습니다.

 

I’ve written a few thousand words on why traditional “semantic class names” are the reason CSS is hard to maintain, but the truth is you’re never going to believe me until you actually try it. If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way.

전통적인 "의미 있는 클래스 이름"이 CSS를 유지하기 어렵게 만드는 이유에 대해 몇 천 단어 정도 썼지만, 사실은 실제로 시도해보지 않는 한 당신은 나를 믿지 않을 것입니다. 구역질을 억제할 수 있는 한, 기회를 줘서 정말로 다른 방식으로 CSS를 어떻게 작업했는지 궁금해할 것이라고 생각합니다.

 
이건 정말 you know 짚고 넘어가야할 부분입니다. "Best practices" 와 "Adam Wathan" 은 저희팀에서 like 합니다.
 
아래는 부족한 설명에 대한 추가 설명입니다.

Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables. Instead, it creates a list of "utility" CSS classes that can be used to style each element by mixing and matching.[4][5]
For example, in other traditional systems, there would be a class message-warning that would apply a yellow background color and bold text. To achieve this result in Tailwind, one would have to apply a set of classes created by the library: bg-yellow-300 and font-bold.
As of 30th July 2023, Tailwind CSS has over 70,000 stars on GitHub.

Tailwind CSS는 오픈 소스 CSS 프레임워크입니다. 이 라이브러리의 주요 특징은 Bootstrap과 같은 다른 CSS 프레임워크와 달리 버튼이나 테이블과 같은 요소에 대한 미리 정의된 클래스 세트를 제공하지 않는다는 것입니다. 대신, 각 요소를 스타일링하기 위해 혼합 및 일치시킬 수 있는 "유틸리티" CSS 클래스 목록을 생성합니다.
예를 들어, 기존의 전통적인 시스템에서는 message-warning이라는 클래스가 노란색 배경색과 굵은 텍스트를 적용할 것이지만, Tailwind에서는 라이브러리가 생성한 클래스 세트를 적용해야 합니다: bg-yellow-300 및 font-bold.
2023년 7월 30일 현재, Tailwind CSS는 GitHub에서 7만 개 이상의 스타를 가지고 있습니다.

[2] 원문글 링크

1등을 달리는 이유

• 사용자 정의가 가능하며, 모든 웹 사이트의 디자인 측면에 맞게 모양과 느낌을 사용자가 정의 가능합니다.
• 반응형 디자인에 매우 강점이 있으며, 적응형 사용자 인터페이스를 구축하는 데 사용할 수 있는 여러 클래스를 제공합니다.
• 제품 개발 가속화, 사용자 정의 CSS 규칙을 작성할 필요가 없으므로 개발자의 전반적인 생산성을 향상시킬 수 있습니다.

 

위의 3가지 장점으로인해 개발자들의 높은 만족감이 선호도 1위로 만들었다고 생각이 들었습니다.
추가로 Tailwind CSS는 위에서 CSS의 진화/발전으로 발생했던 문제점들을 많은 부분 해결가능합니다.
 
그러나, 단점의 최전방으로 Tailwind CSS를 과도하게 사용할 경우 클래스 선언이 복잘해질 수 있고, 학습곡선이 높을 수 있다는 단점도 고려해야 하지만, 직접 E-커머스 프로젝트의 컴포넌트들을 붙여보니, 클래스 선언이 복잡하지 않았으며 학습곡선이 높지 않았습니다.
 
그래도 무조건 적인 도입은 올바르지 않다고는 생각합니다. 어떠한 프레임워크를 도입할 때는 프로젝트 환경과 요구 사항의 포인트를 정확히 진단하여 선택해야 합니다.

---

[1] 원문글 링크 : State of CSS 2023: CSS Frameworks
[2] 원문글 링크 : Tailwind CSS - Wikipedia