DEV Community

loading...

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

Collapse
karsvaniersel profile image
Kars van Iersel Author • 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.

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

1

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

2

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

3

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

4

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

Thread Thread
karsvaniersel profile image
Kars van Iersel Author

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