Cascading Style Sheets (CSS) is one of the most important pillars holding a webpage together. It gives you the power to bring a sense of style and design into a simple HTML layout. From font families and colors to alignment and display, it does it all.
On top of that, it is unarguably one of the simplest and most unintuitive languages to work with. After all, what’s easier than being able to change the characteristics of an element through a simple list of properties written almost in pure English?
But despite its deceptively uncomplicated exterior, CSS is an intricate system, especially when used in a high-scale, high-performance level. Given the sheer number of ways to select an element, not to mention the number of properties that can be applied to it, and then how the presentation changes when multiple browsers and devices come into the picture — it’s easy to get tripped up with CSS.
Here are some common mistakes that most web developers make, and how identifying and avoiding them can help you write better and more efficient CSS!
1. Using Color Names Instead of Hexadecimal
When you say color: blue; you’re essentially telling the computer to display whatever shade of color it thinks blue is. By doing this, you’re giving the browser control over how your web page should be displayed, and as a developer, this is something you should never do. By vaguely naming the color as blue, it can easily differ from the shade of blue that you had in mind, and worse it can also vary from browser to browser.
2. Hard Coding px Instead of Relative Units
While it sometimes becomes imperative to use absolute px values, you should always use relative measurements such as em, _% _(percent), rem (root-Em), and others whenever possible.
3. Not Using Font Fallbacks
No matter how beautiful a particular font makes your page look, or how much it catches the eye, you always have to consider that not all font types are supported by all computers. If you’re using a font that some browsers do not support, it means that your web page might not be as beautiful and eye-catching as you’re designing it to be for all users.
4. Not Using CSS Shorthands
Take a look at the CSS below:
font-family: Helvetica;
font-size: 14px;
font-weight: bold;
line-height: 1.5;
5. Over Qualifying Selectors
Just like every other thing in excess, too much specificity is a bad thing. And more often than not, it is not even necessary. Take a look at the CSS below:
header #nav ul li a {...}
6. Using ID’s instead of Classes
The most cogent argument against using ID’s is that it has a much higher specificity than classes, which is why it becomes hard to overwrite and extend your styles. A class on its own can’t overwrite styles belonging to an ID. To “beat” the ID, you would need either more IDs or to use !important, which can begin specificity wars in your stylesheets.
7. Not Using CSS Reset
If you have ever displayed an HTML page with no CSS styling, you know that the web browser itself “styles” the page using some default values as a fallback. The text has a particular font size and style, the margin and padding are set to certain values.
8. Repetitive Code (Redundant Selectors and Properties)
In general, repeating yourself while coding is not considered a good practice. CSS is no different. Take a look at the code below:
#selector-1 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}
.selector-2 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}
9. Not Separating Design from Layout
The job of CSS is to provide styling, and the job of HTML is to provide structure. Generally, HTML should be written in a way that captures the information hierarchy of the page, ignoring any design concerns. Afterward, CSS can be added to make things ‘look nice.’
10. Writing Unorganized CSS
Instead of writing your styles just as you think of them, do yourself a favor and organize your code neatly. This will ensure that next time you come to make a change to your file, you’re still able to navigate it.
#web-development #front-end-development #programming #css
