CSS/SCSS Coding Guidelines

CSS/SCSS Coding Guidelines

It's not a adaptation of SOLID principles, patterns etc. Here you'll find the best practices which are usually ignored in real life projects.

Table of Contents

Follow CSS/SCSS naming conventions

Work in progress...

  • use bootstrap helper classes
  • follow bootstrap utility based class approach
  • if using custom class, name them generic for easy re-use
  • no content describing classes like `page-xy-team-list`, better use `list` or `list-thumbnails`
  • prefer classes instead ids due to cascade/override issues
  • never use !important in regular and fully controllable stylesheets

Aufbau css/sass files konstrukt

  • - components
  • - layout
  • - utilities
  • - vendor
  • frontend.scss
  • _variables.scss

Comments in CSS

For single line comments we use the following syntax:

// This is my single line comment in css

Our prefered syntax for multi line comments is inspired by the amazing bootstrap. Therefore we write multi line comments like this:

//
// This is my multi line comment in css
//
Back to all coding guidelines