Formatting

• In our code we use an indentation of four spaces throughout the whole application.
• For the class names we prefer dashes over camel-casing or underlines.
• We are trying to avoid styling by ID selectors if it’s not necessary.
• For a rule with multiple selectors give each selector their own line.
• Between the selectors and the opening brace { we put in a space.
• The closing braces } we put on a new line.
• Between rule declarations we put a blank line in between.

Good code example on end of the page.

These code conventions are inspired by the airbnb css / sass styleguide.

File Structure

For the file structure we use the 7-1-pattern but we’ve removed those folders that weren’t used at all. If needed these folders can be added. The full pattern looks like this:

1. base/
2. components/
3. layout/
4. pages/
5. themes/
6. abstracts/
7. vendors/

to

1. main.scss

The 7-1-pattern file structure was inspired by the sass guidelines.

Preprocessors

As CSS preprocessor we use SCSS due to the fact that we dealt with it in our lecture and already are familiar with it.

Vendors

For the app to look the same on every browser we use Normalize.css as basic definition for all elements.