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
Thank you!
waiting for your questions
How have we come to BEM
By Sergey Andreev