CSS in JS 방법론

구조적인 CSS 작성 방법의 발전

CSS 전처리기(CSS Preprocessor) 란 CSS가 구조적으로 작성될 수 있게 도움을 주는 도구입니다

CSS 전처리기 자체만으로는 웹 서버가 인지하지 못하기에 각 CSS 전처리기에 맞는 Compiler를 사용해야 하고 컴파일을 하게 되면 실제로 우리가 사용하는 CSS 문서로 변환이 됩니다

방법론

방법론의 공통 지향점은 다음과 같습니다.

• 코드의 재사용
• 코드의 간결화(유지보수 용이)
• 코드의 확장성
• 코드의 예측성(클래스 명으로 의미 예측)

대표적인 CSS 방법론으로는 BEM 이 있습니다

BEM 이란 Block, Element, Modifier 로 구분하여 클래스명을 작성하는 방법입니다

//BLOCK    ELEMENT   MODIFIER
.header__navigation--navi-text {
	display: none;
}
// __와 --로 구분합니다

Block은 전체를 감싸고 있는 요소

Element는 블럭을 포함하고 있는 한조각

Modifier는 블럭 또는 요소의 속성(블록이나 엘리먼트의 외관이나 상태를 변화하게 하는 부분)을 의미합니다

Styled-Component

Styled-Component는 기능적이거나 상태를 가진 컴포넌트들로부터 UI를 완전 분리해 사용할 수 있는 아주 단순한 패턴을 제공합니다