益 子 貴 寛 株 式 会 社 サイバーガーデン なんでも 知 っておかないとマズい ディレクター という 立 ち 位 置

新 しいマークアップ 環 境 に キャッチアップ! 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