Multiple Blue Rings
Blue Rings
Multiple Blue Rings

Common CSS Mistakes You Should Avoid

Multiple Blue Rings
Blue Rings
Multiple Blue Rings

Browser Compatibility

It is important that your site is compatible with all browsers, or at least with the main ones on the market. Respecting the characteristics of broswers within your CSS is respecting your end user.

1

One of the solutions that may be interesting is to validate your site by the W3C's own Markup Service.

Multiple Blue Rings
Blue Rings
Multiple Blue Rings

Don't Fall For Inline CSS

Inline styles, while they have a purpose, generally are not the best way a maintain your website.

2

It can be very convenient when testing a new configuration or fixing some urgent problem, but you need to be extra careful when taking your application into production! Instead of using inline styles, use external stylesheets.

Multiple Blue Rings
Blue Rings
Multiple Blue Rings

Avoid Using Tables

Unfortunately, it is still quite common to find company websites that rely on tables. HTML5 allows tables for layout, but it is not a good idea.

3

Not only they are tricky and inflexible, but they also offer a number of limitations and make development and maintenance extremely confusing and difficult. It also affects Search Engine Optimization (SEO).

Multiple Blue Rings
Blue Rings
Multiple Blue Rings

Carefully Use !important

The !important is one of those features that we must be very careful about before using. With !important, any formatting that exists elsewhere is disregarded.

4

You have to be very careful, especially when using !important in classes resent in several elements, not to waste hours wondering why your layout changes don't work.

Multiple Blue Rings
Blue Rings
Multiple Blue Rings

Using Only Absolute Unit

Don't use only absolute units. It is often possible to find some numbers lost within CSS.

5

While fixed 'px' properties may be necessary, an efficient and elegant cross-platform design makes good use of percentages when possible. For typography, you can use the unit 'em' or 'rem' instead of 'px' or 'pt' to define relative font sizes.

Multiple Blue Rings
Blue Rings
Multiple Blue Rings

Respect HTML Tags

CSS styles coupled with HTML tags are possible, but not advisable.

6

It is better to create more CSS classes than to have to attach tags to CSS. This makes your code more independent and leaves the developer freer to change the HTML without breaking the page layout.

Multiple Blue Rings
Blue Rings
Multiple Blue Rings

Comment Your Code

Clean code and proper semantics. This already adds a lot of security and clarity to the CSS. But even an experienced developer is scared to confront an old script.

7

The CSS language seems intuitive, but it demands care. To avoid having a hard time, it is best to comment on what each CSS style block you write is about. 

Multiple Blue Rings
Blue Rings
Multiple Blue Rings

If You Like It?  Please Share