Modern Front-end Development

HTML5

CSS

Compass

Compass is an open-source CSS Authoring Framework

PostCSS

PostCSS is a tool for transforming styles with JS plugins.

Autoprefixer

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

BEM

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

Gulp

Automate and enhance your workflow

Grunt

The JavaScript Task Runner

Webpack

Module bundler

npm

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')
)