"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
Hi, my name is Kars van Iersel.
I'm a Software Engineer, located in The Netherlands. I enjoy creating high quality and delightful websites and web applications.
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.
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
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.
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
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
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
"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
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.
It's not faster to change in media queries, nothing to do with that.
is much more cleaner (and precise in computational terms -> take a look at how CSS is evaluated and rendered - painted by the browsers) than like it or not.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.
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.
In his original example, the person is using margin-top and margin-bottom. In that case, I think the shorthand looks cleaner.
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