This content originally appeared on DEV Community and was authored by Stas Melnikov
Mobile First without overrides
There is the mobile first approach dictates we should create interfaces from small (such as cell phones, watch, etc) to large devices (desktop, tv, etc).
So developers use the min-width media feature. As a result, they'll get a lot of overrides. For example, I add paddings with overriding.
I think it will become not readable when you have a lot of code. So I propose to save the idea of the mobile first approach but think about ranges of devices and add styles only when they're needed using the min-width and max-width features.
For example, I use different paddings but the ranges help to avoid overrides.
don't do this
.example {
padding: 1rem 1.5rem;
}
@media (min-width: 481px) {
.example {
padding: 2rem 2.5rem;
}
}
@media (min-width: 961px) {
.example {
padding: 3rem 3.5rem;
}
}
you can use this instead
@media (max-width: 480px) {
.example {
padding: 1rem 1.5rem;
}
}
@media (min-width: 481px) and (max-width: 960px) {
.example {
padding: 2rem 2.5rem;
}
}
@media (min-width: 961px) {
.example {
padding: 3rem 3.5rem;
}
}
Using shorthands as needed
Usually, developers like to use the CSS shorthand syntax. Yes, it will work. But you don't think shorthand always defines values for a few properties. For example, the background sets the value for 10 properties!
Thus that will lead to overrides of properties and difficult maintaining in the future. So just don't use the shorthand syntax, if you aren't sure that is really needed. For example, just use the background-color property to change the element's background color.
don't do this
.example {
background: tomato;
}
you can use this instead
.example {
background-color: tomato;
}
margin and padding without 0 values
A lot of time there is the practice of using the margin and padding shorthand that leads to complication of code maintaining in the future. The problem is people set 0 value when it doesn't need. For example, if they have to set top and bottom margins to 1rem they'll write padding: 1rem 0;
In this case, the 0 value will lead to you have to override it in the future. And do that every time. So you will go to overrides hell.
As a solution, I recommend using margin and padding shorthand only when you have to set values for all sides. And if you have to set value for specific sides use single margin-* and padding-* properties.
don't do this
.example {
padding: 1rem 0;
}
you can use this instead
.example {
padding-top: 1rem;
padding-bottom: 1rem;
}
P.S.
I'm always open to any opportunities to share knowledge about CSS and HTML with you. So I can:
? answer any of your questions about CSS and HTML (free)
? make written code review of your projects (paid)
?? tell about what you should learn (paid)
Just chat me on melnik909@ya.ru.
Also you can say thank you:
? Buy a shirt, stickers, or other goods for frontenders: https://www.redbubble.com/shop/ap/79109127
? Support my work: https://www.patreon.com/melnik909
Follow me:
? Twitter: https://twitter.com/melnik909
? Facebook: https://www.facebook.com/melnik909/
? Instagram: https://www.instagram.com/s.melnik909/
P.S.S. This post was written with the support of my sponsors: Ashlea Gable, Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten.
This content originally appeared on DEV Community and was authored by Stas Melnikov
Stas Melnikov | Sciencx (2021-07-19T15:00:10+00:00) The techniques to help simplify CSS. Retrieved from https://www.scien.cx/2021/07/19/the-techniques-to-help-simplify-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.