How have we come to BEM

in 3 acts

with a prologue and epilogue

prologue

A few words about the BEM

act 1

Scene 1: history

era index.css

index2.css

script.js

nikita.css

era of pages

main.css,

index.css,

contact.css

common.css

era of preprocessors

*.less

cascade hell

conclusions

Scene 2:

pages

design

index.psd

contacts.psd

news.psd

news_x.psd

 content.psd

Do not think about

the pages

design is not about pages

website

is not

web pages

Scene 3: projects

then

psd -> html css -> php

 -> support

now

psd -> html css -> php

 -> support

-> psd -> html css ->

 -> support

 -> support

-> psd -> html css -> php

-> psd -> html css -> php

 -> support

-> psd -> html css ->

 -> support

 -> support

-> psd -> html css -> php -> ...

conclusions

- long

- big

act 2

Scene 1:

new developer fixes bug

. . .

.main-menu-title-header-item-frist

searching ...

not found

title-header

searching ...

found 30 files

after 10 minutes

.index-slider.less

???

.selector .selector .selector {

rule: rule !important;

}

???

.selector .selector .selector .selector {

rule: value !important;

}

profit!

Scene 2:

serpent tempter

-> to trank ->

v2

v3

v4

v4

commit #2556 test fix 5

Scene 3:

about preprocessors

css cascade hell

.class {

    &.class {

        &.class {

             ....

        }

    }

}

act 3

understanding

Scene 1:

Problems

- standarts
- find
- css
- scalability

- language

style=""        1,0,0,0
#id                 0,1,0,0
.class             0,0,1,0
[attr=value] 0,0,1,0
tag                  0,0,0,1
*                      0,0,0,0

specificity css

Scene 2:

Sumary

- big & lond project

- support > dev

- entry threshold

- speed fix

- code portability

Scene 3:

solutions

make velocycle ?

epilogue

A few words about the BEM

.block__el__el ?

.block._mod ?

index.css for all ?

.block .block .block ?

.block_bg_red ?

bem faq

the author

Andreev Sergey

vk: dragorWW

tw: dragorWW

fb: dragorWW

Thank you!

waiting for your questions

How have we come to BEM

By Sergey Andreev

How have we come to BEM

Видео доклада: http://www.youtube.com/watch?v=NwRBJBEc_OY

  • 2,291