Design your way

Wednesday, November 20, 2013

CSS is one of the simplest web languages to use. The syntax is almost like written English and the language is not much more than a simple list of properties that effect an element. There are properties for most elements that can be changed such as the size and color of the font.

However, although it may appear to have an easy exterior, it can be a complicated system when it is used at a professional, high-performance level. If multiple browsers and layout engines are not being fully supported (and they never are) then the smallest change can effect the overall presentation.

Mistakes can be made in CSS and HTML files whether the developer is a beginner or an experienced coder. Most of these mistakes come from carelessness or in some cases lack of experience. Taking time to ensure that the code is clean will help improve the skills of the developer and can also remove the need for editing later which will save time.

There are not many other web technologies like CSS that newcomers can pick up as they go along. It is a tool that can be used to get by without paying too much attention to best practice.

The effect of this is that there are many web designers who spend too many hours repairing broken layouts and debugging the sites because they have an incomplete knowledge of CSS and the problems that it can create. Several of the most common CSS mistakes that are made by web designers of all levels of experience are showcased below.

Using multiple classes when there isn’t the case


.boxy{ background: #ccc; border: 1px dashed #000; color: #fff; font-weight: bold; padding: 5px;}  
.boxy_right{ background: #ccc; border: 1px dashed #000; color: #fff;float: right;font-weight: bold;padding: 5px; }

The only difference between them is that the latter has a float:right attribute. Instead of having such a long line of code, you can just use:


.flright{float:right}

And in the markup you simply use


<div class="boxy flright">

Using long selectors


#wrapper #header .logo img.logo { margin:1em; }

Not Providing Fallback Fonts


.thebox { font-family: Helvetica;}

Instead, you should add more fonts because not all your visitors will be having Helvetica on their computer, and you will want to choose the font that they’ll see on the page, rather then having a random one there.


.thebox { font-family: Helvetica, Arial, sans-serif;}

Not using shorthand is really silly

There are numerous ways to keep your CSS clean and efficient and this has to be one of the basic ways to do it. Not only the scannability will improve, but you will also write code faster.


margin: 2px 3px 0px 4px; /* wrong */
margin: 2px 3px 0 4px;

color: #ff0000; /* wrong */
color: #f00;

padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; /* wrong */
padding: 5px; 

padding: 5px 10px 5px 10px; /* wrong */
padding: 5px 10px;

font-style:italic; font-weight:bold; font-size: 90%; font-family: Arial, Helvetica, sans-serif; /* wrong */
font: italic bold 90% Arial, Helvetica sans-serif;

background-color:#fff; background-image: url(logo.png); background-repeat: no-repeat; background-position: 0 10%;/* wrong */
background: #f00 url(logo.png) no-repeat 0 10%;

Using inline styles


<a href="#" style="font-weight:bold; color: #ccc;">Click me, I'm useless</a>

Not organizing the stylesheet as you should

This is especially annoying if you are working in a team and your colleagues have to deal with your code after you write it. Organizing it badly may lead to a lot of time wasted to simply CTRL+F those classes. Also, add comments where it isn’t obvious what the class is for. It will help a lot the person who will deal with your code.

Not grouping classes with the same attributes


.button-group-docs a{font-family:'Lato', Arial, Helvetica, sans-serif; color:#d3ffce;text-decoration:none;margin:1em 0;background:#ccc;padding:1em;}
.button-group-docs2 a{font-family:'Lato', Arial, Helvetica, sans-serif; color:#fff5a2;text-decoration:none;margin:1em 0;background:#ccc;padding:1em;}
.button-group-docs3 a{font-family:'Lato', Arial, Helvetica, sans-serif; color:#ff6b4f;text-decoration:none;margin:1em 0;background:#ccc;padding:1em;}

Instead of stuffing your CSS file with lines of code, try grouping them together.
.button-group-docs a, .button-group-docs2 a, .button-group-docs3 a {font-family:'Lato', Arial, Helvetica, sans-serif; text-decoration:none;margin:1em 0;background:#ccc;padding:1em;}
.button-group-docs a{color:#d3ffce;}
.button-group-docs2 a{color:#fff5a2;}
.button-group-docs3 a{color:#ff6b4f;}

It's also easier when you will want to make modifications

Nesting tags improperly


<a href="#"><div class="whatever">Linky link</div></a>

or

<div><strong>The text</div></strong>

Using color names instead of Hex codes

Defining a color by its name, red, blue etc. means that you will rely on the visitor’s browser to know exactly what color that is. If you test it with various colors and browsers, you will see that those respective colors are not always the same. Consider that there are a lot of reds, blues, greens or whatever color you have in mind. Which ones will the browsers output on the visitor’s screen.

Not adding a hash on color codes


color:ea6bc2; /* silly wabbit */
color:#ea6bc2;

Most of the times, this happens because of a lack of sleep, but it’s still important to pay attention to color codes whenever you’re writing them. It’s the simple things that can annoy you to the maximum.