WSConf. Seoul 2016

유지보수하기 쉬운
CSS 전략

안형우 노동자 연대

Best Practice?

계층적 선택자
CSS의 Cascade
시맨틱
콘텐츠의 성격을 반영하는 클래스명 모양 X

→ 실제 개발에서는 문제를 낳음

계층적 선택자

.issue { ... }
.issue h2 { ... }
#intro h1 { ... }
#intro .main { ... }
#intro .main h1 { ... }

한 화면에 담으려고 한 줄로 썼습니다.

권장사항이 우리 목을 조르고 있다

Our CSS best practice are killing us.
by Nicole Sullivan

.issue h2 { ... }
.issue ul { ... }
.issue ul li a { ... }
.issue ul a.more { ... }
.news h2 { ... }
.latest h2 { ... }
.related h2 { ... }

저격형 선택자

.issue h2 { ... }
.issue ul { ... }
.issue ul li a { ... }
.issue ul a.more { ... }
.news h2 { ... }
.news ul { ... }
.news ul li a { ... }
.news ul a.more { ... }
.latest h2 { ... }
.latest ul { ... }
.latest ul li a { ... }
.latest ul a.more { ... }
.related h2 { ... }
.related ul { ... }
.related ul li a { ... }
.related ul a.more { ... }
#sidebar .issue h2 { ... }
#sidebar .news h2 { ... }
#sidebar .issue ul { ... }
#sidebar .latest h2 { ... }
#sidebar .related h2 { ... }
#article-footer .issue h2 { ... }
#article-footer .news h2 { ... }
#article-footer .issue ul { ... }
#article-footer .issue ul li a { ... }
#article-footer .issue ul a.more { ... }
#article-footer .latest h2 { ... }
#article-footer .related h2 { ... }

C cascade 는 잘못이 없다

@import 'nomalize.css';
html {
  font-size: 100%;
  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'KopubDotum', sans-serif;
  ...
}

기본 스타일을 갖추고 출발할 수 있게 해 준다.

폭포Cascade처럼 흐르게 하고
필요한 놈만 저격하자

input, textarea {
  font-family: inherit;
  line-height: inherit;
  color: inherit;
}

클래스명은 내용을 설명해야 하는가?

CSS의 시맨틱 ≠ 내용의 시맨틱

by 니콜라스 갤러거

내용 시맨틱
검색엔진, 사람이 참조
→ HTML, Microdata
개발 시맨틱
개발자가 참조
→ CSS 클래스명
<h2>뉴스</h2>
<ul class="news">
  ...
<h2>뉴스</h2>
<ul class="simple-list">
  ...

OOCSS Object Oriented CSS

by 니콜 설리반, 2009

  • 골격과 겉모양을 분리 Separate Structure and Skin
  • 컨테이너와 내용물을 분리 Separate Container and Content

원칙1. 골격과 겉모양을 분리

.primary-button {
    line-height: 20px;
    background-color: blue;
    ...
}
.danger-button {
    line-height: 20px;
    background-color: red;
    ...
}
.

원칙1. 골격과 겉모양을 분리

.button {
    line-height: 20px;
    ...
}
.button-primary {
    background-color: blue;
}
.button-danger {
    background-color: red;
}

원칙2. 컨테이너와 내용물을 분리

#article h2 { font-size: 24px; }
#article h3 { font-size: 20px; }
#sidebar h2 { font-size: 20px; }
#sidebar h3 { font-size: 16px; }
#footer h2 { font-size: 16px; }
#footer h3 { font-size: 14px; }

원칙2. 컨테이너와 내용물을 분리

.u-h2 { font-size: 24px; }
.u-h3 { font-size: 20px; }
.u-h4 { font-size: 16px; }
.u-h5 { font-size: 14px; }

...

...

.media 객체

<div class="media  attribution">

    <a class="img" href="...">
        <img src="..." alt="...">
    </a>

    <div class="bd">...</div>

</div>

by 니콜 설리반, The media object saves hundreds of lines of code

.media 객체

.media {
  margin: 10px;
}
.media, .bd {
  overflow: hidden;
}
.media .img {
  float: left;
  margin-right: 10px;
}
.media .img img {
  display: block;
}
.media .imgExt {
  float: right;
  margin-left: 10px;
}

부트스트랩의 .btn 객체

<button class="btn  btn-primary">

부트스트랩의 .btn 객체

<button class="btn  btn-lg  btn-primary">

OOCSS의 도구

  • 특정도(Specificity) 평준화
  • 태그 선택자 사용 자제
  • 재사용성을 확보하는 이름
  • 기본 객체를 갖추자
  • 타이포그라피 전략을 세우자

