CSS guideline

CSS guideline

Review

• FLOCSS
  • Basic concept

FLOCSS

Basic concept

Foundation Layout Object CSS - CSS design concept that takes advantage of OOCSS, BEM, and SMACSS. CSS design concept often used in Japan devised by Hiroki tani(@hiloki hiloki/flocss : CSS organization methodology.

• Documentation FLOCSS
• Introduction to FLOCSS(Video)

Review

// погано
class Jedi {
  constructor() {}

  getName() {
    return this.name;
  }
}

// погано
class Rey extends Jedi {
  constructor(...args) {
    super(...args);
  }
}

// добре
class Rey extends Jedi {
  constructor(...args) {
    super(...args);
    this.name = "Rey";
  }
}

//Style for layout as seen from the entire page

.l-header
  position: fixed
  top: 0
  left: 0
  z-index: 100
  width: 100%

//Style of the header part
.p-header
  display: flex
  &__logo
    width:100px
    height:50px