주제선정 이유
시스템 규모가 커지면 디자인도 복잡해지고 css도 프레임워크 단위로 생각해봐야 합니다.
여러가지 css방법론들중 BEM을 소개하고자 합니다.
내용
•
여러 개발자가 협업하는 환경에서 컴포넌트로 작성된 css를 보다 효율적으로 사용하기 위한 가이드
className 지을때 hypen(-)사용
•
카멜,언더스코어 보다 쓰기편함 (shift안눌러도 되서 새끼손가락 free)
•
단어 수정 쉬움
카멜,언더는 한 단어로 인식해서 수정하려면 방향키 여러번 눌러야함
하이픈은 옵션키로 문자사이 이동 가능
```css
.homeTabItem {}
.home_tab_item {}
.home-tab-item {}
```
Plain Text
복사
id 보다는 className
•
id는 문서내에서 유일해야함 (html스펙)
•
id가 여러개면 쿼리셀렉터로 선택이 어려움
•
성능 이유나 id사용을 피할수 없다면 충분히 유니크하게 네이밍 필요
태그선택자 사용 피하기
•
태그는 언제든지 중복될 수 있음
```css
.a .info ul {
color: red;
padding: 1em;
}
.a .info .etc ul {
color: blue;
padding: 0;
}
```
Plain Text
복사
•
.etc의 ul은 부모의 ul 속성을 상속함
•
padding : 0 처럼 부모의 속성을 초기화 하는 코드가 들어감
짧고 단순한 네이밍 피하기
```css
.box .info {
padding: 20px;
}
.item .info {
padding: 10px;
}
```
Plain Text
복사
•
컴포넌트로 작성하여 재사용할 경우 .box 와 .item 은 언제든지 중첩될 수 있고 .info의 속성이 섞일 수 있음
CSS 속성은 한줄에 하나만 선언
```css
(O)
.ini-button {
display: flex;
align-items: center;
justify-contents: center;
color: red;
font-size: 20px;
}
(X)
.ini-button { display: flex;align-items: center;justify-contents: center; color: red; font-size: 20px;}
```
Plain Text
복사
•
가독성 좋음
•
어느 속성을 어느 위치에 넣을지 고민 필요 없음
•
diff할때 좋음 (한줄에 다 있으면 어디가 바뀐지 모르겠음)
•
성능이 걱정되면 minify
BEM 방법론 (Block-Element-Modifier)
•
Block : 구분자
•
Element : 세부 구분자
•
Modifier : 상태 (active, editable, disable .. )
•
독립적이고 재사용 가능한 css방법론
•
괴랄한 보이지만 유지보수 수월
```html
<!-- CSS -->
<ul class="tab">
<li class="item">
<div class="text">홈</div>
<div class="bar"></div>
</li>
<li class="item">
<div class="text">웨딩홀</div>
<div class="bar"></div>
</li>
</ul>
<style>
.tab {}
.tab.red {
background: green;
}
.tab .item {}
.tab .item > .text {}
.tab .item .bar {
red:
}
.tab.red .item > .text {}
</style>
<!-- BEM -->
<ul class="tab tab--scrollable">
<li class="tab__item">
<div class="tab__item-text">홈</div>
<div class="tab__item-bar"></div>
</li>
<li class="tab__item">
<div class="tab__item-text">웨딩홀</div>
<div class="tab__item-bar"></div>
</li>
<div class="btn">
<div class="btn__text">버튼1</div>
</div>
</ul>
<style>
.tab {}
.tab__item {}
.tab__item-text {}
.tab__item-bar {}
.tab--scrollable {}
.btn {}
.btn__text {}
</style>
```
Plain Text
복사
•
sass와 호환성이 좋음
```scss
.tab {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
&__item {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
cursor: pointer;
}
&__text {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
font-weight: 600;
color: var(--ini-hometab-color);
}
&__bar {
position: absolute;
bottom: 0;
left: -10px;
right: -10px;
height: 1.8px;
background: var(--ini-hometab-active-bar-color);
opacity: 0;
}
&--scrollable {
overflow-x: auto;
white-space: nowrap;
}
&--active & {
&__text {
color: var(--ini-hometab-active-color);
}
&__bar {
opacity: 1;
}
}
}
```
Plain Text
복사
•
className 중복 방지
•
직관적이고 DOM tree 살펴보지 않아도 됨
•
탐색레벨이 낮고 단순(뎁스가 1~2)
•
쿼리셀렉터로 한번에 찾을 수 있음
```jsx
$(".tab .item .text") VS $(".tab__text")
```
Plain Text
복사
•
CSS 오버라이딩 수월
```css
.home .head .item {
color: blue;
}
.list.theme-red .item .tag { color: red; }
.list .item.theme-red .tag { color: red; }
.list .item .tag.theme-red { color: red; }
```
Plain Text
복사
•
여기서 .item의 컬러를 빨간색으로 오버라이드 하고 싶다면, .home / .tab / .item중 선택해야함. 뎁스가 깊어질 수록 복잡도 늘어나고, 협업해야 할때 많은 선택권은 곧 복잡도 증가로 이어짐 뎁스를 낮춘다면,
```css
.home__item {
color: blue;
}
.home__item { color: red; }
.home__item--red { color: red;}
```
Plain Text
복사
•
.home__item 자신을 변경하거나 상태변경자를 추가