[02-01] CSS적용 방법론

1.1 Gloal CSS

• Selecter 원시 방식

        : 외부에 정의된 CSS파일을 통해 import 하여 HTML Selector로 하나하나 적용

• Inline 방식

<div style = {{borderColor: 'red'...}}

        : 객체에 직접 스타일 -> React 리렌더링 성능 이슈

        => React에서 style 내 객체가 매 렌더링마다 다르게 인식되어 매번 DOM 계산을 통한 성능 저하 발생

 

• 잘 사용하지 않는 방법들

        -> 선택자 충돌을 막기위해 BEM(Block Element Modifier) 사용

        -> 만약 충돌의 발생 시, !important를 통해 특정 선택자의 우선 순위를 강하게 주장

        -> 하나의 Global CSS가 모든 페이지를 관리 ==> 번들 사이즈가 너무 큼

---

1.2 CSS Modules

: 각 페이지마다 각 CSS파일 적용

장점	선택자 충돌 발생 X(No Collisions) -> 각 페이지별 CSS가 로컬 Scope를 갖기 때문
	Next.js 사용 시, 해당 컴포넌트 혹은 페이지가 `import`하는 CSS를 알 수 있어 Code Spliting 가능
	`component`문법을 통해 타 CSS Modules의 선택자 정의를 가져와 확장이 가능
단점	No Programmatic Features(Loop, Mixin 등과 같은 확장 문법X)

---

1.3 CSS Preprocessor

: 컴파일러를 통해 SCSS, SASS, LESS 등 CSS 확장 문법 지원 언어를 CSS로 컴파일

: Next.js를 사용한다면 SASS 컴파일러를 설치 후 사용(.css -> .scss)

: Bundler + Transpiler

    - CSS 개발의 편의성 향상을 위해 나옴

        -> 다양한 파일 조작 가능

        -> Enhanced CSS(CSS 확장 기능 사용)

장점	모든 Programmatic Features(Loop, Mixin 등) 굿
단점	러닝 커브 존재 js와 완전히 분리되어 있기에 유저 상호작용이 빡셈

---

1.4 CSS-in-JS

: Select 없이 JS내 CSS사용

styled.div`border-color: red;` //@Media 등 css문법

: JS로직과 CSS 문법을 그대로 사용 가능 => 굿

: Styled Components와 Emotion등이 존재 -> 현재는 Emotion이 표준(MUI 내 선택 및 사용, SSR 최적)

장점	Dynamic Styles -> 유저 동작에 따라 JS로직을 통해 동적 CSS적용 가능
	CSS의 부족한 NoProgrammatic Features 단점을 다양한 JS의 Programmaic Features로 보완
	CSS 추가 파일 생성 없이 JS파일 내 정의 -> 자연스런 Scoped Styles

---

1.5 Component Library

: Mantine, Ant, Material Design, Chakra UI, Chadcn 등

: 자체 제작 컴포넌트를 제공하지만, 컴포넌트 제공 자체가 목적, CSS자체는 최대한 무색 무취

    ->장점) 개발자가 자체적으로 원하는 디자인을 커스터마이징하기 수월

---

1.6 UI Framwork

: Bootstrap 자체 제작 컴포넌트와 CSS 디자인 시스템 제공

장점	Pre-built Component 제공 (= 미리 디자인 시스템으로 자체 제작된 컴포넌트 제공)
	자체 디자인 시스템 기반 제작 -> 디자인 시스템 내 변수 변경으로 쉽게 테마 제작 가능
단점	Pre-built Component 그대로 사용이 적음 -> Wrapper Component를 만들어야함(= 지친다..)
	사용하지 않는 Pre-built Component들과 CSS정의들을 모두 번들링 -> 번들 사이즈가 너무 크다..

 

---

2.1 CSS Preprocessor / CSS Framework / UI Framework

CSS Preprocessor	- SASS, SCSS
	- CSS 활용을 위한 확장 문법 제공
CSS Framework	- Tailwind CSS(유틸리티 클래스 기반)
	- CSS 활용을 위한 방법론 및 디자인 시스템 제공
UI Framework	- Tailwind, Material UI, Chakra UI, Shadcn/ui
	- 디자인 시스템 제공 및 UI컴포넌트 제공     -> UI컴포넌트를 직접 HTML태그 확장으로 만들기 X     -> 간단하게 디자인 시스템으로 구축         => 일관된 Look&Feel 제공
	- 참고     - 위의 이유 때문에 CSS Framework와 같이 사용 X     -> 디자인 시스템 충돌 발생 가능성 ..

 

---

깨알 단어 사전

- BEM(Block Element Modifier): block(재사용 가능한 기능적으로 독립적인 페이지 컴포넌트) + Element(블럭 구성 요소) + Modifier(블럭이나 엘리먼트의 속성)

---

이전글: 2024.12.11 - [ASAC/정리용] - [2주차 1차시] 웹 동작-3_개발과 배포 그리고 서비스까지의 흐름

[2주차 1차시] 웹 동작-3_개발과 배포 그리고 서비스까지의 흐름

다음글: