なんでCSSすぐ死んでしまうん

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

なんでCSS
すぐ死んでしまうん
Frontrend in Kanazawa
https://www.flickr.com/photos/tveskov/3387394098

@pocotan001
Hayato Mizuno

@大阪
http://peatix.com/event/55901

BIG CSS
https://www.youtube.com/watch?v=R-BX4N8egEc
https://www.flickr.com/photos/nickpiggott/5212359135

“CSSはその単純さゆえに、
大規模な実装では管理が難しい。
BIG CSS
“CSS, for all its simplicity, is a difficult language to manage in
large-scale ...

簡単なシンタックス ≠ 簡単な言語
! 異なるバージョンとブラウザベンダーへの依存
! ネームスペースの問題
! 紳士協定だけでルBIG ールをCSS
制限する難しさ
! …
https://www.youtube.com/watc...

http://p.twipple.jp/qk9sw

http://p.twipple.jp/qk9sw
div {
background: pink;
}

望ましい設計のゴール
https://www.flickr.com/photos/nickpiggott/5212959770/in/photostream/

メンテナンス
60%
開発
40%
http://d.hatena.ne.jp/asakichy/20120420/1334872770

メンテナンス
60%
開発
40%
要件変更
60%
移行
23%
バグ修正
17%
http://d.hatena.ne.jp/asakichy/20120420/1334872770

メンテナンス
60%
開発
40%
コードを
理解する時間
30%
http://d.hatena.ne.jp/asakichy/20120420/1334872770

良いCSS設計のゴール
メンテナンス
60%
開発
40%
コードを
理解する時間
30%
http://article.enja.io/articles/css-architecture.html
http://d.hate...

http://goo.gl/OnnMm

http://goo.gl/OnnMm
設計はルーズなプロセスである
! 問題を解決することで新たな問題を生む
! うまくいくかどうかは試してみないとわからない
! 要件が変われば設計も変わる（かもしれない）

メソドロジーとルール
https://www.flickr.com/photos/bdesham/2432400623

“我々はページをデザインしているの
ではない、コンポーネントのシステ
ムをデザインしているのだ。
“We're not designing pages, we're designing systems of components. ”
...

http://styletil.es/

http://sparkbox.github.io/style-prototype/

http://medialoot.com/item/free-flat-ui-design-kit/

http://getbootstrap.com/

https://www.polymer-project.org/

https://www.flihctktpr.c:/o/cmo/dpehpoetons.io/la/peoncuolfetaann0/50914/f3u1ll/3E2tq2r9c6/

<paper-button label="button">
</paper-button>
!
<paper-button label="button"
raisedButton>
</paper-button>
https://w...

<paper-button label="button">
</paper-button>
!
<paper-button label="button"
raisedButton>
</paper-button>
Visual No...

https:/h/wttwpsw:/./flwicwkrw.c.opmol/ypmheort-opsr/olajeecnt.uolfrega/nto/o5l9s4/d3e1s3ig2n2e9r6/

https://www.flickr.com/photohst/tlape:/n/cuulfesatonm/5e9le4m31e3n2ts2.9io6/

http://www.bestpsdfreebies.com/freebie/appz-psd-theme/

再利用可能な
チャンクに分離する
- OOCSS -
https://github.com/stubbornella/oocss/wiki

.button { ... }
!
.panel { ... }

付加要素は
Modifierで拡張する

HTML
<a class="button">Download</a>
CSS
.button { ... }
!

HTML
<a class="button">Download</a>
CSS
.button { ... }
.button-raised {
box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
} ...

