---
# System prepended metadata

title: CSS Style Guide

---

# CSS Style Guide
1. List out selectors in order of tag, class, and id.
    - Within each section of the above, list both selectors and properties in alphabetical order.

2. Group related class selectors together
    - e.g.: .btn, .btn:hover, btn:visited
3. Space between the colon and value in a property


**Do Not**
- Avoid overriding colors defined by parent component CSS stylesheets unless absolutely needed


<br/>

#### Tag Selectors

```

p {
    attribute: x;
    battribute: y;
    cattribute: z;
}

```
<br/>

#### Class Selectors

```

.class {
    attribute: x;
    battribute: y;
    cattribute: z;
}

```
<br/>

#### ID Selectors

```

#id {
    attribute: x;
    battribute: y;
    cattribute: z;
}

```

<br/>

#### Element Customization
1. Buttons

<br/>

```

.exButton{
    border-radius: 5px;
    transition: .3s;
}

.exButton:hover{
    border-radius: 5px;
    transition: .3s;
}

```


Inline Styling
-
- **Inline Styling should be avoided whenever possible. Inline styling can cause significant problems across large code bases.
- **If there is a specific use case in which inline styling can not be avoided, please communicate this to the project team.

Note:
- There should not be a space in-between the colon and value
- There should be a space seperating each property-value pair

# Header
CSS stylesheets should have a header with the name of person who created the class
```
/////////////////////////////////////////////////////
//
//  Name: Some CSS stylesheet
//  Author: Some Author
//  Description: CSS stylesheet for some component
//
///////////////////////////////////////////////////

```