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

[Kars van Iersel]

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

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.

[Kars van Iersel]

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