[CSS] CSS방법론
CSS방법론: 유지보수가 용이한 CSS 작성 방법
OOCSS
CSS를 모듈 방식으로 코딩하여 중복을 최소화
구조와 스킨(모양) 분리
/* 구조 */
.btn { … }
/* 스킨 */
.accept { … }
.cancel { … }
구조속성:
width
,height
,padding
,margin
등
스킨속성:color
,font
,background
,box-shadow
등
컨테이너, 컨텐츠 분리
/* .main .btn (x) */
.main { … }
.btn { … }
SMACSS
Scalable and Modular Architecture for CSS
CSS에 대한 확장형 모듈식 구조
CSS코드를 그 역할에 따라 분류
파생된 CSS 셀렉터 사용금지
ID 셀렉터 사용금지
!important 사용 금지
Base
기본 스타일(Reset, Default, Variables, Mixins)
기본 스타일에는 !important 사용할 필요가 없다
Layout
레이아웃 관련 스타일
클래스명에 접두사 l-
명시
주요 컴포넌트 id
셀렉터(header
,footer
등)
하위 컴포넌트 class
셀렉터(nav
,form
등)
#content { … }
.l-fixed #content { … }
Module
모듈 관련 스타일
스타일 재사용을 위한 요소
Block, Element, Module
재사용을 위해 ID와 element 사용 금지(element를 사용해야 한다면 자식 선택자(>
) 사용)
State
요소의 상태변화를 표현하는 스타일(ex, 툴팁
,아코디언
)
주로 JavaScript
로 조작되는 클래스
클래스명에 접두사 is-
명시
!important
사용 가능
is-hidden { … }
is-error { … }
is-hover { … }
Theme
사이트의 전반적인 look과 feel 제어
사용자가 선택 가능하도록 스타일을 재선언하여 사용
클래스명에 접두사 theme-
명시
BEM
Block Element Modifier
OOP
(Object Oriented Programming)와 유사- 오직 class명만 사용(id 사용x)
장점: 직관적인 클래스 명으로 구조 파익이 쉽다.
단점: 클래스명이 상대적으로 길어진다.
Blcok
element를 담고 있는 컨테이너
(ex, logo
, login
, form
, menu
, search
, from
, content
, footer
)
.header { … }
.menu { … }
.search { … }
Block들은 서로 중첩될 수 있다
Element
Blcok 안에서 특정 기능을 수행하는 컴포넌트
두 개의 Underscore(Lodash)
기호로 연결하여 block 다음에 작성
.header__logo { … }
.header__menu { … }
.header__search { … }
.header__login { … }
이름이 길 경우
-
사용.block-name__element-name
Element들은 서로 중첩될 수 없다
block__element1__element2
는 잘못된 구조다
Modifiers
block 또는 element의 속성으로 외관이나 상태를 변화시킴
두 개의 Hyphen(Dash)
기호로 연결하여 사용
.block--modifier {…}
.block__element--modifier {…}
Boolean 유형
Modifier 유무만 중요하고 그 값이 무관할 때 사용: disabled
, focused
수식어가 있으면 값이 true라고 가정
.form__button--disabled {…}
key-value 유형
.form__button--color-red {…}
.form__button--theme-ocean {…}
Utility-First CSS / Functional CSS
예시: Tailwind CSS, Tachyons, Atomic CSS
- 시멘틱하고 컨텍스트에 의존하지 않은 CSS 작성
- 클래스명으로 바로 유추할 수 있도록 단 하나의 속성과 값을 나타내는 CSS를 사전에 정의
- 미리 정의된 클래스를 HTML에서 조합해서 사용
<button class="w-1/2 rounded-md border border-gray-300">Button</button>
inline style과 다른점
- 의사 클래스 셀렉터 사용 가능
- media query 사용 가능
Author And Source
이 문제에 관하여([CSS] CSS방법론), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tjdgus3160/CSS-CSS방법론저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)