DEV Community

loading...

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

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

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