Foo

Foo Corp logo

Welcome to Foo Corp

Foo Corp is the best, seriously!

Foo bar

D'oh

"Our (CSS) best practises
are killing us!"

- nicole sullivan @stubbornella

IndividualCSS

SMACSS

DRYCSS

OOCSS

TitleCSS

BEM

WTF?

it is just CSS, isn't it?

Myth of CSS

css is semantic?


meanings from id?


walking tag by tag is fast?

who cares?

Deliver the pouch

the audience

reliable. robust. entertaning.

some others like you

Yeah Code!

people who care
about the beauty

design. conversion. experience.

projectleaders

fast. reusable. high value.

ookay we use minus



    

OOCSS



    

Foobar

Foo

disadvantages

disorientation

divergences

-- repetition --

teach OOCSS to DRY



    %separator
        border-top: 1px solid black

    hr
        @extend %separator

    .separator
        @extend %separator

    hr, .separator {
        border-top: 1px solid black
    }
                        

BEM



    .block {}
    
    .block__element {}
    
    .block--modifier {}
    
    .element--modifier {}
    
    .block__element--modifier
                        

In the wild



    
                        


use 2 spaces to separate classes


    

what's about javascript?


hook-classes:


    


data attribute:


    

teach BEM with SASS



    .widget {
        &__title {}
        &__body {}
        &__network {
            &--gplus {}
        }

        &--social {}
    }
                        


variables with BEM:


    $price__color--base: #333333 !default;
    $price__color--sale: #ff0000 !default;
    $price__family: "Helvetica Neue", Helvetica, sans-serif !default;
                        

    @mixin getWidget ($hPosition: left, $vPosition: top, $offset: 7%) {
        @if $vPosition == top { top: 50px; }
        @if $vPosition == middle { top: 100px; }
        > div {
            @if $hPosition == center {
                text-align: center;
            } @else {
                float: $hPosition;
                @media #{$lg-screens} {
                    margin-#{$hPosition}:$offset;
                }
            }
        }
    }
    .widget__body {
        background: red;

        &--left-top {
            @include getWidget ();
        }
        &--left-middle {
            @include getWidget ($vPosition: middle);
        }
    }
                        

and whats now?


You don't get points for being pretty,
you get points for being powerful

- Harry Roberts

OSCSS

http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/
https://github.com/stubbornella/oocss/wiki


BEM

http://bem.info/
http://www.mathayward.com/modular-css-with-sass-and-bem/


brought to you by

Tobias Hartmann @ToH_82