# CSS coding patterns that give you away as a junior developer.

Recently I read <a href="https://dev.to/alexeychang/js-coding-patterns-that-give-you-away-as-a-junior-developer-4h61" target="_blank" rel="noopener">JS Coding Patterns that give you away as a Junior Developer
</a> by Alexey Chang. Which is an interesting read! I encourage you to read it if you are a junior / medior JS developer.

Anyway, I figured I would do one for CSS! I often see CSS written by many different levels of developers, and it is always quite clear if it is written by a Junior or a Senior Front End Developer.

Let's take a look at what those patterns are and how you can avoid them. Making your code look better during reviews by your peers, and hopefully giving your career a boost.

## Multiple padding / margins
Oke so you want to add padding to margin to the top **and** the bottom. What I see a lot of junior developers do is as follows:
```css
margin-top: 10px;
margin-bottom: 30px;
```
Now, this CSS will work, but is it well written? No! You should aim to have all the margins or paddings grouped up. This is especially handy for responsive CSS work, cause you can just update 1 line of CSS instead of having to update both `margin-top` and `margin-bottom`.

So start trying to write it like this:
```css
margin: 10px 0 30px 0;
```
Reading it as 1 line can be daunting at first, so let me break it down for you. The first number stands for `margin-top`, the second number stands for `margin-right`, the 3th for `margin-bottom` and the last one for `margin-left`.

To give another example:
```css
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;
```
is the same as:
```css
padding: 10px 20px 30px 20px;
```

Another cool thing with this is that if you have the same values, like:
```css
padding: 20px 40px 20px 40px;
```

You can write it even shorter, like:
```css
padding: 20px 40px;
```

If a value is the same for both top / bottom or left / right, one number would suffice. 

If don't need padding or margin on a side, you can simply use `0` or `0px` like:
```css
padding: 20px 0;
```
This would give me both 20px padding at the top and the bottom, and 0 padding left and right.

## Using static values of Sass / CSS Variables
Variables bring great value to CSS. It allows us to change a color on 1 single place and automatically all the CSS that use that variable are now using that new color. 

If you are unfamiliar with CSS variables, check out: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" target="_blank" rel="noopener">Mozilla MDN</a>.

I often see newer developers opt to not use variables, sometimes because they feel it is hard to implement. Sometimes even because they just don't know they exist.

### When to use Sass / CSS variables?
This is a question I often receive and see floating around. In general I follow following rule: *if a value is used in more than 3 locations, make it a variabel*. 

This could be for: colors, typography, box-shadows, borders, animations and almost everything else.

### How to use CSS variables
Using CSS variables is very easy. As seen in the following code snippet:
```css
:root {
  --primary-color: #333;
}

p {
  color: var(--primary-color);
}
```

For the people wondering what `:root` is, `:root` stands for the absolute root of your site. So this CSS is loaded for the entire document. Making it a perfect location to set global variables such as colors.

Now if I update the `--primary-color` in `:root` the color of `p` is automatically updated!

## Not using :not(), :first-child and :last-child
Have you ever had the issue were you didn't want to apply CSS to the first or last element of a list? Well, there is some CSS syntax for that!

What often happens is that you have a list, like:
```html
<ul>
  <li>First Child</li>
  <li>Second Child</li>
  <li>Last Child</li>
</ul>
```
Now you want to create some spacing between the elements, so you add some CSS:
```css
li {
  padding: 0 0 20px 0;
}
```
The problem this creates is that it *also* applies this spacing to the last element. Which is something you don't always want.

If you use:
```css
li:not(:last-child) {
  padding: 0 0 20px 0;
}
```
The CSS is applied to the `<li>` element **except** the last child. Hence the `:not()` syntax. 

Now there is a lot you can do with `:not()` so it is worth checking out! I could write a complete post about just the cool things you can do with `:not()`.

It could also be the case you **only** want to apply CSS to the first or last element. Instead of making a seperate class for it, start using `first-child` and `last-child`.
```css
li:first-child {
  margin: 20px 0 0 0;
}
```
This will only give the first `<li>` element 20px margin-top! No need for extra classes.


## Conclusion
I hope you learned some cool new CSS patterns from this post. If you have any questions, I'm happy to help out!

Let me know what your thoughts are.