Beyond CSS Architecture

https://www.flickr.com/photos/stn1978/8899794454/

Beyond CSS ArchitectureHiroki Tani, HTML5 Conference, Room B

Hiroki Tani@hiloki, Frontend Developer

https://frontendweekly.tokyo/

@cssradar @t32k @hiloki

! Vertical align

.selector { property: value;}

.selector { property: value;}

.author { …}

Hiroki Tani

.author { ... }

.login-user { ... }

Hiroki Tani

Koji Ishimoto

.author { ... }

.login-user { ... }

.comment-author { ... }

.author,

.login-user,

.comment-author { /* 共通のスタイル */}

.author { ... }

.login-user { ... }

.comment-author { ... }

.author,

.login-user,

.comment-author,

.entry-item,

.bookmark,

.more-uis… { ... }

OOCSSby Nicole Sullivan

https://www.flickr.com/photos/premshree/3444104640/

.media { ... }

.author { ... }

.login-user { ... }

Hiroki Tani

Koji Ishimoto

.media { overflow: hidden; /* Clearfix */ margin:10px;}.media .bd { overflow:hidden;}.media .img { float:left; margin-right: 10px;}.media .img img { display:block;}.media .imgExt { float:right; margin-left: 10px;}

<div class=“media author"> <a class="img"> <img /> </a> <div class="bd"> ... </div></div>

<div class="media author"> ...</div><div class=“media login-user"> ...</div>

BEMby Yandex

https://bem.info/

Hiroki Tani

Hiroki Tani

Block

Element

Modifier

.media { overflow: hidden; margin:10px;}.media .bd { overflow:hidden;}.media .img { float:left; margin-right: 10px;}.media .img img { display:block;}.media .imgExt { float:right; margin-left: 10px;}

.media { overflow: hidden; margin:10px;}.media__body { overflow:hidden;}.media__image { float:left; margin-right: 10px;}.media__image img { display:block;}.media__image_extra { float:right; margin-left: 10px;}

<div class=“media author"> <a class="img"> <img /> </a> <div class="bd"> ... </div></div>

<div class=“media author"> <a class="media__image"> <img /> </a> <div class="media__body"> ... </div></div>

.media { /* 0,0,1,0 */ overflow: hidden; margin:10px;}.media__body { /* 0,0,1,0 */ overflow:hidden;}.media__image { /* 0,0,1,0 */ float:left; margin-right: 10px;}.media__image img { /* 0,0,1,1 */ display:block;}.media__image_extra { /* 0,0,1,0 */ float:right; margin-left: 10px;}

<div class="media author"> <a class="media__image author__image"> <img /> </a> <div class="media__body"> ... </div></div>

“”

Not all semantics need to be content-derived. Class names cannot be “unsemantic”.

Whatever names are being used: they have meaning, they have purpose.

Nicolas Gallagherhttp://nicolasgallagher.com/about-html-semantics-front-end-architecture/

CSS Preprocessor

<div class="author Media"> <div class="author__image Media__image Avatar"> <img src="author.jpg"> </div> <div class="author__body Media__body"> ... </div></div>

%Media { /* Media styles... */}%Media__image { /* Media image styles... */}%Media__body { /* Media body styles... */}

%Avatar { /* Avatar styles... */}

.author { @extend %Media; /* .author styles... */}.author-image { @extend %Media__image; @extend %Avatar; /* .author-image styles... */}.author-body { @extend %Media__body; /* .author-body styles... */}

<div class="author Media"> <div class="author-image Media__image Avatar"> <img src="author.jpg"> </div> <div class="author-body Media__body"> ... </div></div>

.login-user { @extend %Media; /* .login-user styles... */}.login-user-image { @extend %Media__image; @extend %Avatar; /* .login-user-image styles... */}.login-user-body { @extend %Media__body; /* .login-user-body styles... */}

