10 Common CSS Mistakes That Web Developers Often Make
The goal isn't to just write CSS that works. Code CSS that is efficient and easy to maintain
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 intuitive 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.
Using hexadecimal values eg. color: #4169E1; hence becomes something that all developers should adopt. It ensures specificity, is supported by all browsers, and gives back to you the control to decide exactly how you want your web page to be displayed.
Note: An efficient way for finding and using hexadecimal values is by first putting in the name of the closest color to the desired shade, and then inspecting the element to find the hex value using the color dropper.
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.
This ensures that the website scales proportionally according to the user’s choice of zoom level and screen/browser size.
So, instead of declaring the sizes in absolutes,
p {
font-size: 16px;
line-height: 20px;
margin-bottom: 8px;
}do this instead:
p {
font-size: 1rem;
line-height: 1.25em;
margin-bottom: 0.5rem;
}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.
So, after you use your favorite font, say Helvetica, always make sure to list fallback fonts that the browser can use in case it isn't supported.
Instead of writing this,
#selector {
font-family: Helvetica;
}expand the code by font fallbacks such as:
#selector {
font-family: Helvetica, Arial, sans-serif;
}Now, even if the browser doesn't support Helvetica, it would fall back to the second most preferred option Arial before going to the browser default.
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;This can easily be condensed into a single line using the CSS shorthand for font:
font: bold 14px/1.5 Helvetica;Similarly, this list of properties for a background image:
background-image: url(background.png);
background-repeat: repeat-y;
background-position: center top;can be written as:
background: url(background.png) repeat-y center top;Why are we doing this? The reason is simple. It not only reduces your CSS file size but also makes the stylesheet easier to read and more organized.
Here’s a list of CSS shorthands to help you write cleaner code. It’s all about ingraining it into your coding habits, but once you do it, there's no going back!
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 {...}First of all, the header specification is absolutely unnecessary since an ID, having the highest specificity, has already been used (IDs are unique and only associated with one element). Moreover, an unordered list (ul) always has list items (li) within. So having to mention that becomes pointless. The same selector can now be written as:
#nav ul a {...}With CSS there are only two levels of specificity — specific and not specific enough. Including all those extra elements might make it look ‘safe’ but are actually unnecessary and are only adding to the length of your stylesheet.
As a general rule, your selectors should be as short as possible. Be just as specific as is necessary for it to work.
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.
Class selectors can also be used for several HTML elements on the same page, unlike IDs which are unique to each element. Being able to reuse styles is one of the advantages of CSS.
To maintain a consistent convention, use only the class attributes to define styles and IDs while integrating interactivity with Javascript instead.
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.
While this is a good thing for someone who does not use CSS, it is important to first reset these values when you put your own styles into the page. These values vary from browser to browser, hence a CSS Reset is the only way to ensure that all your styles are uniform and effective.
This entails resetting all the styles of all the HTML elements to a predictable baseline value. Once you do this, you can style all the elements on your page as if they were the same to start with. A blank slate.
An easier but incomplete way to do this is by resetting the margin and padding using a universal selector:
* {margin:0; padding:0;}For a complete reset, however, you can use the Eric Meyer reset (modifying it as per your choice), to reset borders, underlines, and colors of elements like list items, links, and tables so that you don’t run into unexpected inconsistencies between web browsers.
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
}A better way to write this is by combining them, with the selectors separated by a comma (,):
#selector-1, .selector-2 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}This is not just more efficient, but also reduces maintenance time and page-load speed.
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.’
However, while HTML provides structure, it cannot always position elements on the exact spot of a page you want it to appear, which is where we use CSS to scaffold the layout of the page. Once an element is put into the right place on the page, it’s easy to style it without worrying about the display and position. This is why Layout CSS should be separated from Design CSS.
Instead of putting the layout as well as design properties together,
.article {
display: inline-block;
width: 50%;
margin-bottom: 1em;
font-family: sans-serif;
border-radius: 1rem;
box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, .2);
}
.sidebar {
width: 25%;
margin-left: 5px;
}<div class="article"></div>
<div class="article sidebar"></div>
Separate the design and layout of elements:
/* layout */
.article, .sidebar {
display: inline-block;
}
.article {
width: 50%;
margin-bottom: 1em;
}
.sidebar {
width: 25%;
margin-left: 5px;
}
/* display */
.card {
font-family: sans-serif;
border-radius: 1rem;
box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, .2);
}<div class="article card"></div>
<div class="sidebar card"></div>
This ensures separation of concerns, which is a common software engineering principle that helps keep our code maintainable and easy to understand.
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.
- Comment your CSS: A good tip is to add a block of comments between logical sections in your stylesheet too, to help locate different sections quickly when scanning through, or even give you something to search for to jump right into that part of the CSS. You don’t need to comment every single thing in your CSS, as much of it will be self-explanatory. What you should comment are the things where you made a particular decision for a reason.
- Create Logical Sections in your Stylesheet: It is a good idea to have all of the common styling first in the stylesheet. This means all of the styles which will generally apply unless you do something special with that element. You will typically have rules set up for body, p, h1, h2, h3, links, and tables. After this, you can have a few utility classes, or properties, things you know you will want to apply to lots of different elements. Finally, include CSS for specific things, broken down by the context, page, or even component in which they are used.
Also read:
