More Related Content Similar to 悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応) (20) More from Horiguchi Seito (8) 悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)2. ホリグチ セイト
自己紹介
Front-End-Engineer
担当している業務
html,css,jsを用いいた中規模メディアサイト,
Webアプリケーションの開発
趣味
Lang-8(先週から)、漫画(いろいろ)、
宇宙とかSFとか
経歴
2001
!
2014
2014
初めてWebサイトを作る。当時最もモダンな「メモ帳」なるエディターを使い、
また「おえかき掲示板」「キリ番システム」などのリッチコンテンツを提供した。
デザイナーからフロントエンドエンジニアに転身。
カルタ大会やハッカソンなど、業務外の事で活躍し始める。
24. structure skin
.btn{
display:
inline-‐block;
border-‐radius:
5px;
text-‐align:
center;
}
.btn-‐green{
background:
green;
}
.btn-‐black{
background:
black;
}
.btn-‐pink{
background:
pink;
}
.btn-‐blue{
background:
blue;
}
25. structure skin
.btn{
display:
inline-‐block;
border-‐radius:
5px;
text-‐align:
center;
}
.btn-‐large{
width:
300px;
height:
50px;
}
.btn-‐medium{
width:
200px;
height:
40px;
}
.btn-‐small{
width:
100px;
height:
30px;
}
26. structure + skin
=
<button
class="btn
btn-‐pink
btn-‐medium">button</button>
27. structure + skin
=
<button
class="btn
btn-‐black
btn-‐large">button</button>
28. structure + skin
=
<button
class="btn
btn-‐green
btn-‐small">button</button>
55. 設計指針 例
KOJI ISHIMOTO氏の場合
絶対にCSSを増やしたくない
class名で悩みたくない
完璧じゃなくてもいい
石本 光司
@t32k
Front-end-engineer
サイバーエージェント所属
JS Girl ファウンダー
※引用2 KOJI ISHIMOTO『ぼくのかんがえたさいきょうのしーえしゅえしゅ』
60. ディレクトリ構成例(SMACSSベース)
scss
mixin.scss
setting.scss
common.scss
normlize.scss
helper.scss
header.scss
footer.scss
main.scss
side.scss
button.scss
heading.scss
table.scss
form.scss
…etc
base
layout
module
61. ディレクトリ構成例(SMACSSベース)
common.scss
@importして1つのCSSに
@import "normlize.scss";
@import “helper.scss”;
!
@import "header.scss";
@import "footer.scss";
@import "main.scss";
@import "side.scss";
!
@import "button.scss";
@import "heading.scss";
@import "table.scss";
@import "form.scss";
91. S 参考文献
※引用1 Jonathan Snook,斉藤祐也『SMACSS: Scalable and Modular Architecture for CSS』
https://smacss.com/ja
※引用2 KOJI ISHIMOTO『MOL - Designing for a Mobile World!』
http://t32k.me/mol/log/the-perfect-css-i-thought/
※引用3 Twitter『 Bootstrap』
http://getbootstrap.com/
谷 拓樹『Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」
の設計手法』
http://www.impressjapan.jp/books/1113101128
株式会社ピクセルグリッド『Code Grid』
https://app.codegrid.net/
Harry Roberts『CSS Wizardly』
http://csswizardry.com/