<Meta title='1.Docs|03-Coding Style'/>

# General Styleguide
**Consistency** is an important value for a successfull framework. So we define some rules how to write the code.

## Avoid !important & IDs
Please do not use !important or IDs for styling. We prefer classes. An ID should only use for JS. The exception for `!important` is in **utilities.** There it would be possible to use it.

```
.u-hide {
  display: none !important;
}
```

## Line-Breaks, Whitespaces (One tab = two whitespaces)
````scss
.c-button {
  margin: 12px;
  padding: 24px;
}
````

## Nesting: Don't do it  

**Don't**
````scss
.c-header {
  &__container {}
}
````

**Do**
````scss
.c-header {}
.c-header__container {}
````


## OOCSS
**Don't**
````scss
.c-title {
  font-size: 2.1rem;
}

.c-header .c-title {
  font-size: 2.4rem;
}
````

````html
<header role="banner" class="c-header">
  <h1 class="c-title">Title</h1>
</header>
````
**Do**
````scss
.c-title {
  font-size: 2.1rem;
}

.c-title--hero {
  font-size: 2.4rem;
}
````

````html
<header role="banner" class="c-header">
  <h1 class="c-title c-title--hero">Title</h1>
</header>
````

## Separate everything in different files

**Don't**  
````scss
// File: _components.title.scss
.c-title {}

.c-lead {}
````

**Do**  
````scss
// File: _components.title.scss
.c-title {}

// File: _components.lead.scss
.c-lead {}
````

## Use not to generic or specific class names

```
// Bad: So specific
.c-button--red {}

// Bad: It can contain everything
.c-button--alternative {}

// Perfect: Super Light Button
.c-button--ghost {}
```

## Do not use shortnames

```
// Bad: a short name
$fw-light: 300;

// Perfect: someone who what do you mean
$font-weight-light: 300;
```

## JS Hooks
Sometimes we need a class for only JS Hooks. It is important that Javascript does not give the elements a style. For all JS Hooks Classes we use the `js' Prefix.

````html
<div class="c-accordion js-accordion"></div>
````


## Importing Files
Catwalk has only one file to handle the imports: `application.scss`

**Don't**  
````
@import '_settings.color.scss',
        '_settings.border.scss';
````

**Do**  
````scss
@import 'settings.color';
@import 'settings.border';
````