新 しいマークアップ 環 境 に キャッチアップ! 2013.12.14 CSS Nite LP, Disk 31:Shift7 益 子 貴 寛 小 山 田 晃 浩
益 子 貴 寛 Twitter: @takahiromashiko 株 式 会 社 サイバーガーデン なんでも 知 っておかないとマズい ディレクター という 立 ち 位 置
小 山 田 晃 浩 Twitter: @yomotsu 株 式 会 社 ピクセルグリッド バリバリの フロントエンドエンジニア という 立 ち 位 置
コンビ3 年 目 これまでの 内 容 は 当 たったのか!?
2011 12 13 2011 12 13
2011 12 13 2011 12 13
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20
1,700 DOCTYPE
HTML5 9.4% 59.4%
CSS Preprocessor
CSS3
Sass
CSS Nite LP, Disk32 Sass3.3
コンテンツのパーツ 化
OOCSS, SMACSS, BEM and others
BEM?
Block Block Block Block Block
Block Block Block Block Block
Element Element Element Element Element Element
modifier
Element Element
Element Element Element Element Element Element Element Element
modifier modifier
Class
<div class="pagination"> <div class="pagination prev"> 前 </div> <ul class="pagination list"> <li class="pagination item">1</li> <li class="pagination item">2</li> <li class="pagination item">3</li> </ul> <div class="pagination next"> 次 </div> </div>
<div class="pagination"> <div class="pagination prev"> 前 </div> <ul class="pagination list"> <li class="pagination item">1</li> <li class="pagination item">2</li> <li class="pagination item">3</li> </ul> <div class="pagination next"> 次 </div> </div>
<div class="pagination"> <div class="pagination prev pagination prev_disable_true"> 前 </div> <ul class="pagination list"> <li class="pagination item pagination item_current_true">1</li> <li class="pagination item">2</li> <li class="pagination item">3</li> </ul> <div class="pagination next"> 次 </div> </div>
Block Element modifier pagination item_current_true
Block Element modifier pagination item_current_true property value
MindBeming
mod-gallery-image--current
スタイルガイド
Starbucks
http://www.starbucks.com/static/ reference/styleguide/
http://www.starbucks.com/static/ reference/styleguide/
GitHub
https://github.com/styleguide/css/5.0
https://github.com/styleguide/css/5.0
CSSフレームワーク
bootstrap.less // Core variables and mixins @import "variables.less"; @import "mixins.less"; // Reset @import "normalize.less"; // @import "print.less"; // Core CSS @import "scaffolding.less"; @import "type.less"; @import "code.less"; @import "grid.less"; // @import "tables.less"; // @import "forms.less"; @import "buttons.less";
CSS
ビルドタスクはGruntが 主 流 に
進 化 を 続 けるInternet Explorer
10 17 IE11
WebKitと 決 別 したChrome
Chrome Blink
ますます 存 在 感 を 失 うOpera
Opera15 Chromium
まとめ
CSS Preprocessor