CSS를 여러 파일로 분할하지 않는 방법은 CSS를 여러 파일로 적절하게 구성하는 방법을 배우는 것이다.
장점:
1. css코드가 작다. 가독성이 좋아진다.
- 작고 탐색하기 쉽다. 위아래로 스크롤할 필요 없이 한눈에 파악하여 유지 보수할 수 있다.
2. selector간의 충돌 방지
- CSS selectors는 계단식(cascade)화 되지 않고 다른 selectors와 충돌하지 않는다.
[Rules]
1. 제작할 페이지를 어떻게 컴포넌트로 구성할 지 미리 계획.
a. 컴포넌트 should be self-contained. b. 제작할 컴포넌트가 어떻게 작동될지 미리 생각해야 한다. (plan and design) c. 컴포넌트는 재사용될 수 있어야 한다. (reusable) d. 컴포넌트의 style과 behavior은 주변에 영향을 받으면 안된다.
2. 컴포넌트의 스타일링과 기능은 오로지 props에 의해서만 영향을 받아야 한다.
A. Styling: BEM(Block, Element, Modifier) : BEM은 재사용 가능하고 독립적인 "블록"을 만들어 웹페이지에 구성하기 위한 방법론이다. a. 모든 태그(element)에 className을 붙임으로 다른 selector와의 충동을 방지한다. 이는 기존 CSS cascade의 영향을 피해간다. 즉, CSS 파일들은 서로 간섭하지 않기 때문에 어떤 파일이 먼저 삽입되는지 걱정할 필요 없이 연결만 할 수 있다. b. JSX파일과 CSS파일을 항상 같이 저장한다.
3. Global.css(기본 스타일)은 구체적이지 않고 매우 낮은 특수성을 가져야 한다.
ko.reactjs.org/docs/faq-structure.html
medium.com/@dtinth/how-to-organize-css-in-multiple-files-21952654711
댓글