ちゃんとCSSを書くために - CSS/Sass設計の話

A GOOD CSS AND SASS ARCHITECTURE
ARCHITECTURE
A GOOD CSS AND SASS
FOR MUCH BETTER CODING
Talknote Vol.8 / Frontrend

A GOOD CSS AND SASS ARCHITECTUREA GOOD CSS AND SASS ARCHITECTURE
@hiloki

@hiloki
@ahomu
@t32k

DESKTOP APP MOBILE APP / WEB MOBILE APP

ARCHITECTURE
A GOOD CSS AND SASS

CSS

CSS
ちゃんと設計しろ！
Chanto Sekkei Siro!

CSS HTML

CSS HTML JavaScript

#header .applyButton {
border-radius: 4px;
padding: 10px 0;
width: 360px;
text-align: center;
font-size: 16px;
background-color: rgb(255,169,0);
color: #FFFFFF;
}

#sidebar .applyButton {
border-radius: 4px;
padding: 6px 0; // for #sidebar
width: 200px; // for #sidebar
text-align: center;
font-size: 16px;
color: #FFFFFF;
}

.applyButton {
border-radius: 4px;
text-align: center;
font-size: 16px;
color: #FFFFFF;
}
padding: 10px 0;
width: 360px;
}
padding: 6px 0;
width: 200px;
}

.applyButton {
border-radius: 4px;
text-align: center;
font-size: 16px;
color: #FFFFFF;
}
#content .applyButton {
padding: 12px 0;
width: 500px;
font-size: 24px;
}

.applyButton {
border-radius: 4px;
text-align: center;
font-size: 16px;
color: #FFFFFF;
}
padding: 12px 0;
width: 500px;
font-size: 24px;
}
#content .cource .applyButton { // = #sidebar
padding: 6px 0;
width: 200px;
font-size: 16px; // Default font-size
}

CSSは、簡単に書ける

CSSは、簡単に書ける
冗長に、それらしく

そのCSSには、問題がない

あなたにとって

そのCSSには、問題がない?
後任者にとって

問題がある
後任者にとって

明後日の自分にも
問題がある

.applyButton {
border-radius: 4px;
text-align: center;
font-size: 16px;
color: #FFFFFF;
}
padding: 10px 0;
width: 360px;
}
padding: 6px 0;
width: 200px;
}
padding: 12px 0;
width: 500px;
font-size: 24px;
}
#content .cource .applyButton {
padding: 6px 0;
width: 200px;
font-size: 16px;
}
#content .teacher .applyButton {
width: 160px;
}

.applyButton {
border-radius: 4px;
text-align: center;
font-size: 16px;
color: #FFFFFF;
}
padding: 10px 0;
width: 360px;
}
padding: 6px 0;
width: 200px;
}
padding: 12px 0;
width: 500px;
font-size: 24px;
}
#content .cource .applyButton {
padding: 6px 0;
width: 200px;
font-size: 16px;
}
#content .teacher .applyButton {
width: 160px;
}
body.home #content .applyButton {
...
}
#content .cource #mizuno .name,
#content .cource #satou .name,
#content .cource #hiraki .name,
#content .cource #tani .name {
...
}

⌘ + A , DELETE

.btn {
border-radius: 4px;
text-align: center;
}
.btn-primary {
color: #FFFFFF;
}
.btn-small {
padding: 6px 0;
width: 200px;
}
.btn-medium {
padding: 10px 0;
width: 360px;
}
.btn-large {
padding: 12px 0;
width: 500px;
font-size: 24px;
}

<a href="#" class="btn btn-primary btn-medium">
講座申し込み
</a>

<a href="#" class="btn btn-primary btn-small">
講座申し込み
</a>

<a href="#" class="btn btn-primary btn-large">
今すぐ講座に座申し込む
</a>

ARCHITECTURE
A GOOD CSS
AND SASS

CSS Architecture
http://philipwalton.com/articles/css-architecture/

PREDICTABLE
予測しやすい

REUSABLE
再利用しやすい

MAINTAINABLE
保守しやすい

SCALABLE
拡張しやすい

PREDICTABLE 予測しやすい
REUSABLE 再利用しやすい
MAINTAINABLE 保守しやすい
SCALABLE 拡張しやすい

ARCHITECTUREFOR MUCH BETTER CODING
AND SASSA BAD CSS

.widget {
background: yellow;
border: 1px solid black;
color: black;
width: 50%;
}
#sidebar .widget {
width: 200px;
}
body.homepage .widget {
background: white;
}

