- CSSModern CSS Architecture Hiroki TaniHTML5 Conference
2013
Hiroki Tani CyberAgent, Inc.
http://frontrend.github.io/Frontrend in Sapporo Frontrend in
Fukuoka2013127 20131 Why Architecture ? #news h2 { border-bottom:
1px solid black; padding: 1em 0.5em; font-size: 18px; font-weight:
bold; } #news h2 { border-bottom: 1px solid black; padding: 1em
0.5em; font-size: 18px; font-weight: bold; } #faq .title {
border-bottom: 1px solid black; padding: 1em 0.5em; font-size:
18px; font-weight: bold; } #news h2 { border-bottom: 1px solid
black; padding: 1em 0.5em; font-size: 18px; font-weight: bold; }
#faq .title { border-bottom: 1px solid black; padding: 1em 0.5em;
font-size: 18px; font-weight: bold; } #service .feature .title {
border: 1px solid black; padding: 0.5em; font-size: 16px; }
.column_2 #inbox .list { ... } .column_3 #inbox .list { ... }
.column_3 #inbox .list .name { ... } .column_3 #inbox .list .name p
{ ... .column_3 #inbox .list .name.reply { .column_3 #inbox .list
.name.reply a body#top .column_3 #inbox .list.left} ... } { ... } {
... } !important Goals of Better CSS Architecture- Predictable -
Reusable - Maintainable - Scalable
http://enja.studiomohawk.com/2013/07/06/css-architecture/ Modular
CSS OOCSS Nicole Sullivanhttps://github.com/stubbornella/oocss/wiki
OOCSS - Separate structure and skin - Separate container and
content Media object
.media { /* Clearfix */ } .media-image { float: left;
margin-right: 10px; } .media-image img { > display: block; }
.media-body { overflow: hidden; }
How to build modules ? It depends. Rule of Three
Refactoringhttp://en.wikipedia.org/wiki/Rule_of_three_(computer_programming)
3, 6 3, 6, 9, 12, 15 ... 3, 6, 12, 24, 48 ... 3, 6, 9 3, 6, 9, 12,
15 ... .fontSize10 { font-size: 10px } .colorRed { color: red }
.colorRed { color: red } .colorRed { color: orange; } .colorRed
{ color: orange; /* */ } .fontSize18 { font-size: 18px }
.fontSize18 { font-size: 18px } @media only screen and (max-width :
320px) { .fontSize18 { font-size: 14px } } .radius6 {
border-radius: } .radius10 { border-radius: } .radius12 {
border-radius: } .radius14 { border-radius: }6px;10px;12px;14px;
How to maintain modules ? SMACSS Jonathan Snookhttp://smacss.com/ja
SMACSS Jonathan Snookhttp://smacss.com/ja SMACSS - Categorization -
Naming Convention - Decoupling CSS from HTML HTMLCSS SMACSS
Categories - Base - Layout - State - Theme - Module /* # Base */
body, form { margin: 0; padding: 0; } a { color: #039; } a:hover {
color: #03F; } /* # Layout */ #header { width: 960px; margin: auto;
} .l-article { border: solid #CCC; border-width: 1px 0 0; } .l-grid
{ margin: 0; padding: 0; list-style-type: none; } .l-grid > li {
display: inline-block; margin: 0 0 10px 10px; } /* # State */
.is-hidden { display: none; } .is-error { font-weight: bold; color:
red; } .is-tab-active { border-bottom-color: transparent; } /* #
Theme */ /* ## Spring Theme CSS */ .theme-header {
background-image: url("/theme/spring/ header.png"); } .theme-border
{ 1px solid pink; } Message-box http://cdpn.io/hKBkm
.msg { display: block; border: 1px solid #cccccc; border-radius:
8px; padding: 1em; background-color: #efefef; color: #333333; }
.msg { ... } .msg-error { border: 1px solid #c0392b;
background-color: #fe9282; }
.msg { ... } .msg-success { border: 1px solid #27ae60;
background-color: #99f3c9; }
.msg h2 { font-size: inherit; font-weight: bold; } .msg p {
margin-top: 0.6em; } .msg h2 { font-size: inherit; font-weight:
bold; } .msg ul, .msg p { margin-top: 0.6em; } .msg h2 { font-size:
inherit; font-weight: bold; } .msg ul, .msg p { margin-top: 0.6em;
}
.msg-title { font-size: inherit; font-weight: bold; } .msg-body
{ margin-top: 0.6em; }
.msg-title-icon { vertical-align: -0.3em; } .ico { display:
inline-block; } .ico-alert { background-image: url(...); width:
24px; height: 24px; } .ico-label { margin-right: 0.3em; } %ico {
display: inline-block; } %ico-alert { background-image: url(...);
width: 24px; height: 24px; } %ico-label { margin-right: 0.3em; }
.msg-error-icon { vertical-align: -0.3em; @extend %ico; @extend
%ico-alert; @extend %ico-label; } .msg-error { border: 1px solid
#c0392b; background-color: #fe9282; } .msg-title { font-size:
inherit; font-weight: bold; } .msg-body { margin-top: 0.6em; } .msg
{ ... } .msg-error { border: 1px solid #c0392b; background-color:
#fe9282; } .msg-title { font-size: inherit; font-weight: bold; }
BEM Yandexhttp://bem.info/ BEM stands for ... - Block - Element -
Modier Block Element Modier .block { ... } .block__element { ... }
.block_modifier { ... } .block__element_modifier { ... } .nav { ...
} .nav__item { ... } .nav_segmented { ... } .nav__item_segmented {
... } .nav { ... } .nav__item { ... } .nav--segmented { ... }
.nav__item--segmented { ... }
http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/
.msg { ... } .msg--error { border: 1px solid #c0392b;
background-color: #fe9282; } .msg__title { font-size: inherit;
font-weight: bold; } .msg__body { margin-top: 0.6em; }
.msg__title-icon { vertical-align: -0.3em; } MCSS - Base - Project
- cosmetichttp://operatino.github.io/MCSS/en/ inuit.css - Base -
Generic - Objectshttp://inuitcss.com/ SUIT - Utilities -
Componentshttps://github.com/suitcss/suit Front-end Styleguide
Starbucks Style Guide
http://www.starbucks.com/static/reference/styleguide/ Pattern
Primer http://patternprimer.adactio.com/ MailChimp Pattern Library
http://ux.mailchimp.com/patterns/ Twitter Bootstrap
http://getbootstrap.com KSS http://warpspire.com/kss/styleguides/
Kalei http://kaleistyleguide.com/ StyleDocco
http://jacobrask.github.io/styledocco/ // // # // // // // ``` //
// ``` HTML // // ``` .btn { display: inline-block; ...
&:hover, &:focus { color: @btn-default-color;
text-decoration: none; } } $ styledocco -n "ProjectName" css/ $
styledocco -n "ProjectName" -o "mydocs" $ styledocco -n
"ProjectName" --preprocessor "lessc" less/ Building Pages Building
Pages Building Pages Systems Developer vs Designer ? Developer with
Designer Best Practice Best Practices All code in any code-base
should look like a single person typed it, even when many people
are contributing to it. - Idiomatic
CSShttps://github.com/necolas/idiomatic-css - Anonymous Thanks. -
twitter.com/hiloki - inkdesign.jp - html5experts.jp/hiloki/ Photo
credit -http://www.ickr.com/photos/bpotstra/3490333174/sizes/l/
http://www.ickr.com/photos/bettybroadbent/3704523854/sizes/o/
http://www.ickr.com/photos/drewmaughan/8209503226/sizes/l/
http://www.ickr.com/photos/biodork/6849406792/
http://www.ickr.com/photos/43266097@N03/9444574320/sizes/l/
http://www.ickr.com/photos/90585146@N08/8234225693/sizes/l/
http://www.ickr.com/photos/lwr/6778863776/sizes/l/
http://www.ickr.com/photos/jezpage/4696962046/
http://www.ickr.com/photos/april-mo/8485249298/sizes/l/
http://www.ickr.com/photos/4st4roth/2366615948/
http://www.ickr.com/photos/sharman/4570412801/sizes/l/
http://www.ickr.com/photos/kaptainkobold/3771497484/
http://www.ickr.com/photos/laurie_pink/2549598674/sizes/l/
http://www.ickr.com/photos/dansdata/3266946102/
http://www.ickr.com/photos/ochre_jelly/6839227477/sizes/l/
http://www.ickr.com/photos/in-duce/2232109985/sizes/o/
http://www.ickr.com/photos/pgoyette/5911926699/sizes/z/
http://www.ickr.com/photos/conradoplg/10091603396/sizes/l/
http://www.ickr.com/photos/kaptainkobold/4441509147/sizes/l/
