Whether you are someone who has just started web development or someone who has a lot of experience, the chances of not using CSS are very slim and deep down we all hate it for its complexity. But have you ever wondered what we should do to make your life easier? I'll tell you what you haven't done yet so that you don't start making your life so difficult.
Not using fallback fonts
Every computer doesn't have every font that you would use also if you have imported a font from a CDN like Google fonts, sometimes for some reason, it may not get downloaded so it's always better to use common fallback fonts similar to them.
for example here we used san serif as a fallback font.
body {
font-family: Roboto, Ariel, sans-serif;
}
Complicating selectors
When you can use a direct class for a particular element, you should not complicate it by using different nested selectors. Sometimes there may also be a problem of specificity. You can also use a class for simplicity and it will be easier to read and understand.
for example Don't do this
Header nav > ul > a.nav-links {
list-style-type: none;
}
instead, do this
.nav-links {
list-style-type: none;
}
Using Color names
You should avoid using color names as not every browser displays the same color. If you want colors to function equally in all browsers, you should use HEX, RGB, or HSL. By using hex color values it is guaranteed that we can use 16,777,216 colors each. Not all colors have 16 million 24-bit names. There are actually only 17 W3C-standard color names.
for example The browser displays what it thinks Teal color is.
.box {
background-color: Teal;
}
instead, do this
.box {
background-color: #008080;
}
Using px for everything
Using 'px' everywhere is not relevant, if we use 'px' units, every user will see the same sized elements, and this is not good because each user has a different monitor screen size. Instead of 'px' units, if we use relative units like 'rem', 'em', the elements will scale appropriately according to the size of the monitor screen.
for example Don't do this
p {
font-size: 20px;
line-height: 28px;
padding: 16px;
}
instead, do this
p {
font-size: 1.3rem;
line-height: 1.6;
padding: 1em;
}
Repeating the same code
Don't repeat your code when there are the same styles for multiple elements, just group the selectors. To group selectors, separate each selector with a comma. It would be better to group the selectors so that the number of lines of code is minimized.
for example Don't do this
#home-section {
background: #f5f5f5;
color: #202020;
}
.about-section {
background: #f5f5f5;
color: #202020;
}
instead, do this
#home-section,
.about-section {
background: #f5f5f5;
color: #202020;
}
Using high z-index values
Many developers use a really high z-index value to put an element in front. And it becomes difficult when you want to put another element in front of others. The z-index value starts increasing much higher. The solution is to use moderate values so that it doesn't become difficult in the long run.
for example Don't do this
.modal-container {
z-index: 123;
}
.modal {
z-index: 1234567;
}
instead, do this
.modal-container {
z-index: 1;
}
.modal {
z-index: 2;
}
Not using CSS Shorthands
There are many properties where you can use both shorthand and longhand methods. You should try to use shorthand properties in most of the cases possible. Not using CSS shorthand will not only take more time to code but will also increase the number of lines of code.
for example Don't do this
.container {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 0;
margin-left: 3em;
}
instead, do this
.container {
margin: 1em 2em 0 3em;
}
The list of do's and don'ts is long and you can learn more about it as you work on more projects. One thing to keep in mind is to always try to keep your code simple and easy to understand. Complicating the code without visible performance gains can shorten the lifespan of a project.