<div class="login-user"> <div class="login-user-image"> <img src="user.jpg"> </div> <p class="login-user-name"> ... </p></div>

.author, .login-user { /* Media styles... */ }

.author-image, .login-user-image { /* Media image styles... */ }

.author-body, .login-user-body { /* Media body styles... */ }

.author-image, .login-user-image { /* Avatar styles... */ }

.author { /* .author styles... */ }

.author-image { /* .author-image styles... */ }

.author-body { /* .author-body styles... */ }

.login-user { /* .login-user styles... */ }

.login-user-image { /* .login-user-image styles... */ }

.login-user-body { /* .login-user-body styles... */ }

%Media

.author .login-user

%Media

.author .login-user { @extend .author;}

%Media

.author

.login-user.comment-author

.entry-item

.bookmark

.more-uis

%Media

.author


.entry-item

.bookmark

.more-uis

%Media

.author


.entry-item

.bookmark

.more-uis

.mod_listType1 section,.mod_listType3 section,.mod_listType4 section,.mod_listType5 section,.mod_listType7 section,.mod_listType8 section{margin-bottom:1em}.mod_listType1 h1,.mod_listType3 h1,.mod_listType4 h1,.mod_listType5 h1,.mod_listType7 h1,.mod_listType8 h1{margin:0 0 .5em .5em;font-size:15px;-webkit-text-shadow:0 1px 0 rgba(255,255,255,.75);text-shadow:0 1px 0 rgba(255,255,255,.75)}.mod_listType1 ul,.mod_listType3 ul,.mod_listType4 ul,.mod_listType5 ul,.mod_listType7 ul,.mod_listType8 ul{background-color:#fff;border:1px solid #c3c3c3;overflow:hidden;border-radius:12px}.mod_listType1 ul li,.mod_listType3 ul li,.mod_listType4 ul li,.mod_listType5 ul li,.mod_listType7 ul li,.mod_listType8 ul li{border-top:#C3C3C2 1px solid;margin-top:-1px;margin-bottom:1px;font-size:16px}.mod_listType1 ul li:first-child a.disable,.mod_listType1 ul li:last-child a.disable,.mod_listType3 ul li:first-child a.disable,.mod_listType3 ul li:last-child a.disable,.mod_listType4 ul li:first-child a.disable,.mod_listType4 ul li:last-child a.disable,.mod_listType5 ul li:first-child a.disable,.mod_listType5 ul li:last-child a.disable,.mod_listType7 ul li:first-child a.disable,.mod_listType7 ul li:last-child a.disable,.mod_listType8 ul li:first-child a.disable,.mod_listType8 ul li:last-child a.disable{border-radius:12px}.mod_listType1 ul li a,.mod_listType3 ul li a,.mod_listType4 ul li a,.mod_listType5 ul li a,.mod_listType7 ul li a,.mod_listType8 ul li a{display:block;width:100%;padding:.75em .7em;box-sizing:border-box;-webkit-text-shadow:1px 1px 2px rgba(0,0,0,.25);text-shadow:1px 1px 2px rgba(0,0,0,.25);position:relative}.mod_listType1 ul li a::after,.mod_listType11 ul li a::after,.mod_listType12 ul li a::after,.mod_listType13 ul li a::after,.mod_listType14 ul li a::after,.mod_listType3 ul li a::after,.mod_listType4 ul li a::after,.mod_listType5 ul li a::after,.mod_listType7 ul li a::after,.mod_listType8 ul li a::after,.mod_listType9 ul li a::after{display:block;width:9px;height:14px;position:absolute;top:50%;right:1em;margin-top:-10px;content:"]";font-size:12px;color:brown;-webkit-text-shadow:none;text-shadow:none}

.mod_listType1 section,.mod_listType3 section,.mod_listType4 section,.mod_listType5 section,.mod_listType7 section,.mod_listType8 section{margin-bottom:1em}.mod_listType1 h1,.mod_listType3 h1,.mod_listType4 h1,.mod_listType5 h1,.mod_listType7 h1,.mod_listType8 h1{margin:0 0 .5em .5em;font-size:15px;-webkit-text-shadow:0 1px 0 rgba(255,255,255,.75);text-shadow:0 1px 0 rgba(255,255,255,.75)}.mod_listType1 ul,.mod_listType3 ul,.mod_listType4 ul,.mod_listType5 ul,.mod_listType7 ul,.mod_listType8 ul{background-color:#fff;border:1px solid #c3c3c3;overflow:hidden;border-radius:12px}.mod_listType1 ul li,.mod_listType3 ul li,.mod_listType4 ul li,.mod_listType5 ul li,.mod_listType7 ul li,.mod_listType8 ul li{border-top:#C3C3C2 1px solid;margin-top:-1px;margin-bottom:1px;font-size:16px}.mod_listType1 ul li:first-child a.disable,.mod_listType1 ul li:last-child a.disable,.mod_listType3 ul li:first-child a.disable,.mod_listType3 ul li:last-child a.disable,.mod_listType4 ul li:first-child a.disable,.mod_listType4 ul li:last-child a.disable,.mod_listType5 ul li:first-child a.disable,.mod_listType5 ul li:last-child a.disable,.mod_listType7 ul li:first-child a.disable,.mod_listType7 ul li:last-child a.disable,.mod_listType8 ul li:first-child a.disable,.mod_listType8 ul li:last-child a.disable{border-radius:12px}.mod_listType1 ul li a,.mod_listType3 ul li a,.mod_listType4 ul li a,.mod_listType5 ul li a,.mod_listType7 ul li a,.mod_listType8 ul li a{display:block;width:100%;padding:.75em .7em;box-sizing:border-box;-webkit-text-shadow:1px 1px 2px rgba(0,0,0,.25);text-shadow:1px 1px 2px rgba(0,0,0,.25);position:relative}.mod_listType1 ul li a::after,.mod_listType11 ul li a::after,.mod_listType12 ul li a::after,.mod_listType13 ul li a::after,.mod_listType14 ul li a::after,.mod_listType3 ul li a::after,.mod_listType4 ul li a::after,.mod_listType5 ul li a::after,.mod_listType7 ul li a::after,.mod_listType8 ul li a::after,.mod_listType9 ul li a::after{display:block;width:9px;height:14px;position:absolute;top:50%;right:1em;margin-top:-10px;content:"]";font-size:12px;color:brown;-webkit-text-shadow:none;text-shadow:none}

440kbgziped

https://amcss.github.io/

<a class="btn btn-primary btn-lg"> Large primary button</a>

<a am-Button="primary large"> Large primary button</a>

[am-Button] { ...}[am-Button~="primary"] { ...}[am-Button~="large"] { ...}

See also:

CSS: Using every declaration just once

YACP

https://developers.google.com/speed/articles/optimizing-css

http://morishitter.hatenablog.com/entry/2014/12/02/000135

http://hail2u.net/blog/webdesign/oocss-drawbacks-and-gifts-of-every-declaration-just-once.html

“”

We’re not designing pages, we’re designing systems of components.

Stephen Hay

http://smacss.com/

https://github.com/hiloki/flocss

ITCSSby Harry Roberts a.k.a. CSS Wizardly

https://www.flickr.com/photos/stn1978/8899794454/

http://itcss.io/

https://speakerdeck.com/dafed/managing-css-projects-with-itcss

Setting

Tools

Generic

Base

Objects

Components

Trumps

!"" _base.links.scss!"" _base.page.scss!"" _base.quotes.scss!"" _base.type.scss!"" _components.ads.scss!"" ...!"" _components.promo.scss!"" _components.pull-quote.scss!"" _components.site-nav.scss!"" _components.sprites.scss!"" _objects.wrappers.scss!"" _settings.colors.scss!"" _settings.global.scss!"" _tools.aliases.scss!"" _tools.mixins.scss!"" _trumps.show-hide.scss!"" _trumps.widths-responsive.scss#"" csswizardry.scss

/** * #SETTINGS */@import "bower_components/inuit-defaults/settings.defaults";@import "settings.global";@import "settings.colors";@import "bower_components/inuit-responsive-settings/settings.responsive";

/** * #TOOLS */@import "bower_components/inuit-functions/tools.functions";@import "bower_components/inuit-mixins/tools.mixins";@import "tools.mixins";@import "bower_components/inuit-responsive-tools/tools.responsive";@import "tools.aliases";

/** * #GENERIC */@import "bower_components/inuit-normalize/generic.normalize";@import "bower_components/inuit-reset/generic.reset";@import "bower_components/inuit-box-sizing/generic.box-sizing";@import "bower_components/inuit-shared/generic.shared";

http://bradfrost.com/

See also:

Atomic Design

FUN CSS

http://bradfrost.com/blog/post/atomic-web-design/

http://benfrain.com/fun-css-naming-convention-explained/

Styleguide

http://ux.mailchimp.com/patterns/

http://styleguides.io/examples.html

StyleguideStatic

StyleguideLiving

Generator

http://trulia.github.io/hologram/

/*doc---title: Buttonsname: buttoncategory: Base CSS---

Button styles can be applied to any element. Typically you'll want touse either a `<button>` or an `<a>` element:

```html_example<button class="btn btnDefault">Click</button><a class="btn btnPrimary" href="http://trulia.com">Trulia!</a>```*/

/*doc---title: Buttonsname: buttoncategory: Base CSS---

Button styles can be applied to any element. Typically you'll want touse either a `<button>` or an `<a>` element:

```html_example<button class="btn btnDefault">Click</button><a class="btn btnPrimary" href="http://trulia.com">Trulia!</a>```*/


See also:

Pattern Lab

Frontnote

http://patternlab.io/

http://frontainer.com/frontnote/

Specificity Graph

http://csswizardry.com/2014/10/the-specificity-graph/

Spec

ifici

ty

Location in Stylesheet

Spec

ifici

ty


ul { margin: 0;}

Spec

ifici

ty


.item { border: 1px solid #999;}

Spec

ifici

ty


.item.selected { background: #eee;}

Spec

ifici

ty


.heading { font-size: 24px;}

Spec

ifici

ty


#feature { background: #FC0;}

Spec

ifici

ty


#feature .heading { color: #000;}

http://jonassebastianohlsson.com/specificity-graph/

See also:

Specificity graph

CSS specificity graphs

http://snook.ca/archives/html_and_css/specificity-graphs

https://decadecity.net/blog/2014/11/26/css-specificity-graphs

Statistical tool

http://www.stylestats.org/

http://cssstats.com

See also:

CSS Dig

Parker

http://cssdig.com/

https://github.com/katiefenn/parker

https://developers.google.com/web/fundamentals/performance/critical-rendering-path

http://goo.gl/ycf4WU

https://developers.google.com/speed/pagespeed/insights/

http://www.smashingmagazine.com/

http://jonassebastianohlsson.com/criticalpathcssgenerator/

Before

After

http://goo.gl/9DbbVs


See also:

Pentohouse

Critical

Critical CSS

https://github.com/pocketjoso/penthouse

https://github.com/addyosmani/critical

https://github.com/filamentgroup/criticalcss

http://webcomponents.org/

“ ”Every line of CSS you write is a suggestion.

Jeremy Keith

https://adactio.com/journal/7653

https://www.flickr.com/photos/pgoyette/5911926699/

Thankstwitter.com/hiloki

github.com/hiloki

Beyond CSS Architecture

Software

media styles

media image styles

author styles

media body styles

authorimage styles

loginuser styles

authorbody styles

image img