Top 10 CSS Mistakes Even Advanced Developers Make

, , 0 Comments

Specificity

In short, specificity is a *bad* thing. Once upon a time, we all thought we were being all cute and organized by specifying parent tags in front of what we *really* needed to style. The smaller the selector, the faster and less specific it is, making it much easier to overwrite and extend.

Redundancy

Developers often code/design and get things done quickly without going back and identifying patterns of reuse. Avoid redundancy, identify patterns, and make your code cleaner.

Not using Shorthand properties

Shorthand properties make your code much cleaner and easier to read. USE THEM

Not using a fallback font

Webfonts are all the rage, but I often see developers using non-standard fallback fonts, which makes everyone elses’ life miserable.

Not creating print.css

As you may or may not know, there are different medias in which a CSS can be applied (screen and print are the most popular). Print.css in particular is the CSS that gets called when a user tries to print your website. Make one to help optimize your layout for the printer.

Using IDs as selectors

IDs are the ultimate specific selector and should be avoided in your CSS. Stick to classes only as they are faster, more extensible, and easily replaced. See specificity above for more details.

Unnecessary Floating

Floating is probably the worst thing to ever come to the CSS world. So much hacky code has been created to combat overflow and clearfixes. 99% of the time, you can use inline-block or text-align instead of floating.

Not fully understanding the box model

The box model is the fundamental building block of CSS. If you understand it, along with the implications with overflow, your development will go so much more smoothly. Learn it and go back to some of your old code and look at all of the overflow hacks you wrote.

Using absolute widths in your layout

Use widths only when really necessary. Because of the rise of RWD, widths are the biggest roadblock to your fluid layout. If you can, use relative or percentage widths to give your users a cleaner experience. Also remember: widths are for *reserving* space not for spacing.

Using a reset without giving elements their basic spacing needs

I can’t tell you how many times I’ve seen a reset.css being used, where all of the default spacing gets removed from elements to give the developer complete layout control. The problem? Developers mainly pay attention to how it affects their layout and not basic elements, such as <p> or <h1>. If you are using resets, please be sure to go back and style the basic elements and or only reset the things that are actually affecting your layout.