Cascading Style Sheets (CSS) is an essential language used for styling websites. It allows you to customize the look and feel of your website, including its layout, colors, fonts, and more. However, CSS can be tricky to master, and even experienced developers make mistakes. In this blog post, we'll discuss 12 common CSS mistakes to avoid and how to fix them.
1. Not Using Shorthand Properties
Using shorthand properties can save you a lot of time and reduce the size of your CSS code. Shorthand properties allow you to set multiple properties at once, such as padding and margin, with a single line of code.
/* Bad */
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
/* Good */
div {
margin: 10px 20px 30px 40px;
}
In the example above, we used the margin shorthand property to set the top, right, bottom, and left margins of a div element with a single line of code.
2. Not Using Semantic HTML
Semantic HTML refers to using HTML tags that convey the meaning of their content. It makes your website more accessible and readable for both humans and search engines. When combined with CSS, semantic HTML can also make it easier to style your website.
<!-- Bad -->
<div class="header">
<div class="logo">Logo</div>
<div class="nav">Navigation</div>
</div>
<!-- Good -->
<header>
<h1>Logo</h1>
<nav>Navigation</nav>
</header>
In the example above, we used semantic HTML tags (<header>, <h1>, and <nav>) to create a header section for our website. This makes it easier for search engines to understand the structure of our website and for screen readers to read the content aloud.
3. Not Using Vendor Prefixes
Vendor prefixes are a way to add experimental or non-standard CSS properties to your website. They are used to ensure that your website looks and functions correctly across different browsers.
/* Bad */
div {
border-radius: 5px;
}
/* Good */
div {
-webkit-border-radius: 5px; /* Safari, Chrome */
-moz-border-radius: 5px; /* Firefox */
border-radius: 5px;
}
In the example above, we used vendor prefixes (-webkit- and -moz-) to add support for the border-radius property in Safari, Chrome, and Firefox.
4. Not Using CSS Reset or Normalize
CSS Reset or Normalize is a way to reset or normalize the default styles of HTML elements. This can make it easier to create consistent styles across different browsers.
/* Bad */
* {
margin: 0;
padding: 0;
}
/* Good */
/* Use a CSS reset or normalize */
In the example above, we used the universal selector (*) to remove the default margin and padding of all HTML elements. However, this can cause issues with some HTML elements, such as form elements. It's better to use a CSS reset or normalize to ensure that your website looks consistent across different browsers.
5. Not Using Comments
Comments are a way to add notes to your CSS code. They can help you and other developers understand the purpose and functionality of your code.
/* Bad */
div {
color: red;
font-size: 1rem;
}
/* Good */
/* This div is used to display error messages */
div.error {
color: red;
font-size: 1rem;
}
In the example above, we used a comment to explain the purpose of a div element with the class error.
6. Not Using Responsive Design
Responsive design refers to designing your website to adapt to different screen sizes and devices. This can make your website more accessible and user-friendly for mobile users.
/* Bad */
div {
width: 1000px;
}
/* Good */
div {
width: 100%;
max-width: 1000px;
}
In the example above, we used the width property to set the width of a div element to 1000 pixels. However, this can cause issues for mobile users with smaller screens. It's better to use a responsive design approach by setting the width property to 100% and the max-width property to 1000 pixels.
7. Not Using Flexbox or Grid
Flexbox and Grid are two powerful CSS layout systems that can make it easier to create complex layouts and align elements on your website.
/* Bad */
div {
float: left;
margin-right: 10px;
}
/* Good */
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.container > div {
margin-right: 10px;
}
In the example above, we used the float property to align a div element to the left and set a margin of 10 pixels to the right. However, this can cause issues with other elements on your website. It's better to use Flexbox or Grid to create complex layouts and align elements.
8. Not Using CSS Preprocessors
CSS preprocessors, such as Sass and Less, are tools that allow you to write CSS code in a more efficient and organized way. They can help you save time and reduce the size of your CSS code.
/* Bad */
div {
background-color: #FFFFFF;
color: #000000;
font-size: 14px;
font-weight: bold;
}
/* Good */
$bg-color: #FFFFFF;
$text-color: #000000;
$text-size: 14px;
$text-weight: bold;
div {
background-color: $bg-color;
color: $text-color;
font-size: $text-size;
font-weight: $text-weight;
}
In the example above, we used Sass to create variables for the background color, text color, text size, and text weight of an div element. This makes it easier to make changes to the styles of multiple elements at once.
9. Not Using CSS Frameworks
CSS frameworks, such as Bootstrap and Foundation, are pre-built CSS styles and components that can help you create websites more quickly and efficiently.
<!-- Bad -->
<div class="container">
<div class="row">
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>
</div>
<!-- Good -->
<!-- Use a CSS framework -->
In the example above, we used the Bootstrap grid system to create a responsive layout with three columns. This saves time and reduces the amount of CSS code you need to write.
10. Not Testing Your CSS Code
Testing your CSS code is essential to ensure that your website looks and functions correctly across different browsers and devices. You can use tools such as browser developer tools, online testing platforms, and user testing to identify and fix any issues with your CSS code.
/* Bad */
div {
width: 1000px;
}
/* Good */
div {
width: 100%;
max-width: 1000px;
}
In the example above, we used the width property to set the width of a div element to 1000 pixels. However, this can cause issues for mobile users with smaller screens. It's better to use a responsive design approach by setting the width property to 100% and the max-width property to 1000 pixels.
11. Not Minifying CSS Code
Not minifying CSS code can result in slower loading times for your website. Minify your CSS code by removing unnecessary whitespace and comments.
/* Before */
div {
color: red;
font-size: 16px;
margin-top: 20px;
padding: 10px;
}
/* After */
div{color:red;font-size:16px;margin-top:20px;padding:10px;}
You can use minifying tools to minify your CSS code.
12. Not Organizing CSS Code
Not organizing CSS code can make it difficult to maintain and update. Use a consistent naming convention and organize your CSS code into sections that correspond to different parts of your website.
/* Bad */
div {
color: red;
font-size: 16px;
margin-top: 20px;
padding: 10px;
}
/* Good */
/* Header Section */
.header {
color: red;
font-size: 16px;
}
/* Main Content Section */
.main {
margin-top: 20px;
padding: 10px;
}
Conclusion
Avoiding these common CSS mistakes can help you create websites that look great and function well across different browsers and devices. By following best practices and testing your CSS code, you can create websites that are user-friendly, accessible, and visually appealing.
Top comments (8)
I’d advocate using auto prefixes over remembering to use them and know the spec and browser requirements, it’s just not worth your headspace.
I’ve also got a gripe with shorthand vs long.
Your browser will compute to long so the only thing you are doing is saving some bytes. But as shorthand value syntax is quite hard to remember it might be easier for future you and your team to just use full longhand where it makes sense. Also good to know that shorthand overrides longhand or was it the other way around… look I’m aging I used to know this stuff but life’s to short. Make your code stupid and gain productivity.
First of all Thank you for the comment, I know shorthand are not easy to keep in memory, but once you wrap your head around them they are very productive(in my opinion), because they use less code space and that can lead to slight effect on your website performance, this is just my small opinion 😁
I’ve been writing css from muscle memory for over 10 years and I think what you said speaks volumes , some things have not stuck in my head and I don’t think they ever will. Un-head-wrapable if you like. When it comes to the productivity of others and the overall success of your team, not remembering wins out. And also shorthand will have you dealing with values you might have not wanted to set.
Anyway thanks for the chat 🫡
I respect your opinion sir 😁 thank you for your opinion I will remember it 🤞
Great set of tips - with 2 bonus ones to take the total to 12 😉
By the way, according to MDN,
border-radiusno longer requires a vendor prefix,Oh thank you for your generous comment 😁❤
Most of these suggestions don't concern the design, but rather the overall CSS code organization.
Some notes:
border-radiusanymore);backgroundandfontare especially tricky for that;Anyway, I'm glad that someone is still pushing to adopt best practices for CSS. All around, it seems that everybody thinks that Tailwind is the best thing after the invention of sliced bread.
Very well explained, I found it useful and liked it 💯