[CSS] CSS를 알아보자! (SMASS/BEM/OOCSS ,SASS/SCSS/LESS)

3월 13, 2019

CSS를 알아보자!

1. 방법론 (SMASS, BEM, OOCSS)
2. 전처리도구(SASS/SCSS/LESS)

CSS를 지금껏 사용했지만 사실 전처리도구(SASS/SCSS/LESS) 등을 사용해보지 않았다.
지금까지 너무 게으르게 살았던듯... ㅜㅜ
다시 정신차리고 공부하는 삶을 살아야겠다.

목표1 : 몇가지 방법론을 살펴보고 한가지를 선택해서 적용!
목표2 : 전처리기를 사용하여 작업!

1. 방법론 (SMASS, BEM, OOCSS)

1-1. CMASS(Scalable and Modular Architecture for CSS)

참고 - https://smacss.com/

SMACSS의 핵심은 분류이다.

CSS 규칙을 범주화함으로써 패턴을 설정한다.

SMACSS는 5가지의 규칙이 있다.

Base - 기본스타일
Layout - 엘리먼트를 나열하는 것과 관련된 스타일
Module - 재사용을 위해 하나로 묶는 스타일
State - 상태변경을 위한 스타일
Theme

프리픽스(preifx)를 사용하여 layout, state, module 규칙을 구별한다.

layout : l-
module : 모듈의 이름을 사용
state : is-

[Base]

html, body, form { margin: 0; padding: 0; }
input[type=text] { boarder: 1px solid #999; }
a { color: #039; }
a:hover { color: #03C; }

-> CSS reset 과 같은부분 [Layout] Layout은 ID 선택자를 사용해도 된다.

#header, #article, #footer {
    width: 960px;
    margin: auto;
}
#article {
    border: solid #CCC;
    border-width: 1px 0 0;
}
#article {
    float: left;
}
#sidebar {
    float: right;
}
.l-flipped #article {
    float: right;
}
.l-flipped #sidebar {
    float: left;
}
.l-grid {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.l-grid > li {
    display: inline-block;
    margin: 0 0 10px 10px; 
    
    /* IE7 hack to mimic inline-block on block elements */
    *display: inline;
    *zoom: 1;
}

[Module] 네비게이션 바, 캐 러셀, 대화 상자, 위젯

.stick { ... }
.stick-name { ... }
.stick-number { ... }

[State] 요소의 상태 변화를 표현하고 접두사 사용

.is-error { ... }
.is-hidden { ... }
.is-disabled { ... }

[Theme] 사용자가 선택 가능 하도록 스타일을 재선언하여 사용

// base.css
.header {
    background-color: green;
}
// theme.css
.header {
    background-color: red;
}

1-2. BEM (Block Element Modifier)

참고 - https://seesparkbox.com/foundry/bem_by_example

참고 - https://css-tricks.com/bem-101/

블록(block), 요소(element), 상태(modifier)로 구분하여 클래스 작성하며 엄격한 네이밍 규칙을 가진다.

블록 : 구성 요소의 가장 바깥 쪽 부모 요소가 블록으로 정의됩니다.

요소 : 구성 요소 내부는 요소라는 하나 이상의 자식이 될 수 있습니다.

수정 자 (modifier) : 블록이나 요소가 수식어로 표현 된 변형을 가질 수있다. 단독으로 사용할 수 없다. boolean이나 key-value 형태로 넣을 수 있다. (-disable, -color-red)

[block]__[element]--[modifier]

스타일을 작성할때 어떤 수정자와 자식이 연결되어있는지 쉽게 볼수있다.
설계자와 개발자는 구성요소의 이름을 일관되게 지정하여 팀 구성원과 소통이 원활해진다.
중첩되지 않게 설계해야한다.

.js- : 를 붙여서 작성하면 이건 자바스크립트 관련 스타일인것을 표기한다.


<a class="btn btn--big btn--orange" href="http://css-tricks.com">
<span class="btn__price">$9.99</span>
<span class="btn__text">Subscribe</span>
</a>

.btn : 블록
.btn--big : --big 수정자
.btn--orange : --orange 수정자
.btn__price : __price 자식요소
.btn__text : __text 자식요소

1-3. OOCSS(An Introduction To Object Oriented)

참고 - https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

객체지향 코딩방법과 마찬가지로 재사용, 유지관리가 쉽게끔 작성하는 CSS 표기가이드이다.

자손선택자를 사용하지 않는다. ( .sidebar h3 )
ID 사용을 피한다. ( #sidebar )
태그요소에 클래스를 부착하지 않는다. ( div.sidebar )
!important 를 피한다.
CSSlint 를 하용하여 CSS를 확인한다.
CSS 그리드를 사용한다.

이 블로그 검색

개발일지