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

View post

I don't agree with multiple paddings / margins. Using the shorthand only when appropriate is a sign of a more experienced developer. You shouldn't be setting properties you don't actually want to set just so that you can use shorthand syntax. What if you want to change just one of the sides? You have to overwrite the whole declaration again, repeating 3 of the values just to change the 4th one.

Verbose can be better than concise where verbose is easier for humans to understand. There is sometimes too much of a drive towards concise over anything else.

Kars van Iersel • Sep 1 '20 • 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.

JoelBonetR 🥇 • Sep 2 '20 • 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:

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

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

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

@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 • Sep 2 '20

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