{"id":67307,"date":"2023-06-07T21:01:08","date_gmt":"2023-06-07T13:01:08","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=67307"},"modified":"2023-06-15T20:40:45","modified_gmt":"2023-06-15T12:40:45","slug":"common-css-mistakes","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/common-css-mistakes\/","title":{"rendered":"10 Common CSS Mistakes Developers Often Make"},"content":{"rendered":"

CSS is a powerful tool that brings our websites to life. It\u2019s the magic behind the beautiful, interactive, and responsive designs that captivate users. However, like any tool, it\u2019s not immune to misuse or misunderstanding. Even the most seasoned developers can fall into common CSS pitfalls that can turn a dream website into a nightmare of bugs and inconsistencies.<\/p>\n

\"CSS<\/figure>\n

In this blog post, we\u2019ll shine a light on the ten common CSS mistakes developers make; whether you\u2019re a beginner just dipping your toes into the CSS pool, or an experienced developer looking to brush up on best practices, this post is for you.<\/p>\n

By understanding and avoiding these common CSS mistakes, you can write cleaner, more efficient code, ensure your websites look and function as intended across all browsers and devices, and ultimately provide a better user experience.<\/p>\n

1. Not Using a Reset CSS<\/h2>\n

Different browsers have different default styles for elements. For example, the default margin and padding for the <body><\/code> element might be different in Chrome and Firefox. This can lead to inconsistencies in how your website looks across different browsers.<\/p>\n

Example:<\/h3>\n

Let\u2019s say you have a simple HTML file:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Test Page<\/title>\r\n<\/head>\r\n<body>\r\n    <h1>Hello, world!<\/h1>\r\n<\/body><\/pre>\n
And you have some CSS:<\/p>\n
\r\nbody {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\nh1 {\r\n    margin: 0;\r\n    padding: 0;\r\n}<\/pre>\n
Even with this CSS, the <h1><\/code> might still have some margin in some browsers, because they have a default style for <h1><\/code> that includes a margin.<\/p>\n
Fix:<\/h3>\n
To fix this issue, you can use a reset CSS. A reset CSS is a set of styles that you apply at the beginning of your CSS file to reset the default styles of elements. Here\u2019s a simple reset CSS:<\/p>\n
\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n}<\/pre>\n
This CSS resets the margin<\/code> and padding<\/code> of all elements to 0<\/code>, and sets their box-sizing<\/code> to border-box<\/code>. This can help eliminate inconsistencies between browsers.<\/p>\n
However, this is a very simple reset and might not cover all elements and styles. There are more comprehensive reset CSS files available, like the Meyer\u2019s reset, which you can find online and use in your projects.<\/p>\n
Using a reset CSS can make your website look very plain, because it removes all default styles. After applying a reset, you\u2019ll need to style all elements yourself. But this gives you complete control over the look of your website.<\/p>\n
2. Not Using Shorthand Properties<\/h2>\n
CSS has shorthand properties that allow you to set multiple related styles at once. If you\u2019re not using them, your CSS can become unnecessarily long and harder to maintain.<\/p>\n
Example:<\/h3>\n
Let\u2019s say you have the following CSS:<\/p>\n
\r\n.box {\r\n    margin-top: 10px;\r\n    margin-right: 20px;\r\n    margin-bottom: 10px;\r\n    margin-left: 20px;\r\n}<\/pre>\n
This CSS applies margin to all four sides of elements with the class \u201cbox<\/code>\u201c. But it\u2019s quite verbose.<\/p>\n
Fix:<\/h3>\n
You can use the shorthand margin<\/code> property to set all four margins at once:<\/p>\n
\r\n.box {\r\n    margin: 10px 20px;\r\n}<\/pre>\n
This does the same thing as the previous CSS. The first value is the top and bottom margin, and the second value is the right and left margin.<\/p>\n
Here\u2019s another example with the background<\/code> property. Instead of this:<\/p>\n
\r\n.box {\r\n    background-color: #000;\r\n    background-image: url('image.jpg');\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n}<\/pre>\n
You can write this:<\/p>\n
\r\n.box {\r\n    background: #000 url('image.jpg') no-repeat center;\r\n}<\/pre>\n
Shorthand properties can make your CSS much shorter and easier to read and maintain. They can also help ensure consistency in your styles.<\/p>\n
However, be aware that when you use a shorthand property, any unspecified sub-properties are set to their initial values. For example, if you use the background<\/code> shorthand property and don\u2019t specify a background size, the background size is set to its default value of \u201cauto<\/code>\u201c.<\/p>\n
3. Using Inline Styles<\/h2>\n
Inline styles are CSS declarations that are applied directly within your HTML elements. While they might seem convenient for quick styling, they can lead to several issues:<\/p>\n
Maintenance Difficulty<\/strong>: If you have a large HTML file with many elements using inline styles, it can become very difficult to maintain and update your styles.<\/p>\n
Specificity Issues<\/strong>: Inline styles have a very high specificity. This means that they will override any styles declared in your external or internal CSS, making it difficult to override them when needed.<\/p>\n
Reusability<\/strong>: Inline styles are not reusable. If you want to apply the same styles to multiple elements, you would have to repeat the inline styles for each element.<\/p>\n
Example:<\/h3>\n
Here\u2019s an example of an inline style:<\/p>\n
\r\n<h1 style=\"color: blue; font-size: 2em;\">Hello, world!<\/h1>\r\n<\/pre>\n
Fix:<\/h3>\n
Instead of using inline styles, it\u2019s better to use external or internal CSS. Here\u2019s how you can do the same thing with internal CSS:<\/p>\n
\r\n<head>\r\n    <style>\r\n        .blue-heading {\r\n            color: blue;\r\n            font-size: 2em;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <h1 class=\"blue-heading\">Hello, world!<\/h1>\r\n<\/body>\r\n<\/pre>\n
And here\u2019s how you can do it with external CSS. First, create a CSS file (let\u2019s call it \u201cstyles.css\u201d):<\/p>\n
\r\n.blue-heading {\r\n    color: blue;\r\n    font-size: 2em;\r\n}<\/pre>\n
Then, link it in your HTML file:<\/p>\n
\r\n<head>\r\n    <link rel=\"stylesheet\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n    <h1 class=\"blue-heading\">Hello, world!<\/h1>\r\n<\/body>\r\n<\/pre>\n
Using external or internal CSS makes your styles easier to maintain and update, allows you to reuse styles, and avoids specificity issues. It\u2019s a best practice to avoid using inline styles whenever possible.<\/p>\n
4. Not Using Vendor Prefixes<\/h2>\n
Vendor prefixes are a way for browser makers to add new CSS features before they become part of the official CSS specifications. Not using them can lead to some CSS properties not being recognized by some browsers, causing inconsistencies in your design.<\/p>\n
Example:<\/h3>\n
Let\u2019s say you want to use the box-shadow<\/code> property, which is a relatively new addition to CSS:<\/p>\n
\r\n.box {\r\n    box-shadow: 10px 10px 5px #888888;\r\n}<\/pre>\n
This CSS will work in most modern browsers, but older versions of some browsers might not recognize the box-shadow<\/code> property.<\/p>\n
Fix:<\/h3>\n
To ensure that your CSS works in as many browsers as possible, you can use vendor prefixes. Here\u2019s how you can add a box shadow<\/code> with vendor prefixes:<\/p>\n
\r\n.box {\r\n    -webkit-box-shadow: 10px 10px 5px #888888; \/* Safari and Chrome *\/\r\n    -moz-box-shadow: 10px 10px 5px #888888; \/* Firefox *\/\r\n    box-shadow: 10px 10px 5px #888888; \/* non-prefixed, works in most modern browsers *\/\r\n}<\/pre>\n
This CSS will apply a box shadow in Safari, Chrome, Firefox, and most other modern browsers.<\/p>\n
However, keep in mind that vendor prefixes should be used as a last resort. The use of vendor prefixes can lead to bloated and hard-to-maintain code. It\u2019s better to write standard CSS and let tools like Autoprefixer add the vendor prefixes for you.<\/p>\n
Also, note that as CSS evolves and browsers update, the need for vendor prefixes decreases. Many properties that once required vendor prefixes now are universally supported without them. Always check the current browser compatibility for a CSS feature before deciding to use vendor prefixes.<\/p>\n
5. Using Too Specific Selectors<\/h2>\n
In CSS, specificity determines which CSS rule is applied by the browsers. If your selectors are too specific, it can make your CSS hard to override and maintain. It can also lead to unnecessary complexity in your CSS.<\/p>\n
Example:<\/h3>\n
Let\u2019s say you have the following CSS:<\/p>\n
\r\nbody div#container ul.nav li a {\r\n    color: blue;\r\n}<\/pre>\n
This selector is very specific. It selects an <a><\/code> element that is a descendant of an <li><\/code> element, which is a descendant of a <ul><\/code> with a class of \u201cnav\u201d, which is a descendant of a <div><\/code> with an ID of \u201ccontainer\u201d, which is a descendant of the <body><\/code>.<\/p>\n
Fix:<\/h3>\n
It\u2019s better to use classes and keep your selectors as simple as possible. Here\u2019s how you can simplify the previous selector:<\/p>\n
\r\n.nav a {\r\n    color: blue;\r\n}<\/pre>\n
This selector does the same thing as the previous one, but it\u2019s much simpler. It selects any <a><\/code> element that is a descendant of an element with a class of \u201cnav\u201d.<\/p>\n
Simplifying your selectors makes your CSS easier to read and maintain. It also reduces the likelihood of specificity conflicts, where more specific selectors override less specific ones.<\/p>\n
However, be aware that simplifying your selectors can also increase the likelihood of naming conflicts, where two elements have the same class name but should have different styles. To avoid this, you can use methodologies like BEM (Block, Element, Modifier) to name your classes in a way that reduces the likelihood of conflicts.<\/p>\n
6. Not Organizing Your CSS<\/h2>\n
If your CSS is not organized, it can be hard to find and change styles. This can lead to difficulties in maintaining your code, especially when working with large stylesheets or in a team environment.<\/p>\n
Example:<\/h3>\n
Let\u2019s say you have a CSS file with hundreds of lines of code, and the styles are all mixed up:<\/p>\n
\r\nh1 {\r\n    color: blue;\r\n}\r\n\r\n.footer {\r\n    background: black;\r\n}\r\n\r\nh2 {\r\n    color: green;\r\n}\r\n\r\n.header {\r\n    background: white;\r\n}<\/pre>\n
In this example, the styles for different sections of the website are scattered throughout the CSS file. This can make it hard to find the styles for a specific section when you need to update them.<\/p>\n
Fix:<\/h3>\n
A good practice is to organize your CSS in a logical way. Here\u2019s how you can organize the previous CSS:<\/p>\n
\r\n\/* Header *\/\r\n.header {\r\n    background: white;\r\n}\r\n\r\nh1 {\r\n    color: blue;\r\n}\r\n\r\nh2 {\r\n    color: green;\r\n}\r\n\r\n\/* Footer *\/\r\n.footer {\r\n    background: black;\r\n}<\/pre>\n
In this example, the styles are grouped by the section of the website they apply to. This makes it easier to find and update the styles for a specific section.<\/p>\n
There are many ways to organize your CSS, and the best method depends on the specifics of your project. Some developers prefer to organize their CSS by component, others prefer to organize it by page, and others prefer to organize it by type of style (typography, layout, color, etc.).<\/p>\n
In addition to organizing your CSS within each file, it\u2019s also a good idea to organize your CSS files themselves. For large projects, it can be helpful to split your CSS into multiple files (for example, one for typography, one for layout, one for colors, etc.) and then import them all into a main stylesheet using @import<\/code> statements. This can make your CSS easier to manage and maintain.<\/p>\n
7. Not Using CSS Variables<\/h2>\n
CSS variables, also known as custom properties, allow you to store specific values for reuse throughout your CSS. If you\u2019re not using them, you might find yourself repeating the same values over and over, which can make your CSS harder to maintain and update.<\/p>\n
Example:<\/h3>\n
Let\u2019s say you have a specific shade of blue that you use frequently in your CSS:<\/p>\n
\r\n.header {\r\n    background-color: #007BFF;\r\n}\r\n\r\n.button {\r\n    background-color: #007BFF;\r\n}\r\n\r\n.link {\r\n    color: #007BFF;\r\n}<\/pre>\n
In this example, the same color value is repeated three times. If you decide to change this color, you would have to find and update every instance of it in your CSS.<\/p>\n
Fix:<\/h3>\n
You can use a CSS variable to store this color value:<\/p>\n
\r\n:root {\r\n    --main-color: #007BFF;\r\n}\r\n\r\n.header {\r\n    background-color: var(--main-color);\r\n}\r\n\r\n.button {\r\n    background-color: var(--main-color);\r\n}\r\n\r\n.link {\r\n    color: var(--main-color);\r\n}<\/pre>\n
In this example, the color value is stored in a variable called --main-color<\/code>, and this variable is used wherever the color is needed. If you decide to change this color, you only need to update the variable, and the change will be applied everywhere the variable is used.<\/p>\n
CSS variables can make your CSS easier to maintain and update. They can also help ensure consistency in your styles. However, be aware that CSS variables are not supported in some older browsers, so if you need to support this browser, you might need to provide a fallback or use a preprocessor like Sass or Less, which have their own systems for variables.<\/p>\n
8. Not Considering Accessibility<\/h2>\n
Accessibility in web design means making your website usable for all people, regardless of their abilities or disabilities. This includes people with visual, auditory, cognitive, and motor impairments. If you\u2019re not considering accessibility in your CSS, you might be excluding a significant portion of your audience.<\/p>\n
Example:<\/h3>\n
Let\u2019s say you have a website with light gray text on a white background:<\/p>\n
\r\nbody {\r\n    color: #999;\r\n    background-color: #fff;\r\n}<\/pre>\n
This might look stylish, but it\u2019s hard to read for people with low vision or color vision deficiencies.<\/p>\n
Fix:<\/p>\n
To make your website more accessible, you can use high contrast colors for your text and background:<\/p>\n
\r\nbody {\r\n    color: #333;\r\n    background-color: #fff;\r\n}<\/pre>\n
This is much easier to read, even for people with vision impairments.<\/p>\n
In addition to color contrast, there are many other aspects of accessibility to consider in your CSS. Here are a few examples:<\/p>\n