# Common CSS Mistakes Frontend Developers Make

Cascading Style Sheet (CSS) is a powerful stylesheet language that helps front-end developers style plain web pages. However, there are mistakes developers can make while using this stylesheet language. These mistakes will hinder developers from writing efficient code. This article examines some common mistakes and proffers a solution for each. To get the best from this guide, you are expected to have a fundamental understanding of CSS.

Below are the CSS mistakes that we will cover:
- [Overusing "!important"](#Overusing-"!important")
- [Using Absolute Units](#Using-Absolute-Units)
- [Using Inline Styles](#Using-Inline-Style)
- [Not using CSS Resets](#Not-using-CSS-Resets)
- [Not using CSS one-liners](#Not-using-CSS-one-liners)
- [Not using Selectors Efficiently](#Not-using-Selectors-Efficiently)
- [Ignoring Browser Compatibility](#Ignoring-Browser-Compatibility)
- [Using Color names instead of Hex code](#Using-Color-names-instead-of-Hex-code)
- [Additional mistakes we overlook](#Additional-mistakes-we-overlook)

## Overusing "!important"
### What is !important?
`!important` is a keyword in CSS that helps us set a property value to take a higher preference (to be more important) than other styling options. For instance, if you apply the `!important` declaration to an element style, that style will override all other styles for that property category.

Here is the syntax:

selector {
  property: value !important;
}

For example, if you have a header element - `h1` like this:

<h1 class="css-mistake">CSS Mistakes</h1>

Then you apply the following style rules:

h1 {
  color: red;
}

.css-mistake {
  color: green;
}

By default, the header text will have a color of “green” because the class selector has a higher specificity selector compared to the element (tag) selector. But with `!important`, you can override that styling rule (thereby making the element (tag) selector override the class selector).

With this, the color of the header text will be red, taking precedence over green which the class selector sets.

h1 {
  color: red !important;
}

### The Problem with overusing "!important"
Overusing `!important` will lead to specificty war - a state whereby styles begin to override each other and not working as the author of the stylesheet as defined them. The next section proffers solution to this issue by itemizing the right instances for the usage of `!important`.

### When should it be used?
Just like the title of this section says - “Overusing `!important`”, one must be careful with the usage of this keyword. `!important` should be used sparingly. Only in instances where there is a dire need for it.

Here are some of those instances for its usage:
- In a stylesheet where you have a third-party library or framework, and you need your custom styles (the custom CSS written by you) to override styles from that library without you modifying the themes of that library.
- When you need to override some pre-defined styles to enhance accessibility. An everyday use case for this is when you try to make your website accessible to all users, including the visually impaired. For instance, you’ve set some color values that you eventually find challenging for visually impaired people (those with low vision) to resonate with. You can use `!important` to override the default color values.
- If you encounter a layout issue that CSS style adjustments haven't resolved effectively, you can employ `!important` to address that specific style problem. However, always remember that this approach should be considered a last resort.
- It is essential that you know that some browsers have default styles for CSS. In this situation, you can use `!important` to override default styles, enabling style consistency across various browsers.
- You can also use it for testing and debugging your stylesheet. If a style isn't working, you can apply `!important` to enforce the desired style, overriding any conflicting styles. This approach lets you quickly pinpoint where the issue originates in your code.

## Using Absolute Units
Using the right length unit when styling is essential for creating a responsive design. CSS has two categories of length units: absolute and relative.
Many CSS properties like “width,” “height,” “font-size,” and so on utilise units for their value representation.

The code snippet below gives an example of the usage of a unit:

selector {
  font-size: 14px;
}

In the code snippet above, we declared the “font-size” property, then assigned a value of 14px to it.

### What are Absolute Units?
These are length units with fixed values irrespective of the rendering medium–regardless of the device's screen size. These units are excellent at maintaining the same size for elements across various screen sizes. Some standard absolute units you would have worked with are pixels - `px,` points - `pt,` inches - `in,` millimeters - `mm,` centimeters - `cm,` and picas - `pc.`

### Why you should sparingly use Absolute Units - The problem
Absolute units provide us with accurate, fixed, and precise styling values, but they do not scale according to the screen size. Absolute units are unsuitable for achieving responsiveness. Therefore, restrict their usage to elements that don't need to adapt to the browser's dimensions or the device's screen size.

### Relative Units - The solution
Relative units, as the name suggests, are relative to another property (in most cases, their parent element). These units are flexible in that they grow dynamically, adjusting according to the viewport, which makes them suitable for implementing responsive designs, unlike absolute units. Some examples of relative units are percentage-(%), `rem,` `em,` and so on.

### How to use Relative units and their interpretation
Understanding the significance of each relative unit equips you with the knowledge to use them effectively. Here are some relative units alongside their explanations:
- % - this unit solely depends on the parent element. Thus, it is relative to the parent element. For example, if you set the width of an element to 80%, it will be 80% of the width of its parent element. Note, use percentage for the value of the following properties: width, height, margins, and paddings.
- em - this is relative to the parent element's font size. For example, if you set the font size of an element to 4em, it will be four times the font size of the parent element. Use `em` when working with typography (text) - this lets the text scale proportionally.
- rem - this is relative to the root element's font size. `rem` is usually employed to achieve consistent styling across the entire layout.
- vh - relative to 1% of the height of the viewport.
- vw - relative to 1% of the width of the viewport.

## Using Inline Style
### What is Inline Style?
Inline style is a styling system that passes a direct style to an HTML element via the `style` attribute. While this styling system exists, it's essential to understand that its usage doesn’t support best practices for application building because it creates non-reusable code. Use inline style only when testing or beautifying a simple HTML file.;

### Why you should avoid Inline Style - The Drawbacks
Here are some reasons why you should avoid this styling system:
- With inline style, you do not get to follow the DRY (Do Not Repeat Yourself) principle. Inline style results in code repetition and non-reusable code because each element gets styled individually, even if it shares the same styling as another element. Inline style leads to redundant code.
- Code becomes challenging to read and also gets bloated. It results in a larger HTML file size, which affects performance. Also, your code becomes messy and not structured; hence, there should be a distinction between structure (HTML) and styling (CSS).
- It leads to a condition referred to as "Maintainability Complexity," which essentially means that your code becomes challenging to upkeep. For example, if you need to modify the appearance of an element, you'll have to locate the corresponding tag and make direct style adjustments. Imagine a situation where inline styles are scattered across various locations; this approach won't be suitable for scaling.

### Best Practices
To overcome the drawbacks of inline style, you must use internal stylesheets (styles within the `<style>` tag) or external stylesheets to keep your code healthy and organised.
- **External Stylesheet**: Create a CSS file. Store your styles, then link your HTML with them. With this, you achieve a distinction between HTML and CSS code, making your styles maintainable and reusable.
- **Internal Stylesheet**: Right inside your HTML file, use the `<style>` tag inside your HTML document’s `<head>.` Though this approach is inside the HTML file, you still achieve separating content (element) from presentation (styles).

## Not using CSS Resets
Different browsers have various default styles, which vary, leading to inconsistent appearances of elements. This is why we must define some styles for a consistent starting point for styling web pages across other browsers. These styles are called “CSS Resets.”

### What are CSS Resets?
CSS resets are CSS styles that serve as rules to remove the default styles that come with the browser. If you are conversant with CSS, and you would sometimes have in your journey noticed that there is a default style for some specific properties like `margin.` CSS resets help us level our styling ground to have a consistent foundation.

### Key reasons for the usage of CSS Resets
Here are the reasons behind its use:
- **Consistent Style**: With CSS resets, we can override browsers' default styles, making the stylesheet consistent.
- To maintain control over the stylesheet, CSS reset guarantees that your styles derive influence from you—the stylesheet's author—rather than your browser.

### How to create your own CSS Resets
Here are simple steps to follow:
- First, you have to identify the default styles you want to remove or override. This is the starting point because you must identify a problem before coming up with a solution.
- Then, target the identified styles and write your own CSS styles. These styles will serve as the rules that your stylesheet will adhere to.
- Finally, test your stylesheet on various browsers to ensure that your CSS resets take precedence over the browser-specific styles.

To make things look less abstract, here is a simple CSS Reset implementation done with the universal selector (*):

* {
  margin: 0;
  padding: 0;
  border: 0;
}

The code above is a fundamental CSS reset that targets the margin, padding, and border properties, assigning a value of 0 to each. This process is called the “Normalisation process,” as it neutralises the default spacing and borders the browser introduces.

Here are some CSS resets online:
- [Normalize.css](https://necolas.github.io/normalize.css/)
- [Josh Comeau custom CSS reset](https://www.joshwcomeau.com/css/custom-css-reset/) - This is the one I currently use, and Josh has done a great work by explaining this custom CSS rules explicitly
- [HTML5 Boilerplate](https://html5boilerplate.com/)
- [The popular Eric Meyer's Reset CSS](https://meyerweb.com/eric/tools/css/reset/)

## Not using CSS one-liners
### What are CSS one-liners?
CSS one-liners are shorthand styles for writing CSS code. They make code cleaner and well-structured. Knowing these shorthands will help you write more concise code (compressing lines of code into a single line). For instance, when you want to style an element margin at all sides (top, bottom, left, and right), you don’t need to explicitly state all the properties like `margin-top,` `margin-right,` `margin-bottom,` and `margin-left,` you can simply use the shorthand for margin property. The code below explains that:

/* Don't do this */
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15px;
margin-left: 15px;

/* Instead use Margin Shorthand */
margin: 10px 20px 10px 20px;

/* Margin Shorthand can even be more simplified */
margin: 10px 20px;

### Benefits of using these shorthands
With these one-liners comes excellent benefits:
- **Concise code**: You can write shorter code that is neat and readable.
- **Efficient code**: You get to write code that is efficient having reduced stylesheet file size and increasing performance.
- **Maintainable code**: Stylesheet becomes more maintainable and error-free. It will also be easy to alter styles and easily debug styles.

### Learning the various CSS shorthands
To explore the full power of these one-liners, it is imperative that you check out the available CSS one-liners. Here are a few curated resources to aid your adventure:
- [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties)
- [Plainenglish](https://javascript.plainenglish.io/11-css-one-liners-that-are-insanely-useful-8a2878200474)
- [Web dev](https://web.dev/one-line-layouts/)

## Not using Selectors Efficiently
CSS selectors are used to target HTML elements in an external or internal stylesheet. There are numerous selector methods in CSS, including tags (elements), classes, Ids and pseudo-elements

### Choosing the right selectors
It is vital to know when to use a selector and when not to. Also, you must know how CSS selectors work.

Some selectors and how they work:
- **Tag Selectors**: these selectors target a particular HTML element using the tag name (for example: `div,` `p`). They have the lowest specificity as they also result in broad styling, meaning they apply the style to all HTML elements with the specified tag.
- **Class Selectors**: these selectors are more specific, unlike the tag selectors, since they use a class attribute applied to an HTML element. For example:( `.container`), (`.header`).
- **Id Selectors**: ID in our regular day-to-day activity is a unique value; likewise, Id selectors in CSS. Id selectors are unique Id attributes used to target a single or unique HTML element. For example, (`#name`), (`#title`). They possess high specificity, and using them sparingly renders them unique.

Above are a few CSS selectors. This guide expects that you are already conversant with CSS selectors. However, this guide still explains some common selectors and how they work.

Now, what should you look out for when choosing a selector?
- **Specificity**: Use selectors particular to your target elements. This will create a styling constraint and help avoid overly specific selectors, which can distort code reusability.
- **Readability**: Selector chosen should be easy to read and understand, helping us achieve clean code architecture.
- **Minimal usage of the Id Selector**: Keep Id selector usage as minimal as possible. Use it only for unique Ids. With its high specificity comes great complexity when used without caution.
- Use class selectors when you have a goal for reusable code.

### How to avoid using overly complicated selectors
If you ever come across a code snippet like the one below in your stylesheet, then it means you are using overly complicated selectors.

#container > .box > content .section .title p > span .italic {
  color: blue;
  font-weight: bold;
}

Here are the tips on how to avoid overly complicated selectors:
- Engage the most specific selector for an element.
- Avoid nesting selectors - keep the hierarchy low.
- Use selector combinators for elements having the same style.
- Learn to do code refactoring often (you get to spot complex selectors).
- Employ CSS modules for code structure.
- Avoid using descendant selectors. For example, using (`ul,` `li,` and `a`) to select an element. It might be efficient, but with time, they eventually lead to overly complicated selectors.

## Ignoring Browser Compatibility
Browser compatibility is important because you don't want a style to function well on one browser and malfunction on another. Ignoring browser compatibility can lead to inconsistent user experiences across different browsers. This is because different browsers have their way of rendering CSS styles. However, you can achieve style consistency across the board by considering browser compatibility and ensuring your styles are compatible with different browsers.

One way to achieve browser-compatible code is by implementing the following:
1. **Using Vendor Prefixes**: Some CSS properties require you to use prefixes in other for it to render irrespective of the browser. Some browsers that require these prefixes are Internet Explorer, Mozilla Firefox, and Safari. The prefixes are called vendor prefixes because they are unique to some specific types of browsers. Examples of the prefix: `-webkit-,` `-moz-,` and ` -ms-.`

/* webkit-prefixed version - used by browsers that use the WebKit layout engine, such as Chrome and Safari- */
-webkit-border-radius: 8px;

/* ms-prefixed version -used by browsers that use the Microsoft layout engine, such as Internet Explorer. */
-ms-border-radius: 10px;

/* standard version */
border-radius: 8px;

2. **Declaring font fallbacks**: You must add fallback fonts when assigning value to properties like “font-family.” The fallback font will be an option for what to implement if the custom fonts aren’t available.

/* This is a CSS code snippet utilizing fallback fonts (sans-serif) */
selector {
  font-family: "Courier New", sans-serif;
}

3. Leveraging the [can i use](https://caniuse.com/) website to check for CSS properties compatibility with various browsers.

## Using Color names instead of Hex code
Hex codes are the hexadecimal representation of colors. It is a 6-digit code prefixed with the “#” symbol followed by three pairs of hexadecimal digits, where the first pair represents the red value, the second pair represents the green value, and the last pair represents the blue value.

Syntax:

selector {
  color: #rrggbb;
}

### Limitation of color names
Using direct color keywords has some limitations:
- Color names are inconsistent across browsers. If you set a color property to a value of green, for instance, how one browser interprets it differs from how another will. Hence the rendering is inconsistent across various browsers.
- Color names are restricted because you can’t tweak them in tone, shadow, and the like.
- Color names have limited options.

### Why you should use Hex code more
Due to the limitations of using color names, we need to opt to using Hex codes which doesn’t have these limitations. Here are the reasons why Hex codes are more suitable compared to color keywords:
1. Hex codes are precise and consistent across various browsers.
2. They are widely supported by modern browsers
3. They have a wide range of colors that are accessible to developers
4. Not restricted in implementation - you can easily tweak them to suit your preference.

### An efficient way of finding Hex codes
Here are a few ways by which you can get Hex codes:
- Using online color picker - open your browser and input this query - "online color picker," then search it. On the page returned you get a color picker.
- You can also get to learn about Hex code using color charts.
- Right in the browser developer tool in the console, you also have access to a color picker tool.
- And lastly, you can check for resources online that have done proper research and curated a list of these Hex codes.

## Additional mistakes we overlook

- **Using 0px instead of 0**: There is no doubt that this might not affect the stylesheet, but for best practice, ensure you use 0 and not 0px.

selector {
  /*Don't do this*/
  padding: 10px 12px 15px 0px;

  /*Do this*/
  padding: 10px 12px 15px 0;
}

- **Setting a high value for z-index**: Assigning a high value to `z-index` is very unnecessary and overkill. Sooner or later, this will cause an issue in your stylesheet, especially when there is more than one implementation of `z-index.`

selector {
  /*Don't do this*/
  z-index: 50;

  /*Do this*/
  z-index: 2; /*Let the value be minimal*/
}

## Conclusion
This article has ventured deep into the landscape of prevalent CSS errors, offering insightful solutions for each misstep. By reading this guide, there is no doubt that you have learned about some familiar CSS mistakes, and henceforth, you know how to tackle them, as we also got to look into the solution for each mistake.

Feel free to leave your thoughts in the comments below. If you found this article helpful, kindly share it with your network. Thank you.

## References
- [CSS Notes for Professionals](https://www.computer-pdf.com/web-programming/css/821-tutorial-css-notes-for-professionals-book.html)
- [CSS Optimization Basics](https://meiert.com/en/blog/css-optimization-basics/)
- [CSS Units](https://codewithsloba.com/)