Atomic CSS 사용이 가치가 있는가?

손정만·2022년 2월 22일
0

mirco CSS

목록 보기
2/2

장점

의미(semantic)할 이유가 없어지는 CSS

프론트엔드에서의 개발이 컴포넌트 중심으로 변했고 그 이유는 재사용성도 있겠지만
그 외에 개발 관점을 좀더 정밀하게 보기 위함이라 생각된다.

백엔드에서도 MVC 모델이 나오고 devops에서 컨테이너가 이용되는 이유도
그런 맥락으로 볼수 있지 않을까 한다.

시멘틱 CSS 가 등장한것도 CSS 구성된게 어떤 요소의 형태를 말하는지 이름으로써
요약하기 위함으로 생긴것인데 컴포넌트로 분리된 이상,
과연 요소의 명칭 이상의 가치가 있을지 의문이다.

단순하게 요소의 폰트 사이즈 지정을 위해 명명을 하는것 또한 보이지 않는 자원 손실로 생각된다.

중첩(nesting)으로 인한 문제 방지

위에서 처럼 컴포넌트 중심으로 처리되며 중첩되는 CSS는 오히려
개발 과정에서 인지해야 할 범위를 불필요하게 넓히게 되는 문제가 발생한다고 본다.

오직 단일 요소에 대해서만 처리하여 컴포넌트 재사용시에도
클래스 명명에 따라 간섭받을 가능성을 아예 배제한다는 점에서 장점으로 생각된다.

단점

러닝커브

축약어를 익히는 과정 자체가 Atomic CSS를 쓰고자 했던 이유와 상반된다.
본래 좀 더 유연하고 즉각적인 개발을 목표로 쓰게 되지만
정작 그 과정에선 학습의 과정이 필요하단 점이 문제가 된다.

학습과정이 고급 기능에 대한 제공으로써 이어진다면 괜찮지만
이런 형태로 감축을 위한 증축은 제로섬으로 한없이 가까워지지 않은가 싶다.

복잡성

CSS 정렬 비교에서 볼때 그룹화 시키는 것, 알파벳으로 정렬하는 것에 대해
높은 비율로 유지될 수 있는것은 더 직관적으로 작성된 CSS가 의미하는 UI를 유추하여
유지 보수에 이점을 주기 위함으로 본다.

그러나 class에 정의 되는 특성상 lint가 적용되더라도 규모가 있는 스타일은
현재로썬 많은 영역을 스타일 처리를 위해 표기되어 인식이 어렵도록 만드는 문제가 생긴다.

CSS 정렬시 알파벳 정렬
규칙 정의를 유지하기 위해 자원이 들긴하지만 규칙을 정의해야 한다면
그룹화 시키는 방법이 유일한 정렬로 본다.

무작위 배치 - 생각하는 구조로 즉각 처리 가능, 색인 불가
알파벳 정렬 - 변경시 원하는 항목에 빠르게 색인 가능, 비 영어권인 한국은 색인 효율이 낮음

@media와 pre-processor(@mixin, ...)

media query(@media)는 반응형 처리에 매우 중요한 요소이고 필수적으로 생각된다.
그러나 이런 부분에 대한 제공은 고려되지 않아서 독립적으로
Atomic CSS만 사용되기에는 결점이라고 생각된다.

요소 자체의 사이즈같은 값에 대해서도 @media가 적용되는 기획이 css 쪽에서
진행 중인거로 알고있는데 이점은 상당한 이점을 챙길수 없음을 의미한다.

그래도 tailwind CSS의 속성에선 media query에 대한 설정하여 적용가능

CSS 전처리기(pre-processor) 에서 테마와 같이 공통 적용 되지만
일부 속성이 변경되는 형태는 적용에 문제가 생긴다고 본다.

tailwind에선 처리가 가능하다.

결론

Atomic CSS는 기존 style에 선언된 inline 방식의 장점을 class 선택자의 장점과 융화되면서
장점을 얻었지만 그와 함께 생겨난 문제도 적지 않아 이걸 적용해서 프로젝트를
새로 진행하기엔 리스크가 있다고 생각된다.

쓰게된다면 Atomic CSS만 단독으로 적용될 일은 없을 것이다.
프로젝트에 적용시키기엔 아직은 감당할 이유가 없는 리스크이다.

Atomic CSS의 느낌은 편의성을 제공하는 대신 불편한 설치,
에어컨을 틀것인가 통풍시트를 따로 사서 쓸것인가 하는 그런 느낌인것 같다

정말 엄청난 기술이 아니지만
그럼에도 논쟁이 많아서 더욱 고민된다.

https://css-tricks.com/lets-define-exactly-atomic-css/
https://medium.com/simple-human/the-problem-with-atomic-css-d0c09c7aa38e
https://www.freecodecamp.org/news/acss-a-dynamic-atomic-css-library-402dff9756e0/
https://dev.to/sparkfish/is-tailwindcss-worth-it-3ppc

0개의 댓글