Modern Front-end Development
HTML5
CSS
Parse CSS and add vendor prefixes to rules by Can I Use
.example:fullscreen {
display: flex
}.example:-webkit-full-screen {
display: -webkit-box;
display: -webkit-flex;
display: flex
}
.example:-moz-full-screen {
display: flex
}
.example:-ms-fullscreen {
display: -ms-flexbox;
display: flex
}
.example:fullscreen {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}BAD CSS
#header h1 { }No rules for ID
No rules for tags
No cascade rules
The main idea of BEM methodology is to speed development process up and ease the teamwork of developers.
Naming rules for:
- blocks
- elements
- modifiers
Block
<div class="block">
</div>.block {
color: #042;
}Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well.
HTML
CSS
Element
<div class="block">
...
<span class="block__elem"></span>
</div>.block {
color: #042;
}
.block__elem {
font-weight: bold;
}Parts of a block and have no standalone meaning. Any element is semantically tied to its block.
HTML
CSS
Modifier
<div class="block block--mod">
...
<span class="block__elem"></span>
</div>
<div class="block block--mod">
...
<span class="block__elem block__elem--mod"></span>
</div>.block {
color: #042;
}
.block--mod {
background: green;
}
.block__elem {
font-weight: bold;
}
.block__elem--mod {
color: green;
}Flags on blocks or elements. Use them to change appearance, behavior or state.
HTML
CSS
Build Systems
npm is the package manager
Need React?
npm install --save react// main.js
import React from 'react'
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
)Modern Front-end Development
By Aleksej Romanovskij
