BEM is okay
Is CSS that bad?
H1 { color: blue }
P EM { font-weight: bold }
A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }
From CSS 1 specification
Dan
Cederholm
Nicole
Sullivan
Jonathan
Snook
SMACSS
Vitaly
Harisov
1. No IDs
2. No cascade
3. Unique classes
BEM
.b-block {
}
.b-block__element {
}
.b-block_key_value {
}
Harry
Roberts
Nicolas
Gallagher
BEM
BEM
.block {
}
.block__element {
}
.block--modifier {
}
Smile.css
.smile {
background: yellow;
border: 1px solid black;
border-radius: 50%;
}
Smile.html
<div class="smile">
<i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i>
Zombie?
<div class="smile">
<i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i>
Zombie?
.smile {
background: yellow;
border: 1px solid black;
border-radius: 50%;
}
Zombie!
<body id="404">
<div class="smile">
#404 .smile {
background: green;
zombie: zombie;
}
BEM-zombie
<body>
<div class="smile smile--zombie">
.smile--zombie {
background: green;
zombie: zombie;
}
Stylitis
<span style="display: block; font-family: Arial, sans-serif;
font-size: 11px; color: blue; border-style: solid;
border-color: blue; border-width: 2px; padding: 20px;">
Terrible!
</span>
Classitis
<span class="display-block blue-box
font-arial color-blue
solid-blue-border padding-20">
Beautiful?
</span>
Header CSS
.header {
}
.header__logo {
}
.header__logo--huge { … }
.header__logo--monochome { … }
.header__logo--upside-down { … }
Header HTML
<div class="header>
<div class="
header__logo
header__logo--huge
header__logo--monochome
header__logo--upside-down">
CSS
.block {
}
.block__element {
}
.block--modifier {
}
Sass
.block {
&__element {
}
&--modifier {
}
}
Sass
.block {
&__element {
&--modifier { … }
}
&--modifier {
}
}
Classitis cured
.header {
&__logo {
&--perverted {
@extend %huge;
@extend %monochrome;
@extend %upside-down;
Classitis cured
<div class="header>
<div class="
header__logo
header__logo--huge
header__logo--monochome
header__logo--upside-down">
Common sense
<div class="header>
<div class="
header__logo
header__logo--perverted">
BEML
<header block="header">
<input elem="search" mod="size: huge">
</header>
Modifiers
styles/
catalog.css
catalog__layout.css
pictures/
picture.jpg
picture--thumb.jpg
Sublime Text
{
"word_separators":
"./\\()\"'-_:,.;<>~!@#$%^&*|+=[]{}`~?"
}
Powered by Shower
