DEV Community

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

Kars van Iersel on September 01, 2020

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

Read full post

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.