DEV Community

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

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • 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.

Thread Thread
 
cooljasonmelton profile image
Jason Melton • Edited

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
JoelBonetR 🥇

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