CSS 2

CSS BEM 방법론, 가독성에 대하여

CSS 렌더링 방식과 선언 순서를 공부하고나서 코드를 보니 클래스명 정의에 대해 모호함을 느꼈다. 프로젝트에서 시멘틱 태그로 선언을 못했다. 로컬에 설치되는 거라 SEO가 필요없고, 단일페이지라 일반적인 웹구조를 갖고 있지 않아서 더욱 고민이었다. BEM을 중심으로 CSS에서 확보해야할 가독성에 대해 알아보자. Computer Sciene에는 두 가지 어려운 문제가 있다. 캐시 무효화(cache invalidation)와 이름 붙이기 - Phil Karlton CSS 방법론 소규모 사이트에서는 스타일을 구성하는 방식이 일반적으로 문제가 되지 않는다. 하지만 프로젝트가 업데이트 될수록 코드의 복잡도가 상승되면서 세 가지 측면의 효율성이 중요해진다. 코드를 작성하는 데에 걸리는 시간, 필요한 코드의 양, 브..

CSS 2023.09.05

명료한 CSS 선언 순서, 렌더링과 연관지어 생각해보기

CSS의 가독성은 어떻게 높일 수 있을까? 단순히 Prettier를 통해 코드 포맷 스타일을 유지하면 끝일까? 내가 중점으로 보고 싶었던 것은 CSS에서 클래스 이름과 들여 쓰기와 상관없이 중괄호 내에 선언되는 프로퍼티들의 순서를 어떻게 정할 것인가?이다. MDN, code guide등의 해외 공식 문서들을 살펴보며 어떻게 정할 것이며, 왜 그렇게 순서를 지키는 것이 좋을지 그리고 CSS를 코드의 관점으로 보고 가독성을 지켜야 되는 이유에 대해 말해보겠다. CSS 프로퍼티 나열 방식에 대한 여러 방법론(Randomly, Grouped by Type, By line length, Alphabetical..)이 존재하지만, 오늘 포스팅할 내용은 타입에 의한 분류법이다. 선언 순서는 단 하나의 원칙에 따라서만..

CSS 2023.08.14