HTML
<a class="button button-raised">Download</a>
CSS
.button { ... }
.button-raised {
box-shadow: 0 1px 1px rgba(0, ...

HTML
<a class="button button-large">Download</a>
CSS
.button { ... }
.button-raised {
box-shadow: 0 1px 1px rgba(0, 0...

.panel { ... }

.panel { ... }
!
.panel-colored { ... }

.panel { ... }
!
.panel-colored { ... }
ステートルール
- SMACSS -
https://smacss.com/book/type-state

.panel { ... }
!
.panel-colored { ... }

.panel { ... }
!
/* States */
.is-panel-active { ... }

.panel { ... }
!
/* States */
.panel.is-active { ... }

.panel { ... }
!
/* States */
.panel:hover,
.panel.is-active { ... }

再利用しない
ユニークな部分は？

プロジェクトレイヤー
- MCSS -
http://operatino.github.io/MCSS/ja/

.tagline { ... }

.tagline { ... }
!
.tagline .button { ... }

プロジェクトレイヤー
- FLOCSS -
https://github.com/hiloki/flocss

.p-tagline { ... }
!
.p-tagline .c-button { ... }

関心を分離せよ
https://www.flickr.com/photos/clement127/9761836954

シナリオを立て
汎用さに対応する

<a class="button">Download</a>

<a class="button">Download</a>
!
<button class="button">Download</button>

<a class="button">Download</a>
!
<button class="button">Download</button>
!
<span class="button">Download</span>

.button {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 12px 26px;
border: none;
backg...

.button {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 12px 26px;
border: none;
backg...

.button {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 12px 26px;
border: none;
backg...

.button {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 12px 26px;
border: none;
backg...

スタイルとJSの
フックを分離する

HTML
<div class="panel"></div>
JS
$('.panel').on('click' ...);

HTML
<div class="panel js-ui-featured"></div>
JS
$('.js-ui-featured').on('click' ...);

AngularJS
https://angularjs.org/

<div class="panel" ng-click="...">
</div>

コンポーネント同士の
関係を疎にする

.panel { ... }
!
.panel .heading { ... }

.panel { ... }
!
.heading { ... }

.panel { ... }
!
.heading 関{ 連...す }る要素として
捉えるなら
サブコンポーネント
として定義する

.panel { ... }
!
.panel-heading { ... }

.panel { ... }
!
.panel-heading { ... }
もしくは命名で
どのようなルールが
適用されるかを伝える

http://getbootstrap.com/

http://getbootstrap.com/
Button groups

<Bduivtt oclna sgsr=o"butpn-sg:roup">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button cla...

レイアウトを
分離する
- SMACSS -
https://smacss.com/book/type-state

.panel {
float: left;
box-sizing: border-box;
margin-right: 20px;
padding: 20px;
width: 220px;
background: #fff;
}

.panel {
float: left;
box-sizing: border-box;
margin-right: 20px;
padding: 20px;
width: 220px;
background: #fff;
}

.l-featured .panel {
float: left;
margin-right: 20px;
width: 220px;
}

.l-featured .panel {
float: left;
margin-right: 20px;
width: 220px;
} ユーティリティで
対応する
- SUIT CSS -
https://github.com...

.u-float-left {
float: left;
}
!
.u-margin-r-m {
margin-right: 20px;
}
!
...

.u-float-left {
float: left;
}
!
.u-margin-r-m {
margin-right: 20px;
}
!
...
グリッドシステム
を活用する
- Kite -
http://hi...

<div class="kite kite--grid has-gutter">
<div class="panel kite__item is-3of12">
...
</div>
<div class="panel kite__it...

http://hiloki.github.io/kitecss/

命名のルール
https://www.flickr.com/photos/bfishadow/3634061465

https://bem.info/

https://bem.info/
block
block_modifier
block__element
block__element_modifier

http://article.enja.io/articles/about-html-semantics-and-front-end-architecture.html

component
component--modifier
component__subcomponent
component__subcomponent--modifier
http://article.enja.io/article...

https://github.com/hiloki/flocss

c-component
c-component—modifier
c-component__subcomponent
c-component__subcomponent—modifier
https://github.com/hilok...

.button { ... }
!
.button-raised { ... }
!
.button-large { ... }

.button { ... }
!
.button—-raised { ... }
!
.button—-large { ... }

.panel { ... }
!
.panel-heading { ... }

$.panel { ... } ! .panel__heading { ... }$

https://github.com/bjankord/CSS-Components-Modifiers-And-Subcomponents-Collection

スタイルガイドドリブン開発
http://webuild.envato.com/blog/styleguide-driven-development/
https://www.flickr.com/photos/tveskov/555062...

http://kaleistyleguide.com/

http://kaleistyleguide.com/
シナリオを
可視化する

生きたスタイルガイド
を持ち込む

https://www.flickr.com/photos/dex1138/7002850433
Code Smells
http://article.enja.io/articles/code-smells-in-css.html

スタイルの取り消し

.button {
box-sizing: border-box;
padding: 12px 26px;
text-align: center;
}
!
.button—-no-padding {
スタイルの取り消し
padd...

.button {
box-sizing: border-box;
padding: 12px 26px;
text-align: center;
}
!
.button—-no-padding {
スタイルの取り消し
padd...

.button {
box-sizing: border-box;
text-align: center;
}
!
.button—-large {
スタイルの取り消し
padding: 12px 26px;
}

マジックナンバー

マジックナンバー
.bubble {
position: absolute;
top: -57px;
left: 0;
...
}

マジックナンバー
.bubble {
position: absolute;
top: -57px;
left: 0;
...
}

マジックナンバー
.bubble {
position: absolute;
bottom: 100%;
left: 0;
...
}

受動的な詳細度

#main .button {
margin: 20px !important;
width: 100% !important;
受動的な詳細度
}

#main .button {
margin: 20px !important;
width: 100% !important;
受動的な詳細度
}

.u-margin-m {
margin: 20px !important;
}
!
.button--full {
受動的な詳細度
width: 100%;
}

競合する要素に優先順位を
! ピクセルパーフェクト or フレキシブル
! すぐに稼働するコード or 美しいコード
競合する要素に優先順位を
! DRY or 保守性
! 正しさ or 一貫性
! 汎用性 or シンプルさ

https://github.com/pocotan001/ptan-no-css

https://github.com/pocotan001/ptan-no-css
! ベースはFLOCSSを採用
! 例外としてコンポーネントはプリフィックスなし
! ユーティリティのみ略語を許容
! CSSプリプロセッサーはなし
...

Designer ♥ Developer
http://www.flickr.com/photos/fallentomato/11768159726

“壊れない完璧な設計を求めるのでは
なく、壊れたときに勇気を持って修
復できる設計を。
- cssradar

THANK YOU
https://www.flickr.com/photos/tveskov/3387394098

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読み... by Horiguchi Seito 61529 views
大規模サイトにおける本当は怖いCSSの話 by 井上誠 117068 views
2016年版フロントエンド開発フォーマット by Kenya Kodaira 38960 views
ヒューマンリーダブルな CSS 記述法（異次元編）：2016年5月13... by Yoshiki Hayama 19063 views
メンテナブルでありつづけるためのCSS設計 by 拓樹谷 37354 views
ブラウザにやさしいHTML/CSS by Takeharu Igari 71681 views

View on Slideshare

1 of 130 Ad

View on Slideshare

1 of 130 Ad