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

·

2 min read

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.