도구1. 특정도Specificity 평준화

id class tag
#sidebar h2 1 0 1
.box.bordered 0 2 0
.u-h2 0 1 0
.bordered 0 1 0

자세하게 알고 싶으면 MDN의 명시도 참고

도구2. 클래스와 태그 선택자를 결합하지 말자

ul.nav

div.box

도구2. 넓은 범위에 자손 태그 선택자를 사용하지 말자

.title span

박근혜는 즉각 퇴진하라

도구2. 넓은 범위에 자손 태그 선택자를 사용하지 말자

.color-primary

박근혜는 즉각 퇴진하라

도구1~2. 특정도와 태그 선택자

.btn { ... }
.uilist a { ... }
<nav class="uilist">
    <a>소개</a>
    <a class="btn">로그인</a>
</nav>

href 속성은 생략했습니다.

도구1~2. 특정도와 태그 선택자

.btn { ... }
.uilist-item { ... }
<nav class="uilist">
    <a class="uilist-item">소개</a>
    <span class="uilist-item">
        <a class="btn">로그인</a>
    </span>
</nav>

도구3. 재사용성을 확보하는 이름

.blue-title

.text-primary

도구3. 재사용성을 확보하는 이름

.bottom-items

.cards

도구4. 기본 객체를 갖추자

그리드, 헤딩, 링크, 목록, 버튼,
미디어, 테이블, 타이포...

도구5. 타이포그라피 전략을 세우자

  • 기본 글꼴, 크기, 색을 태그 선택자에 지정
  • Hx 글꼴, 크기, 색을 헤딩 선택자에 지정
  • 사용할 글꼴, 크기, 색 유틸리티 클래스

객체에서의 폰트 지정은 최소화

도구5. 타이포그라피 전략을 세우자

글자 크기 파편화가 너무 심하다

도구5. 타이포그라피 전략을 세우자

유틸리티 클래스 활용

/* text align */
.u-text-right
.u-text-center

/* font size */
.u-text-tiny
.u-text-small
.u-text-large

/* font color */
.u-color-primary
.u-color-secondary
.u-color-muted
.u-color-highlight

/* remove underline */
.u-text-no-deco

사례

.separator {
  border: none;
  border-bottom-width: 1px;
}
.separator--color-default
.separator--color-secondary 

높이 고정 없이 균일 높이

하단 관련기사
.

제목 부분 처리

이슈 : 노동자 운동

.flex-grid + .title + utilities

<div class="flex-grid">
<a class="flex-grid-item  u-3/12">
  <img/>
  <header class="title  title-one-line">
    <p class="u-h3  u-color-sub">...</p>
    <h1 class="u-h3">...</h1>
  </header>
</a>
</div>
...

배경색 담당 div를 뺐기 때문에 작동하는 코드는 아닙니다.

재사용

지난 호 목록

객체의 범위는
어떻게 정해야 할까?

  • 제한된 역할을 담당하는
  • 관련된 코드들을
  • 재사용을 염두에 두고
  • 추상화해 묶는다

목적은 생산성

예외

예외

에디터가 생산한 코드
.content h2

예외

선택자에 개입하지
못하는 라이브러리

예외라기보단...

모든 것을 모듈화해
재사용해야 하는가?

헤더, 푸터, 콘텐츠 영역, 로고...

# 목적을 되새기자 오용 방지

오용1. Sniping Type에서 Snake Type으로...

CSS에 문서 구조를 담는 것은
목적이 아니다

#article-footer .issue ul a.more

.article-footer_issue_ul_a_more

오용2

.mt10 .mt20 .mt30 .mt40 .mt50 .mt60 .mr10 .mr20 .mr30 .mr40 .mr50 .mr60 .f10 .f11 .f12 .f13 .f14 .f15 .f16 .f17 .f18 .f19 .f20 .ffnanum

더 배우기

  • Sass, Less 같은 전처리기
  • BEM 같은 작명 기법
  • CSS 프레임워크

전처리기 Preprocessor의 이점

파일을 나눌 수 있다 일부만 빼서 새 CSS 만들 수 있다 - 원 소스 멀티 유즈

+ minify, 변수, 함수, 확장, 재사용성

## CSS 방법론 - [CSS Wizardry](http://csswizardry.com) - [Stubbornella](http://www.stubbornella.org/) - [SMACSS](https://smacss.com/)([번역서](http://www.aladin.co.kr/shop/wproduct.aspx?ItemId=75606071)) - [Smashing Magazine](https://www.smashingmagazine.com/tag/css/)

원칙에 기반해
사람과 토론한다

더 이야기하고 싶다면...

  • http://mytory.net
  • mail@mytory.net