Skip to content

Latest commit

 

History

History
67 lines (47 loc) · 2.7 KB

README.md

File metadata and controls

67 lines (47 loc) · 2.7 KB

SYZYGY PL - CSS Styleguide

CSS

  • Mobile First approach is usualy the best choice.
  • Always style by class name (never id or tag name selectors).
  • Order your declarations as proposed in Idiomatic CSS.
  • Make sure that your preferable solution meets desirable Browsers Support.

Exceptions

  • content declaration should be on the first place in Declaration Order.

Sass

  • Always use .scss syntax.
  • Use all the benefits - variables, nesting, mixins, build-in and custom functions, placeholders, etc. - to make code smarter, simpler, clearer and easier to maintain.
  • Prefer hex or other color model over named colors (#ff0000 rather than red).

BEM

  • Use BEM in it's most popular Two Dashes style.
  • 1 block per 1 file with corresponding name (e.g. .card block in _card.scss file).
  • Declare block name only once at top of the file. Use $root / $this variable to reuse it.
  • Media Queries should be placed at the end, once for each block rather than independently for block elements.

Exceptions

  • Using CSS resets / normalizers is allowed (yes, it's against BEM)
  • We use No Naming style syntax for "state modifiers" - (.-is-* and .-has-*).
  • Styling img and svg by tag name is allowed. Why?
  • In some cases (like using external component with imposed markup) it may be unavoidable to break BEM naming convention rules.

Solved problems

Resources

CSS

Sass

BEM

Files organization