• Save
ちゃんとCSSを書くために - CSS/Sass設計の話
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 28,581 views

TalkNote Vol.8 発表スライド ...

TalkNote Vol.8 発表スライド

2013/06/30 追記:
本スライドで紹介しているSMACSS日本語訳(電子書籍)が発売されたので、興味のある方はご覧ください。
SMACSS
https://smacss.com/

Statistics

Views

Total Views
28,581
Views on SlideShare
25,897
Embed Views
2,684

Actions

Likes
241
Downloads
74
Comments
0

16 Embeds 2,684

http://bikkuri.me 1755
http://tsunami.asp 265
https://twitter.com 187
http://inkdesign.jp 179
http://hyg-de-haizi.com 166
http://sinka.gob.jp 53
http://www22041ue.sakura.ne.jp 37
http://tweetedtimes.com 14
http://kaorunnpa.wordpress.com 8
http://localhost 6
http://s.deeeki.com 5
https://www.chatwork.com 5
http://sharedclips.wordpress.com 1
https://kcw.kddi.ne.jp 1
http://b.hatena.ne.jp 1
http://frontrend.github.io 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • A GOOD CSS AND SASS ARCHITECTUREARCHITECTUREA GOOD CSS AND SASSFOR MUCH BETTER CODINGTalknote Vol.8 / Frontrend
  • A GOOD CSS AND SASS ARCHITECTUREA GOOD CSS AND SASS ARCHITECTURE@hiloki
  • A GOOD CSS AND SASS ARCHITECTURE@hiloki@ahomu@t32k
  • A GOOD CSS AND SASS ARCHITECTUREDESKTOP APP MOBILE APP / WEB MOBILE APP
  • A GOOD CSS AND SASS ARCHITECTUREARCHITECTUREA GOOD CSS AND SASSFOR MUCH BETTER CODING
  • A GOOD CSS AND SASS ARCHITECTURECSS
  • A GOOD CSS AND SASS ARCHITECTURECSSちゃんと設計しろ!Chanto Sekkei Siro!
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURECSS
  • A GOOD CSS AND SASS ARCHITECTURECSS HTML
  • A GOOD CSS AND SASS ARCHITECTURECSS HTML JavaScript
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURE#header .applyButton {border-radius: 4px;padding: 10px 0;width: 360px;text-align: center;font-size: 16px;background-color: rgb(255,169,0);color: #FFFFFF;}
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURE#sidebar .applyButton {border-radius: 4px;padding: 6px 0; // for #sidebarwidth: 200px; // for #sidebartext-align: center;font-size: 16px;background-color: rgb(255,169,0);color: #FFFFFF;}
  • A GOOD CSS AND SASS ARCHITECTURE.applyButton {border-radius: 4px;text-align: center;font-size: 16px;background-color: rgb(255,169,0);color: #FFFFFF;}#header .applyButton {padding: 10px 0;width: 360px;}#sidebar .applyButton {padding: 6px 0;width: 200px;}
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURE.applyButton {border-radius: 4px;text-align: center;font-size: 16px;background-color: rgb(255,169,0);color: #FFFFFF;}#content .applyButton {padding: 12px 0;width: 500px;font-size: 24px;}
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURE.applyButton {border-radius: 4px;text-align: center;font-size: 16px;background-color: rgb(255,169,0);color: #FFFFFF;}#content .applyButton {padding: 12px 0;width: 500px;font-size: 24px;}#content .cource .applyButton { // = #sidebarpadding: 6px 0;width: 200px;font-size: 16px; // Default font-size}
  • A GOOD CSS AND SASS ARCHITECTURECSSは、簡単に書ける
  • A GOOD CSS AND SASS ARCHITECTURECSSは、簡単に書ける冗長に、それらしく
  • A GOOD CSS AND SASS ARCHITECTUREそのCSSには、問題がない
  • A GOOD CSS AND SASS ARCHITECTUREあなたにとってそのCSSには、問題がない
  • A GOOD CSS AND SASS ARCHITECTUREそのCSSには、問題がない?後任者にとって
  • A GOOD CSS AND SASS ARCHITECTUREそのCSSには、問題がない問題がある後任者にとって
  • A GOOD CSS AND SASS ARCHITECTUREそのCSSには、問題がない明後日の自分にも問題がある
  • A GOOD CSS AND SASS ARCHITECTURE.applyButton {border-radius: 4px;text-align: center;font-size: 16px;background-color: rgb(255,169,0);color: #FFFFFF;}#header .applyButton {padding: 10px 0;width: 360px;}#sidebar .applyButton {padding: 6px 0;width: 200px;}#content .applyButton {padding: 12px 0;width: 500px;font-size: 24px;}#content .cource .applyButton {padding: 6px 0;width: 200px;font-size: 16px;}#content .teacher .applyButton {width: 160px;}
  • A GOOD CSS AND SASS ARCHITECTURE.applyButton {border-radius: 4px;text-align: center;font-size: 16px;background-color: rgb(255,169,0);color: #FFFFFF;}#header .applyButton {padding: 10px 0;width: 360px;}#sidebar .applyButton {padding: 6px 0;width: 200px;}#content .applyButton {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 GOOD CSS AND SASS ARCHITECTURE⌘ + A , DELETE
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURE.btn {border-radius: 4px;text-align: center;}.btn-primary {background-color: rgb(255,169,0);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 GOOD CSS AND SASS ARCHITECTURE<!-- #header --><a href="#" class="btn btn-primary btn-medium">講座申し込み</a><!-- #sidebar, #content > .cource --><a href="#" class="btn btn-primary btn-small">講座申し込み</a><!-- #content --><a href="#" class="btn btn-primary btn-large">今すぐ講座に座申し込む</a>
  • A GOOD CSS AND SASS ARCHITECTUREARCHITECTUREA GOOD CSSFOR MUCH BETTER CODINGAND SASS
  • A GOOD CSS AND SASS ARCHITECTURECSS Architecturehttp://philipwalton.com/articles/css-architecture/
  • A GOOD CSS AND SASS ARCHITECTUREPREDICTABLE予測しやすい
  • A GOOD CSS AND SASS ARCHITECTUREREUSABLE再利用しやすい
  • A GOOD CSS AND SASS ARCHITECTUREMAINTAINABLE保守しやすい
  • A GOOD CSS AND SASS ARCHITECTURESCALABLE拡張しやすい
  • A GOOD CSS AND SASS ARCHITECTUREPREDICTABLE 予測しやすいREUSABLE 再利用しやすいMAINTAINABLE 保守しやすいSCALABLE 拡張しやすい
  • A GOOD CSS AND SASS ARCHITECTUREARCHITECTUREFOR MUCH BETTER CODINGAND SASSA BAD CSS
  • A GOOD CSS AND SASS ARCHITECTURE.widget {background: yellow;border: 1px solid black;color: black;width: 50%;}#sidebar .widget {width: 200px;}body.homepage .widget {background: white;}
  • A GOOD CSS AND SASS ARCHITECTURE#main-nav ul li ul { }#content article h1:first-child { }#sidebar > div > h3 + p { }
  • A GOOD CSS AND SASS ARCHITECTURE.widget {position: absolute;top: 20px;left: 20px;background-color: red;font-size: 1.5em;text-transform: uppercase;}
  • A GOOD CSS AND SASS ARCHITECTURE.widget {}.widget .title {}.widget .content {}.widget .action {}
  • A GOOD CSS AND SASS ARCHITECTURE<div class="widget"><h3 class="title">...</h3><div class="content">Lorem ipsum dolor sit amet,adipiscing elit.In condimentum justo et est dapibus sitamet euismod ligula ornare.Vivamus elementum accumsan dignissim.<button class="action">Click Me!</button></div></div>
  • A GOOD CSS AND SASS ARCHITECTURE.widget .title {background-color: green;color: #FFFFFF;}.widget .title
  • A GOOD CSS AND SASS ARCHITECTURE.title {border-left: 10px solid black;padding: 5px 10px;font-size: 24px;}.title
  • A GOOD CSS AND SASS ARCHITECTURE.widget .title {background-color: green;color: #FFFFFF;}.title {border-left: 10px solid black;padding: 5px 10px;font-size: 24px;}.widget .title
  • A GOOD CSS AND SASS ARCHITECTUREMODULARモジュール
  • A GOOD CSS AND SASS ARCHITECTURENicole Sullivan - OOCSShttps://github.com/stubbornella/oocss
  • A GOOD CSS AND SASS ARCHITECTUREJonathan Snook - SMACSShttp://smacss.com/
  • A GOOD CSS AND SASS ARCHITECTUREJonathan Snook - SMACSShttp://smacss.com/
  • A GOOD CSS AND SASS ARCHITECTUREDE-COUPLING疎結合NAME CONVENTION命名規則
  • A GOOD CSS AND SASS ARCHITECTUREDE-COUPLING装飾 構造コンテンツ コンテナーHTML CSS
  • A GOOD CSS AND SASS ARCHITECTUREARCHITECTUREA GOOD CSSFOR MUCH BETTER CODINGAND SASS
  • A GOOD CSS AND SASS ARCHITECTURE/* Bad */.widget { }#sidebar .widget { }/* Good */.widget { }.widget-sidebar { }
  • A GOOD CSS AND SASS ARCHITECTURE<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>
  • A GOOD CSS AND SASS ARCHITECTURE/* Grenade */#main-nav ul li ul { }/* Sniper Rifle */.subnav { }
  • A GOOD CSS AND SASS ARCHITECTURE<div id="main"><ul><li><a href="#">First</a><ul class="subnav"><li><a href="#">Second</a></li><li><a href="#">Second</a></li><li><a href="#">Second</a></li></ul></li></ul></div>
  • A GOOD CSS AND SASS ARCHITECTURE.widget {background-color: red;font-size: 1.5em;text-transform: uppercase;}.widget-positioned {position: absolute;top: 20px;left: 20px;}
  • A GOOD CSS AND SASS ARCHITECTURE/* High risk */.widget { }.widget .title { }/* Low risk */.widget { }.widget-title { }
  • A GOOD CSS AND SASS ARCHITECTURE<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 sitamet euismod ligula ornare.Vivamus elementum accumsan dignissim.<button class="widget-action">Click Me!</button></div></div>
  • A GOOD CSS AND SASS ARCHITECTURE.widget-title {background-color: green;color: #FFFFFF;}.title {border-left: 10px solid black;padding: 5px 10px;font-size: 24px;}.widget-title.title
  • A GOOD CSS AND SASS ARCHITECTURE.widget { }
  • A GOOD CSS AND SASS ARCHITECTURE.widget { }.widget-sidebar { }.widget-title { }
  • A GOOD CSS AND SASS ARCHITECTURE.widget { } .widget.widget-sidebar.widget.widget-title.widget-sidebar { }.widget-title { }
  • A GOOD CSS AND SASS ARCHITECTURE.widget { } .widget.widget-sidebar.widget.widget-title.widget-sidebar { }.widget-title { }ModifierSub-Component
  • A GOOD CSS AND SASS ARCHITECTURE.widget-sidebar { }.widget { }
  • A GOOD CSS AND SASS ARCHITECTURE.widget-sidebar { }.widget { }Modifier OR Sub-Component ?
  • A GOOD CSS AND SASS ARCHITECTURE.widget-sidebar { }.widget { }Modifier OR Sub-Component ?.widget-sidebar .widget.widget-sidebar
  • A GOOD CSS AND SASS ARCHITECTUREYandex - BEMhttp://bem.info/
  • A GOOD CSS AND SASS ARCHITECTUREBlock Element Modifier
  • A GOOD CSS AND SASS ARCHITECTURE.block__element_modifier {}the BEM SYSTEM
  • A GOOD CSS AND SASS ARCHITECTUREInfluenced by the BEM SYSTEM.component-name--modifier {}.component-name__sub-component {}Nicolas Gallagher - About HTML semantics and front-end architecturehttp://nicolasgallagher.com/about-html-semantics-front-end-architecturehttp://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
  • A GOOD CSS AND SASS ARCHITECTURE/* Modifier */.widget--sidebar { }/* Sub-Component */.widget__title { }
  • A GOOD CSS AND SASS ARCHITECTURE“class名が決まれば我々の仕事の90%は終わったも同然@CSS Radarhttp://twitter.com/cssradar
  • A GOOD CSS AND SASS ARCHITECTUREARCHITECTUREA GOOD CSSFOR MUCH BETTER CODINGAND SASS
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURE$ sudo gem install sass$ sass --watch style:scss:style.css --style expanded
  • A GOOD CSS AND SASS ARCHITECTURE.nav-breadcrumb {> li {display: inline;& + li:before {display: inline;content: ">";}> a {color: inherit;}}}Sass
  • A GOOD CSS AND SASS ARCHITECTURE.nav-breadcrumb > li {display: inline;}.nav-breadcrumb > li + li:before {display: inline;content: ">";}.nav-breadcrumb > li > a {color: inherit;}CSS
  • A GOOD CSS AND SASS ARCHITECTURE$containerSize: 960px;$brandColor: #00CC11;$subColor: #CC9988;.keyvisual {$pad: 10px;padding: $pad;width: $containerSize - $pad * 2;}Sass
  • A GOOD CSS AND SASS ARCHITECTURE.keyvisual {padding: 10px;width: 940px;}CSS
  • A GOOD CSS AND SASS ARCHITECTURE// master.scss@import "resets"; // _resets.scss@import "settings"; // _settings.scss@import "common"; // _common.scssSass
  • A GOOD CSS AND SASS ARCHITECTURE/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126License: none (public domain)*/html, body, div, span, applet, object, iframe, .../*# COMMON*/html, body {background: url(bg.png);font-size: 14px;}...CSS
  • A GOOD CSS AND SASS ARCHITECTURE@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}.box { @include border-radius(10px);}Sass
  • A GOOD CSS AND SASS ARCHITECTURE.box {-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}CSS
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTUREbody.application { #content { width: 100%; .form-basic { dt { float: left; margin-bottom: 0.5em; width: 20%; span { display: block; } } dd { margin-bottom: 0.5em; width: 80%; } } .form-options { dt { display: block; margin-bottom: 0.5em; span { margin-left: 0.2em; } } dd { margin-bottom: 0.5em; } } } #sidebar { display: none; }}Sass
  • A GOOD CSS AND SASS ARCHITECTUREbody.application #content {width: 100%;}body.application #content .form-basic dt {float: left;margin-bottom: 0.5em;width: 20%;}body.application #content .form-basic dt span {display: block;}body.application #content .form-basic dd {margin-bottom: 0.5em;width: 80%;}body.application #content .form-options dt {display: block;margin-bottom: 0.5em;}body.application #content .form-options dt span {margin-left: 0.2em;}body.application #content .form-options dd {margin-bottom: 0.5em;}body.application #sidebar {display: none;}CSS
  • A GOOD CSS AND SASS ARCHITECTURE.css.scss
  • A GOOD CSS AND SASS ARCHITECTURE.css.scss
  • A GOOD CSS AND SASS ARCHITECTURE.css.scss
  • A GOOD CSS AND SASS ARCHITECTURE@extend
  • A GOOD CSS AND SASS ARCHITECTURE.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
  • A GOOD CSS AND SASS ARCHITECTURE.plane, .box, .box-alert {box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);border-radius: 5px;}.box {background-color: #FFF;}.box-alert {background-color: #FCC;}CSS
  • A GOOD CSS AND SASS ARCHITECTURE%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
  • A GOOD CSS AND SASS ARCHITECTURE.box, .box-alert {box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);border-radius: 5px;}.box {background-color: #FFF;}.box-alert {background-color: #FCC;}CSS
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURE.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
  • A GOOD CSS AND SASS ARCHITECTURE<!-- Author --><img src="author.jpg" class="pic pic-cutout"alt="Hiroki Tani"><!-- Post --><img src="post.jpg" class="pic pic-photo"alt="ノーベルアイス">
  • A GOOD CSS AND SASS ARCHITECTURE%pic { display: inline-block; vertical-align: top;}%pic-cutout { border-radius: 50%;}%pic-photo { border: 4px solid #FFF; box-shadow: 2px 2px 3px #333;;}.my-avatar { @extend %pic; @extend %pic-cutout;}.post-photo { @extend %pic; @extend %pic-photo;}Sass
  • A GOOD CSS AND SASS ARCHITECTURE.my-avatar, .post-photo {display: inline-block;vertical-align: top;}.my-avatar {border-radius: 50%;}.post-photo {border: 4px solid white;box-shadow: 2px 2px 3px #333333;}CSS
  • A GOOD CSS AND SASS ARCHITECTURE<!-- Author --><img src="author.jpg" class="my-avatar"alt="Hiroki Tani"><!-- Post --><img src="post.jpg" class="post-photo"alt="ノーベルアイス">
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURE%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; box-shadow: 2px 2px 3px #333;;}Sass
  • A GOOD CSS AND SASS ARCHITECTURE.my-avatar, .post-photo, .friend-avatar {display: inline-block;vertical-align: top;}.my-avatar, .friend-avatar {border-radius: 50%;}.post-photo {border: 4px solid white;box-shadow: 2px 2px 3px #333333;}.friend-avatar {box-shadow: 2px 2px 3px #333333;}CSS
  • A GOOD CSS AND SASS ARCHITECTURE<!-- Author --><img src="author.jpg" class="my-avatar" alt="HirokiTani"><!-- Post --><img src="post.jpg" class="post-photo" alt="ノーベルアイス"><!-- Likers --><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="AyumuSato">
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTURESass.btn_type2_A {@extend .clearfix;}.bnavi ul {@extend .clearfix;}.box_3col {@extend .clearfix;}.userData {@extend .clearfix;}.myData {@extend .clearfix;}.ul#popup_message {@extend .clearfix;}
  • A GOOD CSS AND SASS ARCHITECTURE.clearfix:after,.btn_type2_A:after,.bnaviul:after,.box_3col:after,.userDatadl:after,.likeTool:after,.likeUser ul:after,.commentUserul:after,.userData:after,.circleList lia:after,.time_count:after,.pagingul:after,.myData:after,.status:after,.bar:after,.month:after,.month2:after,.about:after,.sort:after,.mainListul:after,.mainList2 liul:after,.bnr_2col:after,.likeTool_lp:after,.flow:after,.radio:after,.btn_entry_2col:after,.sort2:after,ul#popup_message:after,.sort3:after,.f_circleList:after,.f_circleList a:after,.mainList3dl:after,.mainList3 ul:after,.box_2col:after,.frame_descdl:after {content: "";display: block;clear: both;height: 0;}CSS
  • A GOOD CSS AND SASS ARCHITECTUREセマンティック = コンテンツ派生?
  • A GOOD CSS AND SASS ARCHITECTURE“Nicolas Gallagher - About HTML semantics and front-end architecturehttp://nicolasgallagher.com/about-html-semantics-front-end-architecturehttp://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, theyhave purpose.
  • A GOOD CSS AND SASS ARCHITECTUREARCHITECTUREA GOOD CSSFOR MUCH BETTER CODINGAND SASS
  • A GOOD CSS AND SASS ARCHITECTURE不要な子孫セレクタを減らすタグ+ID,クラスセレクタを無くすカテゴリに分類するHTMLに構造に依存したセレクタを見直す再利用しやすいクラスセレクタに置き換える繰り返すルールセットをモジュールにするプロパティの継承を利用する不要な!importantを減らすプロパティの順番をそろえる
  • A GOOD CSS AND SASS ARCHITECTURE不要な子孫セレクタを減らすタグ+ID,クラスセレクタを無くすカテゴリに分類するHTMLに構造に依存したセレクタを見直す再利用しやすいクラスセレクタに置き換える繰り返すルールセットをモジュールにするプロパティの継承を利用する不要な!importantを減らすプロパティの順番をそろえる
  • A GOOD CSS AND SASS ARCHITECTUREdiv.header ul.list {}.widget ul li a {}
  • A GOOD CSS AND SASS ARCHITECTUREdiv.header ul.list {}.widget ul li a {}.header .list {}.widget li > a {}
  • A GOOD CSS AND SASS ARCHITECTURE不要な子孫セレクタを減らすタグ+ID,クラスセレクタを無くすカテゴリに分類するHTMLに構造に依存したセレクタを見直す再利用しやすいクラスセレクタに置き換える繰り返すルールセットをモジュールにするプロパティの継承を利用する不要な!importantを減らすプロパティの順番をそろえる
  • A GOOD CSS AND SASS ARCHITECTURE不要な子孫セレクタを減らすタグ+ID,クラスセレクタを無くすカテゴリに分類するHTMLに構造に依存したセレクタを見直す再利用しやすいクラスセレクタに置き換える繰り返すルールセットをモジュールにするプロパティの継承を利用する不要な!importantを減らすプロパティの順番をそろえる
  • A GOOD CSS AND SASS ARCHITECTURE不要な子孫セレクタを減らすタグ+ID,クラスセレクタを無くすHTMLに構造に依存したセレクタを見直す再利用しやすいクラスセレクタに置き換える繰り返すルールセットをモジュールにするプロパティの継承を利用する不要な!importantを減らすプロパティの順番をそろえるカテゴリに分類する
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTUREBASEMODULELAYOUTSTATETHEME
  • A GOOD CSS AND SASS ARCHITECTUREBASEhtml,body,p,ul,li....
  • A GOOD CSS AND SASS ARCHITECTURELAYOUT.l-header,.l-footer,.grid...
  • A GOOD CSS AND SASS ARCHITECTUREMODULE.btn,.nav,.msg...
  • A GOOD CSS AND SASS ARCHITECTURESTATE.is-hidden,.is-error,.is-selected
  • A GOOD CSS AND SASS ARCHITECTURETHEME.theme-spring.theme-special...
  • A GOOD CSS AND SASS ARCHITECTURE/* %BASE ==================== */html,body {...}/* %LAYOUT ==================== */.l-header {...}.l-footer {...}/* %MODULE ==================== */.btn {...}.msg {...}/* %STATE ==================== */.is-hidden {...}.is-error {...}/* %THEME ==================== */.theme-spring {...}.theme-summer {...}
  • A GOOD CSS AND SASS ARCHITECTURE// 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
  • A GOOD CSS AND SASS ARCHITECTUREsass/_base.scss_layout.scss_module.scss_state.scss_theme.scssmaster.scss
  • A GOOD CSS AND SASS ARCHITECTUREsass/_base.scss_layout.scssmodule/_state.scss_theme.scssmaster.scss_navigation.scss_message.scss_button.scss
  • A GOOD CSS AND SASS ARCHITECTURE// master.scss// Base@import "base";// Layout@import "layout"// Module@import "module/button";@import "module/navigation";@import "module/message";// State@import "state";// Theme@import "theme";
  • A GOOD CSS AND SASS ARCHITECTUREカテゴリに分類するHTMLに構造に依存したセレクタを見直す再利用しやすいクラスセレクタに置き換える繰り返すルールセットをモジュールにする不要な子孫セレクタを減らすタグ+ID,クラスセレクタを無くすプロパティの継承を利用する不要な!importantを減らすプロパティの順番をそろえる
  • A GOOD CSS AND SASS ARCHITECTURE“時期尚早な最適化はすべての悪の根源であるProgrammers waste enormous amounts of time thinking about, orworrying about, the speed of noncritical parts of their programs, andthese attempts at efficiency actually have a strong negative impact whendebugging and maintenance are considered. We should forget aboutsmall efficiencies, say about 97% of the time: premature optimization isthe root of all evil. Yet we should not pass up our opportunities in thatcritical 3%.Donald E, Knuth - Structured Programming With Go To Statementshttp://pplab.snu.ac.kr/courses/adv_pl05/papers/p261-knuth.pdf
  • A GOOD CSS AND SASS ARCHITECTURERefactoring: Improving the Design of Existing Codehttp://www.amazon.com/dp/0201485672/
  • A GOOD CSS AND SASS ARCHITECTURE3, 6, 9, 12, 15
  • A GOOD CSS AND SASS ARCHITECTURE3, 6, 9, 12, 15
  • A GOOD CSS AND SASS ARCHITECTURE3, 6, 12, 24, 48
  • A GOOD CSS AND SASS ARCHITECTURE3, 6, 9, 12, 15
  • A GOOD CSS AND SASS ARCHITECTURE3, 6, 9, 12, 15
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTUREStarbucks Coffee - Style Guidehttp://www.starbucks.com/static/reference/styleguide/
  • A GOOD CSS AND SASS ARCHITECTUREPearshttp://pea.rs/
  • A GOOD CSS AND SASS ARCHITECTUREBBC - GEL (Global Experience Language)http://www.bbc.co.uk/gel
  • A GOOD CSS AND SASS ARCHITECTURE
  • A GOOD CSS AND SASS ARCHITECTUREStyleDoccohttp://jacobrask.github.io/styledocco/
  • A GOOD CSS AND SASS ARCHITECTUREステキなCSSスタイルガイドを生成する「styleDocco」の導入とgrunt.jsでの自動化のメモhttp://mnemoniqs.com/web/styledocco/StyleDoccoによるCSSスタイルガイドの導入http://ameblo.jp/ca-1pixel/entry-11453624925.html
  • A GOOD CSS AND SASS ARCHITECTUREARCHITECTUREA GOOD CSS AND SASSFOR MUCH BETTER CODING
  • A GOOD CSS AND SASS ARCHITECTURETHANK YOU!twitter.com/hilokigithub.com/hilokiinkdesign.jp
  • A GOOD CSS AND SASS ARCHITECTURECREDIThttp://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/