Recently I read JS Coding Patterns that give you away as a Junior Developer 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:

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:

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:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;

is the same as:

padding: 10px 20px 30px 20px;

Another cool thing with this is that if you have the same values, like:

padding: 20px 40px 20px 40px;

You can write it even shorter, like:

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:

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: Mozilla MDN.

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:

: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:

<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:

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:

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.

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.