Scalable and Modular Architecture for CSS

style.md

Best practise on writing scalable and modular css

👮🏻 Naming conventions

• BEM Naming convention (Block, Element, Modifier) is a methodology that we use to achieve reusable components.
• Hyphenatedbem

Selectors

• Don't use ID's for style.
• Avoid over-qualified selectors: h1.page-title, div > .page-title
• Use meaningful names: $visual-grid-color not $color or $vslgrd-clr.
• Be consistent about naming conventions for classes. For instance, if a project is using BEM, continue using it.
• Use class names that are as short as possible but as long as necessary.
• Avoid nesting more than 3 selectors deep.
• Avoid nesting within a media query.

Order

• Use alphabetical order for declarations.
• Place @extends and @includes at the top of your declaration list.
• Place media queries directly after the declaration list.
• Place concatenated selectors second.
• Place pseudo-states and pseudo-elements third.
• Place nested elements fourth.
• Place nested classes fifth.

Formatting

• Use one space between property and value: width: 20px not width:20px.
• Use a blank line above a selector that has styles.
• Use one space between selector and {.
• Use double quotation marks.
• Use only lowercase, except for string values.
• Use a leading zero in decimal numbers: 0.5 not .5

Creating a component

A Component should be self contained and isolated

• ⚠️ Properties that should be avoided on block level
  • float, position, width, height, margin, z-index. position: relative; is an exception because the value do not effect layout outside the block
• 🛑 Don´t use margin top because it might cause 💥 margins to collapse