<commit_before><h3 id="philosophy">Philosophy</h3>

At 10up, we value content and the experience one will have reading it. We write CSS with this in mind and don't sacrifice our clients' most important assets over the latest, shiniest, half-supported CSS features just for the sake of using them. CSS should help enhance content, not bury it under "cool" distractions.

Our websites are built mobile first, using performant CSS. Well structured CSS yields maintainability and better collaboration which ultimately yields better client experiences.

<h3 id="syntax-formatting">Syntax and Formatting {% include Util/top %}</h3>

Syntax and formatting are keys to a maintainable project. By keeping our code style consistent, we not only help ourselves debug faster but we're also lessening the burden on those who will have to maintain our code (maybe ourselves too!)

#### CSS Syntax

CSS syntax is not strict and will accept a lot of variations, but for the sake of legibility and fast debugging, we follow basic code styles:

* Write one selector per line
* Write one declaration per line
* Closing braces should be on a new line

Avoid:

```css
.class-1, .class-2,
.class-3 {
width: 10px; height: 20px;
color: red; background-color: blue; }
```

Prefer:

```css
.class-1,
.class-2,
.class-3 {
  width: 10px;
  height: 20px;
  color: red;
  background-color: blue;
}
```

* Include one space before the opening brace
* Include one space before the value
* Include one space after each comma-separated values

Avoid:

```css
.class-1,.class-2{
  width:10px;
  box-shadow:0 1px 5px #000,1px 2px 5px #ccc;
}
```

Prefer:

```css
.class-1,
.class-2 {
  width: 10px;
  box-shadow: 0 1px 5px #000, 1px 2px 5px #ccc;
}
```

* Try to use lowercase for all values, except for font names
* Zero values don't need units
* End all declarations with a semi-colon, even the last one, to avoid error
* Use double quotes instead of single quotes

Avoid:

```css
section {
  background-color: #FFFFFF;
  font-family: 'Times New Roman', serif;
  margin: 0px
}
```

Prefer:

```css
section {
  background-color: #fff;
  font-family: "Times New Roman", serif;
  margin: 0;
}
```

If you don't need to set all the values, don't use shorthand notation.

Avoid:

```css
.header-background {
  background: blue;
  margin: 0 0 0 10px;
}
```

Prefer:

```css
.header-background {
  background-color: blue;
  margin-left: 10px;
}
```

#### Declaration ordering

Declarations should be ordered alphabetically or by type (Positioning, Box model, Typography, Visual). Whichever order is chosen, it should be consistent across all files in the project.

Sass ordering:

1. @extend
2. Regular styles (allows overriding extended styles)
3. @include (to visually separate mixins and placeholders) and media queries
4. Nested selectors
<commit_msg>Updating SCSS ordering<commit_after><h3 id="philosophy">Philosophy</h3>

At Fireant, we value content and the experience one will have reading it. We write CSS with this in mind and don't sacrifice our clients' most important assets over the latest, shiniest, half-supported CSS features just for the sake of using them. CSS should help enhance content, not bury it under "cool" distractions.

Our websites are built mobile first, using performant CSS. Well structured CSS yields maintainability and better collaboration which ultimately yields better client experiences.

<h3 id="syntax-formatting">Syntax and Formatting {% include Util/top %}</h3>

Syntax and formatting are keys to a maintainable project. By keeping our code style consistent, we not only help ourselves debug faster but we're also lessening the burden on those who will have to maintain our code (maybe ourselves too!)

#### CSS Syntax

CSS syntax is not strict and will accept a lot of variations, but for the sake of legibility and fast debugging, we follow basic code styles:

* Write one selector per line
* Write one declaration per line
* Closing braces should be on a new line

Avoid:

```css
.class-1, .class-2,
.class-3 {
width: 10px; height: 20px;
color: red; background-color: blue; }
```

Prefer:

```css
.class-1,
.class-2,
.class-3 {
  width: 10px;
  height: 20px;
  color: red;
  background-color: blue;
}
```

* Include one space before the opening brace
* Include one space before the value
* Include one space after each comma-separated values

Avoid:

```css
.class-1,.class-2{
  width:10px;
  box-shadow:0 1px 5px #000,1px 2px 5px #ccc;
}
```

Prefer:

```css
.class-1,
.class-2 {
  width: 10px;
  box-shadow: 0 1px 5px #000, 1px 2px 5px #ccc;
}
```

* Try to use lowercase for all values, except for font names
* Zero values don't need units
* End all declarations with a semi-colon, even the last one, to avoid error
* Use double quotes instead of single quotes

Avoid:

```css
section {
  background-color: #FFFFFF;
  font-family: 'Times New Roman', serif;
  margin: 0px
}
```

Prefer:

```css
section {
  background-color: #fff;
  font-family: "Times New Roman", serif;
  margin: 0;
}
```

If you don't need to set all the values, don't use shorthand notation.

Avoid:

```css
.header-background {
  background: blue;
  margin: 0 0 0 10px;
}
```

Prefer:

```css
.header-background {
  background-color: blue;
  margin-left: 10px;
}
```

#### Declaration ordering

Declarations should be ordered alphabetically or by type (Positioning, Box model, Typography, Visual). Whichever order is chosen, it should be consistent across all files in the project.

Sass ordering:

1. Structure
2. Style
3. Typography
4. @mixin/includes
5. Psuedo Classes
6. Child Selectors

{'fraction_non_alphanumeric': 0.0947935368043088, 'fraction_numerical': 0.02118491921005386, 'mean_word_length': 4.14404432132964, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5184058', 'n_tokens_mistral': 1841, 'n_tokens_neox': 1683, 'n_words': 767}