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