Kars van Iersel

Posted on Sep 1, 2020 • Edited on Aug 25, 2021 • Originally published at karsvaniersel.com

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

#css #career

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.

Top comments (21)

James Tudsbury • Sep 1 '20

I don't agree with multiple paddings / margins. Using the shorthand only when appropriate is a sign of a more experienced developer. You shouldn't be setting properties you don't actually want to set just so that you can use shorthand syntax. What if you want to change just one of the sides? You have to overwrite the whole declaration again, repeating 3 of the values just to change the 4th one.

Verbose can be better than concise where verbose is easier for humans to understand. There is sometimes too much of a drive towards concise over anything else.

Kars van Iersel • Sep 1 '20 • Edited

Thanks for your input! Ye in some cases it can be best to only do 1 value. It will be very dependable on the scenario. In general tho, I see a lot of juniors just staying from it all together.

Also a problem could arise with doing a specific value. Let's say on dekstop it's padding-top: 20px; but on mobile it's: padding-bottom: 20px; This means you would need to write a media query to make padding-top: 0, and padding-bottom: 20px; So cases like this would be better to have a 1 liner.

But I do agree that you should not blindly go into 1 liners for every scenario. In most cases it is the better option, but for sure, as you said, not in all cases.

JoelBonetR 🥇 • Sep 2 '20 • Edited

You'll need the media query anyway, and there's different ways to reach it.

From the example I'll reply it using different approaches:

p {
  padding-top: 20px;
}
@media only screen and (max-width: $screen-sm) {
  p {
    padding-top: 0;
    padding-bottom: 20px;
  }
}

@media only screen and (min-width: $screen-sm) {
  p {
    padding-top: 20px;
  }
}
@media only screen and (max-width: $screen-sm) {
  p {
    padding-bottom: 20px;
  }
}

p {
  padding: 20px 0 0;
}
@media only screen and (max-width: $screen-sm) {
  p {
    padding: 0 0 20px;
  }
}

@media only screen and (min-width: $screen-sm) {
  p {
    padding-top: 20px 0 0;
  }
}
@media only screen and (max-width: $screen-sm) {
  p {
    padding: 0 0 20px;
  }
}

From this 4 options the most correct one is the second one and depending on the context I can say the fourth.
Why?

On the 1 and 3 there are unnecessary overrides. Also shorthands are less specific in CSS, so padding: 10px 5px 8px 16px; will be easily overwritten by any padding-[direction] property declaration such as padding-top: 15px;.

If you know these properties must keep like this (otherwise edit this same declarations) keep the option 2, if you are building a component and you are aware that this properties will be (or could be) context-dependant get the option 4 to avoid using !important statements and fall to padding-[direction] instead.

Knowing a language and its details is what makes a developer a Senior developer, using one think or another because it seems more trendy or fashion to you it's not.

Kars van Iersel • Sep 2 '20

Amazing examples, ye that is what I ment with based on the context. Great input man! Thanks :D

Nathan K. Campbell • Sep 1 '20 • Edited

"Now, this CSS will work, but is it well written? No! You should aim to have all the margins or paddings grouped up." - says who?

A lot of this seems like subjective preferences. A developer could have patterns of habit established by previous coding environments that favor one method over another. Don't be so quick to judge someone's level of experience just because they do something different from what you think is right

Kars van Iersel • Sep 2 '20

That is true, never judge a book by its cover! However I felt the need to write about it because it both makes the CSS cleaner and faster to change in media queries. Of course there are still cases where you don't need them in one line.

More often than not, I see the juniors use padding/margin-top, -right, -bottom, -left over 1 liners. So I figured this is something they struggle with, that is why I tried to explain as best I can about how the 1 liner is structured and how they could use it to their advantage.

JoelBonetR 🥇 • Sep 2 '20 • Edited

It's not faster to change in media queries, nothing to do with that.
For the "cleaner" statement I've to disagree, the most clean code is that one that is wrote in the manner that makes just what it needs to make.

padding-top: 20px;

is much more cleaner (and precise in computational terms -> take a look at how CSS is evaluated and rendered - painted by the browsers) than

padding: 20px 0 0;

like it or not.

If you are used to use the shorthand it's ok as long as it does not put you in trouble when needing to override something but that's all, there are 0 extra-advantages of using that.

Jason Melton • Sep 2 '20 • Edited

In his original example, the person is using margin-top and margin-bottom. In that case, I think the shorthand looks cleaner.

JoelBonetR 🥇 • Sep 2 '20

There's a bit of misconception about what cleaner means and depends on the context, but keeping with the example, using the shorthand you will be setting 4 properties when only 1 is needed which is bad from any point of view, specially when the project grows up and you need to override property values instead of declaring them, like it or not it's true computationally, and will be opinionated for human reading (unless you are a heavy user of shorthands and are used to them the padding-[direction] will be understood by any developer regardless of their knowledge level) but this second point is less important than the computational point of view one

Vitaliy • Sep 1 '20 • Edited

That li-thing i've always done as li+li { margin-top: 1em }.
May be useful when different tags are mixed and we want spacing just between same things.

𒎏Wii 🏳️‍⚧️ • Sep 2 '20 • Edited

I prefer using lobotomized owls *+*

JoelBonetR 🥇 • Sep 2 '20

this makes your code less optimized, so in performance terms it's an issue and must be avoided

𒎏Wii 🏳️‍⚧️ • Sep 3 '20

How so? What's less performant about *+* compared to the other ways you could express it?

JoelBonetR 🥇 • Sep 3 '20

selects all elements so it parses multiple times to the CSSOM, as more specific a selector is, more performance when applying it. li+li will apply to all li parent elements of another li, where + will apply to any element being parent of whatever other element.