세상이 변화하는 발전의 속도보다 조금 더 빠르게 웹은 발전하고 있습니다.
특히 그 중에서도 CSS의 활용도가 높아지면서 복잡한 설계의 필요성을 느끼지 못했던 CSS에도 다양한 방법론들이 생기기 시작했습니다.
- 코드의 재사용성을 위해
- 쉽게 유지보수 하기위해
- 확장을 가능하게 하기위해
- 클래스명으로도 무슨 의미인지 예측 가능하도록 하기위해
SMACSS
(Scalable and Modular Architecture for CSS)
정의
- CSS에 대한 확장형 모듈식 구조 (by Jonathan Snook)
- CSS의 프레임워크가 아닌 하나의 스타일 가이드
사용목적
- Class명을 통한 예측
- 재 사용
- 쉬운 유지보수
- 확장 가능
SMACSS의 유의사항
- 파생된 CSS 셀렉터 사용금지
- ID 셀렉터 사용금지
- !important 사용 금지
- Class 이름은 의미있게, 다른 개발자가 이해할 수 있도록 선언
1. Base - 기초 스타일
- 기본 스타일 (Reset, Default, Variables, Mixins)
- 기본 스타일에는 !important를 쓸 필요가 없다.
- 선택자: 주로 요소 선택자 (ex. input[type=text] 같은 것)
2. Layout - 레이아웃 관련된 스타일
- Class명에 suffix “l-”를 붙인다
- 선택자: 아이디(#)나 클래스(.)
- 기능: 페이지를 구획하는 스타일(예: 헤더, 푸터, 그리드 …)
3. Module(Components) - 모듈 관련 스타일
- 기능 : 레이아웃 요소 안에 들어가는 더 작은 부분들 (네비게이션 바, 말풍선, 대화상자, 위젯 등)
- 스타일 재사용을 위한 요소
- Block, Element, Module
- 재사용을 위해 id 셀렉터와 element를 사용하지 않는다.
만약, element 셀렉터를 사용해야 한다면, .box > span 처럼 child 셀렉터를 사용 - 사용 예시) nav bar, 이미지 슬라이더, dialogs, widgets, tables, icons
4. State - 상태를 나타내는 스타일
- 기능: 다른 스타일에 덧붙이거나 덮어 씌워서 상태를 나타냄 ( 펼침과 접힘, 성공과 실패 등 )
- 선택자: 클래스 선택자 한개, 같은 모듈에 두 상태를 적용하지 말 것.
- !important를 쓸 수 있다 (최소화 할 것)
- Hidden, expend, active, hover 등의 상태에서 사용
- Class명에 suffix “is-” 또는 “s-”를 붙여서 사용 (특정 모듈은 모듈 이름도 뒤에 붙인다. ex) is-tab-active )
#header는 레이아웃 요소임을 알 수 있다.
.is-collapsed로 접힌 상태임을 알 수 있다.
.msg는 모듈이다.
.is-error로 오류 상태임을 알 수 있다.
#searchbox 연관 된 라벨은 숨겨져 있다. ( .is-hidden )
라벨이 마크업 된 이유는 스크린 리더기를 위한 것
5. Theme
- 사이트 전반적 look and feel 제어
- 색상이나 이미지를 불변하는 스타일과 분리하는 것. 기존 스타일을 재선언하여 사용할 수 있다.
- 적용범위가 넓은 테마는 “theme-”를 suffix를 붙여 사용한다.
BEM
(Block, Element, Module)
정의
- BEM은 Block Element Modifier의 약자이다
- OOP(Object Oriented Programming)와 유사하다
- ID는 사용할 수 없고, 오직 class명만 사용할 수 있다.
- .header __navigation ‐‐secondary과 같은 class를 사용한다
1. Block
block은 문단 전체에 적용된 element 또는 element를 담고 있는 컨테이너를 말한다.
ex) logo / login form / menu / search from / content / footer
- 재사용 할 수있는 기능적으로 독립적인 페이지 구성 요소. HTML에서 블록은 class 속성으로 표시된다.
- 형태(red, big)가 아닌 목적(menu, button)에 맞게 결정해야 한다.
- 블록은 환경에 영향을 받지 않아야 한다. 즉, 여백이나 위치를 설정하면 안된다.
- 태그, id 선택자를 사용하면 안된다.
- 블록은 서로 중첩해서 작성 할 수 있다.
ex) header, menu, search-form ….
2. Element
element는 block 안에서 특정 기능을 수행하는 컴포넌트이다. element는 상황에 따라 달라진다.
각 element는 두 개의 밑줄표시로 연결하여 block 다음에 작성한다.
block 이름이나 element 이름이 길 경우 ' – ' 하이픈으로 연결한다. (강제성은 없음, 프로젝트의 규칙을 적용하면 됨)
- 블록안에서 특정 기능을 담당하는 부분.
- block__element 형태로 사용 (더블 언더바)
- 형태(red, big)가 아닌 목적(item, text, title)에 맞게 결정해야 한다.
- 요소는 중첩해서 작성 할 수 있다.
- 요소는 블록의 부분으로만 사용 할 수 있고 다른 요소의 부분으로 사용할 수 없다.
- 모든 블록에서 요소는 필수가 아닌 선택적으로 사용한다. 즉, 블록안에 요소가 없을 수도 있다.
ex) menu__item, header__title …
3. Modifiers
- Modifier은 block 또는 element의 속성이다
- 이 속성은 block 또는 element의 외관이나 상태를 변화시킨다
- Class명은 “–“를 추가하여 modifier 추가
- 블록이나 요소의 모양(color, size) / 상태(disabled, checked)를 정의한다.
- block__element--modifier, block--modifier 형태로 사용(더블 하이픈)
- 수식어의 블리언 타입과 키-벨류 타입이 있다.
| 블리언 타입 | 키-벨류 타입 |
|
수식어가 있으면 값이 true 라고 가정한다. (form__button — disabled)
|
키, 벨류를 하이픈으로 연결하여 표시한다. (color-red, theme-ocean)
|
- 수식어는 단독으로 사용할 수 없다. 즉 기본 블록과 요소에 추가하여 사용해야 한다.
( class=”block__element block__element — modifier”)
탭 메뉴가 다른 영역에서 다른 스타일로 사용된다면 메인 속성을 복사하여 추가 하거나, 전 처리 장치인 sass의 @extend를 활용하여 속성을 상속 받을 수 있다
4. class명이 길다?
- BEM의 class명은 구체적이고 명료하여 HTML안에서도 읽기 쉬워야 한다.
- class명이 무엇을 나타내는지 분명하게 전달돼야 한다
5. 그 외 +
- 파일 시스템
- Class명의 정의 말고도 BEM은 파일 분리 시스템을 정의 하고 있다
- https://en.bem.info/method/filesystem/
- 툴(Tool)
- BEM 방법에 따라 파일 작업을 위한 툴
- https://en.bem.info/tools/
OOCSS = OOCASS + Sass
(Object Oriented CSS)
정의
- Nicole Sullivan에 의해 개발된 프레임워크
- CSS를 모듈 방식으로 코딩하여 중복을 최소화하는 기법
주요원리
- 구조(structure)와 외양/모양을 분리하자.
외양/모양(skin)으로 분리시켜, 결합시키면 다양한 결과물을 얻을 수 있음.
- 컨테이너와 컨텐츠를 분리하자
다른 영역에서도 사용 가능하도록 .header-inside라는 속성으로 추출(분리)하면,
중복 코드를 사용하게 되는 경우가 적어진다.
클래스 이름 짓기
- 간결함: 되도록 짧게
- 명료함: 스타일과 작동 방식이 고스란히 드러나게
- 분명한 말뜻(Semantics): 어떻게 생겼는지가 아니라, 어떤 모듈인지
- 포괄성: 대부분의 사이트에서도 적용되도록
- 화면 중심성: 종이나 다른 매체가 아닌 모니터를 기준으로
EX )
HTML 코드를 시멘틱하게 짜고자 할때, 아래와 같이 CSS를 작성하는 경우가 많다.
CSS 스타일에 중복되는 속성이 많다.. 그렇다면 여기서! OOCSS를 적용하게 되면?
CSS코드는 간결해지지만 HTML 코드는 살짝 복잡해지는 경우가 많다.
이러한 경우가 OOCSS의 한계(?) 라고 할 수 있다. 방법이 아예 없는 것은 아니다.
[ 아래 참고 * ]
| OOsass 장점 | OOsass 단점 |
|
|
[ 참고 * ] CSS에서 OOCSS를 적용하는 것이 아니라, pre-css layer에서 OOCSS를 적용하여 class를 확장하는 방법.
(http://mytory.net/archives/8986/)
Sass의 mixin, extend 방식을 사용하면 Semantic한 HTML코드를 얻을 수 있다. (두 방법의 HTML코드는 동일함)
하지만, 두 방법은 Compile시에는 차이가 있다.
mixin방식으로 했을 경우는 중복된 코드가 발생하므로 extend방식으로 하는 것이 더 좋다.
좋은 & 나쁜습관
1. 좋은 습관
- Component Library를 이용하여 HTML을 구성하자. (like lego)
http://pflannery.github.io/oocss-skeleton.docpad/oocss/help/components.html - semantic 스타일을 지속적으로 사용하자
- 내부에 종속되지 않도록 모듈을 디자인하자
- 코드를 유연하게 (width는 container가 제어하고, height은 contents가 제어하도록)
- Grid를 사랑하는 습관을 갖자. http://jsfiddle.net/inuitcss/CLYUC/l
- 선택자(selector) 사용은 최소화하자
- 여러개의 클래스를 적용하여 확장성을 열어두자
- CSS Lint를 사용해서 코드를 검사하자
- 구조와 스킨을 독립적으로 관리(위에서 설명)
- 컨테이너와 컨텐츠를 구분하자(위에서 설명)
- Reset and fonts를 사용하자 (ex. YUI)
1. 나쁜 습관
- 의존적인 스타일을 피하자
- css에 html 태그를 적지 말자
- ID 사용은 피하자
- 모든 이미지를 스프라이트 하지 말자
- 높이를 고정 시킨 상태에서의 정렬을 피하자
- 텍스트를 이미지로 사용하지 말자
- 너무 이른 최적화는 피하자
- 쓸모 없는 것을 두 번 반복해서 사용하지 말자
[ 참고 사이트 ]
SMACSS
http://www.slideshare.net/fitc_slideshare/presentation-scalable-and-modular-css-fitcam
http://www.slideshare.net/maxdesign/css-oocss-and-smacss
BEM
https://en.bem.info/
http://www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/
OOCSS
http://mytory.net/archives/8949/
http://www.slideshare.net/stubbornella/object-oriented-css
http://takazudo.github.io/presentation-oocss-sass/#/
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] 선택자 / 가상요소 종류와 개념 예시 공부하기 (0) | 2019.12.20 |
|---|---|
| [CSS] 길이를 표현하기 위한 다양한 CSS 단위들 (0) | 2019.12.20 |
| [CSS/Javascript] 스타일 선언 벤더 프리픽스(Prefix) (0) | 2019.12.20 |
| [CSS3] flex item의 정렬과 간격 / justify-content / align-content / align-items 속성 (0) | 2019.12.19 |
| [CSS 가상선택자] 알아두면 좋은 : 와 :: 의 차이점 (0) | 2019.12.10 |