#main-nav ul li ul { }
#content article h1:first-child { }
#sidebar > div > h3 + p { }

.widget {
position: absolute;
top: 20px;
left: 20px;
background-color: red;
font-size: 1.5em;
text-transform: uppercase;
}

.widget {}
.widget .title {}
.widget .content {}
.widget .action {}

<div class="widget">
<h3 class="title">...</h3>
<div class="content">
Lorem ipsum dolor sit amet,
adipiscing elit.
In condimentum justo et est dapibus sit
amet euismod ligula ornare.
Vivamus elementum accumsan dignissim.
<button class="action">Click Me!</button>
</div>
</div>

.widget .title {
background-color: green;
color: #FFFFFF;
}
.widget .title

.title {
border-left: 10px solid black;
padding: 5px 10px;
font-size: 24px;
}
.title

.widget .title {
color: #FFFFFF;
}
.title {
padding: 5px 10px;
font-size: 24px;
}
.widget .title

MODULAR
モジュール

Nicole Sullivan - OOCSS
https://github.com/stubbornella/oocss

Jonathan Snook - SMACSS
http://smacss.com/

DE-COUPLING
疎結合
NAME CONVENTION
命名規則

DE-COUPLING
装飾構造
コンテンツコンテナー
HTML CSS

/* Bad */
.widget { }
#sidebar .widget { }
/* Good */
.widget { }
.widget-sidebar { }

<div id="sidebar">
<div class="widget widget-sidebar">
<p>Widget</p>
</div>
</div>
<div id="rightColumn">
<div class="widget widget-sidebar">
<p>Widget</p>
</div>
</div>

/* Grenade */
#main-nav ul li ul { }
/* Sniper Rifle */
.subnav { }

<div id="main">
<ul>
<li>
<a href="#">First</a>
<ul class="subnav">
<li><a href="#">Second</a></li>
</ul>
</li>
</ul>
</div>

.widget {
background-color: red;
font-size: 1.5em;
text-transform: uppercase;
}
.widget-positioned {
position: absolute;
top: 20px;
left: 20px;
}

/* High risk */
.widget { }
.widget .title { }
/* Low risk */
.widget { }
.widget-title { }

<div class="widget">
<h3 class="widget-title">...</h3>
<div class="widget-content">
Lorem ipsum dolor sit amet,
adipiscing elit.
In condimentum justo et est dapibus sit
amet euismod ligula ornare.
Vivamus elementum accumsan dignissim.
<button class="widget-action">Click Me!</
button>
</div>
</div>

.widget-title {
color: #FFFFFF;
}
.title {
padding: 5px 10px;
font-size: 24px;
}
.widget-title
.title

.widget { }

.widget { }
.widget-sidebar { }
.widget-title { }

.widget { } .widget
.widget-sidebar
.widget
.widget-title
.widget-sidebar { }
.widget-title { }

.widget { } .widget
.widget-sidebar
.widget
.widget-title
.widget-sidebar { }
.widget-title { }
Modifier
Sub-Component

.widget-sidebar { }
.widget { }

.widget-sidebar { }
.widget { }
Modifier OR Sub-Component ?

.widget-sidebar { }
.widget { }
Modifier OR Sub-Component ?
.widget-sidebar .widget
.widget-sidebar

Yandex - BEM
http://bem.info/

Block Element Modifier

.block__element_modifier {}
the BEM SYSTEM

Influenced by the BEM SYSTEM
.component-name--modifier {}
.component-name__sub-component {}
Nicolas Gallagher - About HTML semantics and front-end architecture
http://nicolasgallagher.com/about-html-semantics-front-end-architecture
http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/

/* Modifier */
.widget--sidebar { }
/* Sub-Component */
.widget__title { }

“
class名が決まれば
我々の仕事の
90%は終わったも同然
@CSS Radar
http://twitter.com/cssradar

$ sudo gem install sass
$ sass --watch style:scss:style.css --style expanded

.nav-breadcrumb {
> li {
display: inline;
& + li:before {
display: inline;
content: ">";
}
> a {
color: inherit;
}
}
}
Sass

.nav-breadcrumb > li {
display: inline;
}
.nav-breadcrumb > li + li:before {
display: inline;
content: ">";
}
.nav-breadcrumb > li > a {
color: inherit;
}
CSS

$containerSize: 960px;
$brandColor: #00CC11;
$subColor: #CC9988;
.keyvisual {
$pad: 10px;
padding: $pad;
width: $containerSize - $pad * 2;
}
Sass

.keyvisual {
padding: 10px;
width: 940px;
}
CSS

