DEV Community

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

nathankc profile image
Nathan K. Campbell • Edited on

"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

karsvaniersel profile image
Kars van Iersel Author

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 profile image
JoelBonetR • Edited on

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.

Thread Thread
cooljasonmelton profile image
Jason Melton • Edited on

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

Thread Thread
joelbonetr profile image

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