Summary on BEM methodology

Week [2]. Last week was quite busy and full of new things. I've got familiar and tried in practice such things like:

CSS pseudoclasses, hover and others
CSS pseudoelements, before, after and others
CSS position
CSS preprocessor SASS/SCSS
Two types of fonts connection (by Google fonts and by file)
BEM methodology by Yandex
HTML meta tags
CSS Flexbox

The first hardest from it was BEM, because I had a lot of doubts about whether I name classes and elements right or wrong. But, I hope it will come with practice.

I even did a short summary on BEM methodology:

B - block

A name of a block answers on the question “what is it?” and tells us about content.
We don't give to the block any outer geometry: padding, margin and positioning, to have possibility to use it at another place.
Where are no limitations about blocks nesting into each other.

E - element

Also answers the question “what is it?” and contains of two parts: block's-class-name__element-name
An element is always a part of the block and can't be the part of another element;
The element can't be used outside the block.
The block, may not, contain any element.
The block implies possible reusage.

M - modification

A modification adding and specifying style of the block or the element (Which? How it looks? How t behaves? Condition?), block's-class-name__element-name_modificator.
Mix: the element can be both: the element and the block:

class="about” class="about__title title"

The second hardest was Flexbox and there was a game that helped me a lot at first.

Currently, I'm practicing with BEM methodology and Flexbox by coding some layouts from PSD. And soon, I'm planning to study adaptive website coding.

[2] CSS Pseudo classes and elements, SASS, BEM