// master.scss
@import "resets"; // _resets.scss
@import "settings"; // _settings.scss
@import "common"; // _common.scss
Sass

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, ...
/*
# COMMON
*/
html, body {
background: url(bg.png);
font-size: 14px;
}
...
CSS

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
Sass

.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
CSS

body.application {
#content {
width: 100%;
.form-basic {
dt {
float: left;
margin-bottom: 0.5em;
width: 20%;
span {
display: block;
}
}
dd {
width: 80%;
}
}
.form-options {
dt {
display: block;
span {
margin-left: 0.2em;
}
}
dd {
}
}
}
#sidebar {
display: none;
}
}
Sass

body.application #content {
width: 100%;
}
body.application #content .form-basic dt {
float: left;
width: 20%;
}
body.application #content .form-basic dt span {
display: block;
}
body.application #content .form-basic dd {
width: 80%;
}
body.application #content .form-options dt {
display: block;
}
body.application #content .form-options dt span {
margin-left: 0.2em;
}
body.application #content .form-options dd {
}
body.application #sidebar {
display: none;
}
CSS

.css.scss

@extend

.plane {
box-shadow: 0 2px 5px rgba(#000,.1);
border-radius: 5px;
}
.box {
@extend .plane;
background-color: #FFF;
}
.box-alert {
@extend .plane;
background-color: #FCC;
}
Sass

.plane, .box, .box-alert {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.box {
}
.box-alert {
}
CSS

%plane {
box-shadow: 0 2px 5px rgba(#000,.1);
border-radius: 5px;
}
.box {
@extend %plane;
}
.box-alert {
@extend %plane;
}
Sass

.box, .box-alert {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.box {
}
.box-alert {
}
CSS

.pic {
display: inline-block;
vertical-align: top;
}
.pic-cutout {
border-radius: 50%;
}
.pic-photo {
border: 4px solid #FFF;
box-shadow: 2px 2px 3px #333;;
}
CSS

<img src="author.jpg" class="pic pic-cutout"
alt="Hiroki Tani">

<img src="post.jpg" class="pic pic-photo"
alt="ノーベルアイス">

%pic {
}
%pic-cutout {
border-radius: 50%;
}
%pic-photo {
border: 4px solid #FFF;
}
.my-avatar {
@extend %pic;
@extend %pic-cutout;
}
.post-photo {
@extend %pic;
@extend %pic-photo;
}
Sass

.my-avatar, .post-photo {
}
.my-avatar {
border-radius: 50%;
}
.post-photo {
border: 4px solid white;
box-shadow: 2px 2px 3px #333333;
}
CSS

<img src="author.jpg" class="my-avatar"
alt="Hiroki Tani">

<img src="post.jpg" class="post-photo"
alt="ノーベルアイス">

%pic { }
%pic-cutout { }
%pic-photo { }
.my-avatar {
@extend %pic;
@extend %pic-cutout;
}
.post-photo {
@extend %pic;
@extend %pic-photo;
}
.friend-avatar {
@extend .pic;
@extend .pic-cutout;
}
Sass

.my-avatar, .post-photo, .friend-avatar {
}
.my-avatar, .friend-avatar {
border-radius: 50%;
}
.post-photo {
border: 4px solid white;
}
.friend-avatar {
}
CSS

<img src="author.jpg" class="my-avatar" alt="Hiroki
Tani">

<img src="post.jpg" class="post-photo" alt="ノーベルアイ
ス">

<img src="likers01.jpg" class="friend-avatar"
alt="Satoru Hiraki">
<img src="likers02.jpg" class="friend-avatar"
alt="Hayato Mizuno">
<img src="likers02.jpg" class="friend-avatar" alt="Ayumu
Sato">

Sass.btn_type2_A {
@extend .clearfix;
}
.bnavi ul {
@extend .clearfix;
}
.box_3col {
@extend .clearfix;
}
.userData {
@extend .clearfix;
}
.myData {
@extend .clearfix;
}
.ul#popup_message {
@extend .clearfix;
}

.clearfix:after,.btn_type2_A:after,.bnavi
ul:after,.box_3col:after,.userData
dl:after,.likeTool:after,.likeUser ul:after,.commentUser
ul:after,.userData:after,.circleList li
a:after,.time_count:after,.paging
ul:after,.myData:after,.status:after,.bar:after,.month:after,.mo
nth2:after,.about:after,.sort:after,.mainList
ul:after,.mainList2 li
ul:after,.bnr_2col:after,.likeTool_lp:after,.flow:after,.radio:a
fter,.btn_entry_2col:after,.sort2:after,ul#popup_message:after,.
sort3:after,.f_circleList:after,.f_circleList a:after,.mainList3
dl:after,.mainList3 ul:after,.box_2col:after,.frame_desc
dl:after {
content: "";
display: block;
clear: both;
height: 0;
}
CSS

セマンティック = コンテンツ派生？

“
Nicolas Gallagher - About HTML semantics and front-end architecture
http://nicolasgallagher.com/about-html-semantics-front-end-architecture
http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
どんな名前が使われようと
意味があり目的がある。
Not all semantics need to be content-derived. Class names cannot be
“unsemantic”. Whatever names are being used: they have meaning, they
have purpose.

不要な子孫セレクタを減らす
タグ+ID,クラスセレクタを無くす
カテゴリに分類する
HTMLに構造に依存したセレクタを見直す
再利用しやすいクラスセレクタに置き換える
繰り返すルールセットをモジュールにする
プロパティの継承を利用する
不要な!importantを減らす
プロパティの順番をそろえる

div.header ul.list {}
.widget ul li a {}

div.header ul.list {}
.widget ul li a {}
.header .list {}
.widget li > a {}

BASE
MODULE
LAYOUT
STATE
THEME

BASE
html,body,p,ul,li....

LAYOUT
.l-header,.l-footer,.grid...

MODULE
.btn,.nav,.msg...

STATE
.is-hidden,.is-error,.is-selected

THEME
.theme-spring.theme-special...

/* %BASE ==================== */
html,body {...}
/* %LAYOUT ==================== */
.l-header {...}
.l-footer {...}
/* %MODULE ==================== */
.btn {...}
.msg {...}
/* %STATE ==================== */
.is-hidden {...}
.is-error {...}
/* %THEME ==================== */
.theme-spring {...}
.theme-summer {...}

// master.scss
// Base
@import "base"; // _base.scss
// Layout
@import "layout"// _layout.scss
// Module
@import "module"; // _module.scss
// State
@import "state"; // _state.scss
// Theme
@import "theme"; // _theme.scss

sass/
_base.scss
_layout.scss
_module.scss
_state.scss
_theme.scss
master.scss

sass/
_base.scss
_layout.scss
module/
_state.scss
_theme.scss
master.scss
_navigation.scss
_message.scss
_button.scss

// master.scss
// Base
@import "base";
// Layout
@import "layout"
// Module
@import "module/button";
@import "module/navigation";
@import "module/message";
// State
@import "state";
// Theme
@import "theme";

“
時期尚早な最適化は
すべての悪の根源である
Programmers waste enormous amounts of time thinking about, or
worrying about, the speed of noncritical parts of their programs, and
these attempts at efficiency actually have a strong negative impact when
debugging and maintenance are considered. We should forget about
small efficiencies, say about 97% of the time: premature optimization is
the root of all evil. Yet we should not pass up our opportunities in that
critical 3%.
Donald E, Knuth - Structured Programming With Go To Statements
http://pplab.snu.ac.kr/courses/adv_pl05/papers/p261-knuth.pdf

Refactoring: Improving the Design of Existing Code
http://www.amazon.com/dp/0201485672/

3, 6, 9, 12, 15

3, 6, 12, 24, 48

Starbucks Coffee - Style Guide
http://www.starbucks.com/static/reference/styleguide/

Pears
http://pea.rs/

BBC - GEL (Global Experience Language)
http://www.bbc.co.uk/gel

StyleDocco
http://jacobrask.github.io/styledocco/

ステキなCSSスタイルガイドを生成する｢styleDocco｣の導
入とgrunt.jsでの自動化のメモ
http://mnemoniqs.com/web/styledocco/
StyleDoccoによるCSSスタイルガイドの導入
http://ameblo.jp/ca-1pixel/entry-11453624925.html

THANK YOU!
twitter.com/hiloki
github.com/hiloki
inkdesign.jp

CREDIT
http://www.flickr.com/photos/26026745@N00/5378467111/
http://www.flickr.com/photos/bdesham/2432400623/
http://www.flickr.com/photos/franksvalli/7572634222/
http://www.flickr.com/photos/franksvalli/5173283924/
http://www.flickr.com/photos/darice/8526800143/
http://www.flickr.com/photos/hfiguiere/4802869688/

ちゃんとCSSを書くために - CSS/Sass設計の話

More Related Content

Viewers also liked

More from 拓樹 谷

Recently uploaded

ちゃんとCSSを書くために - CSS/Sass設計の話

More from 拓樹谷