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

Wir verwenden Cookies, um Ihnen einen bestmöglichen Service zu bieten. Die Daten werden zur Optimierung unserer Webseite und zu Online-Marketingzwecken erhoben und zu statistischen Zwecken ausgewertet. Klicken Sie auf „OK”, um der Nutzung von Cookies zuzustimmen. Weitere Informationen finden Sie in unserer Datenschutzerklärung