CSS/SCSS Coding Guidelines

Back to all 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
Kontaktmöglichkeiten ein bzw. ausblenden Kontaktmöglichkeiten ausblenden

Sie möchten mehr über unsere Dienstleistungen erfahren oder haben spannende Projekte? Sprechen Sie uns an, wir helfen Ihnen gerne weiter!

Anruf unter +49 228 28695920
E-Mail an
Projektanfrage zum Formular