DEV Community

Vaibhav Kumar
Vaibhav Kumar

Posted on

10 CSS Mistakes You Should Avoid for a Flawless Website Design

#webdev #css #codenewbie #design

coverImage
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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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 */
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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 -->
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 •

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.

Collapse
 
devxvaibhav profile image
Vaibhav Kumar •

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 😁

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 •

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 🫡

Thread Thread
 
devxvaibhav profile image
Vaibhav Kumar •

I respect your opinion sir 😁 thank you for your opinion I will remember it 🤞

Collapse
 
ant_f_dev profile image
Anthony Fung •

Great set of tips - with 2 bonus ones to take the total to 12 😉

By the way, according to MDN, border-radius no longer requires a vendor prefix,

Collapse
 
devxvaibhav profile image
Vaibhav Kumar •

Oh thank you for your generous comment 😁❤

Collapse
 
maxart2501 profile image
Massimo Artizzu •

Most of these suggestions don't concern the design, but rather the overall CSS code organization.

Some notes:

  • if you're using a preprocessor - or in general a build system - let an autoprefixer do the job of inserting vendor-prefixed variants for you: just set up the target browsers, and the autoprefixer does the job, and only when necessary (e.g.: it won't add them for border-radius anymore);
  • keep in mind that shorthand properties are double edged swords - meaning that they could override declarations that you don't want to be overridden: background and font are especially tricky for that;
  • comment your code, but remember that comments should explain why, not what;
  • it's notable that you mentioned responsive design without talking about media (or container!) queries: it's true that you can achieve responsiveness without media queries, but it's kind of limiting - also because device sizes aren't everything when it comes to responsiveness;
  • the usage of CSS frameworks is very debatable: if you've been given a design system that's not based on any of them, you'll end up adjusting the one you chose to your needs, de facto cancelling its benefits; also remind that utility classes are a violation of the separation of concerns principle;
  • there are several way to "test" your CSS - I think you should be more specific here; also, I'll add visual regression tests to your arsenal;
  • and the example for point 10 is the same of point 6.

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.

Collapse
 
margishpatel profile image
margishpatel •

Very well explained, I found it useful and liked it 💯

Read next

ariflogs profile image

Building an UI library that does not look generic!

Arif Hossain -

mayank_mohapatra profile image

Creating a Multilingual Expense Tracker with Tolgee

Mayank Mohapatra -

undolog profile image

Upgrading from Nextra v2 to Nextra v3: A "Quick" Guide

Giovambattista Fazioli -

neotechy profile image

Top 10 CodeIgniter Plugins and Libraries to Enhance Your Project

NeoTechy -