_(1).jpeg&blockId=0e552736-74f0-4f5a-89e1-328d4931ca7c)
semantic css에서 atomic css로
•
해당 글을 보고 작성
글의 저자 존 폴라섹은 팀에서 semantic css를 사용하고 있었다. semantic은 코드의 '의미'를 나타낸다. semantic css는 클래스가 스타일 코드의 의미를 얼마나 잘 나타내는지를 알려준다. 예를 들어, div > ul > li 보다는 .menu__items 가 해당 스타일 코드가 메뉴의 아이템을 꾸며주는 코드임을 더 잘 알려준다.
존이 반응형 웹 레이아웃 작업을 실행할 때, css 파일은 총 41개로 여러 개로 분산된 상태였다. 존은 스타일 시트의 중복을 줄이고, 작업자들이 빠르게 스타일을 찾을 수 있고, 캐시되는 스타일을 하나로 줄여 페이지 로드 속도를 높이기 위해 분산된 스타일 시트 하나로 결합했다.
그러나 프로젝트가 커질 수록 css 시트 역시 함께 커졌다. 존은 admin 페이지에 쓰이는 스타일과 사용자용 페이지 스타일을 분리하고, 사용하지 않는 스타일을 줄임으로써 css 파일 크기를 줄였지만 여전히 프로젝트와 함께 css가 비례해 커질 수 있다는 문제점이 있었다. 또한 여전히 css 파일의 크기는 크기도 했다.
존은 스타일 시트를 정리하다가 여러 클래스에서 동일한 속성이 반복되는 것을 발견했다. 이에 착안해 동일하게 반복되는 속성을 각각의 클래스로 빼고, 이러한 클래스들을 조합해 스타일링 했다. css를 기능 별로 속성을 나눠 클래스를 만들어 기존보다 css 파일 크기를 30% 정도 줄일 수 있었다.
atomic css는 프로젝트의 규모가 커졌을 때, 중복되는 스타일을 줄이고 기능 별로 나누어 유지보수가 쉬운 css를 만들고 싶을 때 사용하면 좋을 것 같다.
또한 atomic css의 가장 좋은 점은 미리 만들어놓은 클래스들이 있으면 새로운 컴포넌트를 만들 때에도 기존의 스타일을 사용하면 된다는 것이다. 따라서, 새로 추가되는 css는 없고 기존 것만 사용하여 개발을 더 쉽고 빠르게 할 수 있다.
