Building with CSS stylesheet always seem to be a constant battle when constructing a website. Web Browsers are always ever updating they way they read the lines of code. CSS is an incredible language and most often it can easily be used incorrectly, which will put your web development in danger in the future, that means that is hard to be maintained.

Here are some common CSS mistakes that we designers and developers alike all commited

1x1.trans Common CSS Mistakes We Commit and Good CSS Practices

No Proper Usage of CSS Reset

One of the ugly things browsers do is provide default styles for HTML elements, problem rises when that all browsers have different default styles given to HTML tags. What a CSS reset do is resetting all the styles of all the HTML tags. You will now have your base CSS. You can now proceed styling without any browser default style issues.

* {
      margin: 0;
      padding: 0;
}

Though this applicable, it’s not suggested full reset. You also need to reset html elements such as borders, underlines in links, and colors of elements like list items, links, and tables so that you cannot came across into unexpected results between web browsers.

There are many CSS reset codebases on the web that you can incorporate into your work. Personally, I use the ever popular Twitter Bootstrap, there is also a reset from Eric Meyer. You may also consider YUI Reset CSS in styling. Of course, if you feel unsatisfied and you want to reinvent the wheel you can change them.

Adding properties redundantly

Here is another mistake that most of us do, we tend to commit this over and over again when we are rushing that we often leave the multiple selectors with the same properties. Here is a familiar example.

.contentLink {
	font-style: italic;
  	color: #e7e7e7;
  	margin: 5px;
  	padding: 20px
}
.sidebarLink {
	font-style: italic;
  	color: #e7e7e7;
  	margin: 5px;
  	padding: 20px;
}

Why not combine, it is not that time consuming. Now we have elimated extra lines.

.contentLink , .sidebarLink {
	font-style: italic;
  	color: #eee;
  	margin: 5px;
  	padding: 10px;
}

Forgetting The Shorthand Properties

.subHeader {
  	font-family: "Comic Sans"; /* just kidding */
  	font-size: 14px;
  	font-weight: bold;
  	line-height: 1.6;
}

Most of us forget, ignore and sadly don’t know this method. Using this technique will reduce the download time of CSS.
By using CSS shorthand properties you can minimize the size of your CSS file even more. Take a look at the next line of CSS from the above one.

.subHeader {
	font: bold 14px/1.6 "Comic Sans";
}

Now compare, can you now grasp the idea of using shorthand?

Minify

When optimizing your CSS for optimum performance. It is necessary to remove unnecessary white-spaces. There is no problem in formatting your code in the way that you’re comfortable with. However, there is valid reason not to take out excess characters (a method better known as minification). Mostly of the developers simply don’t minify their CSS files before launching their project. Although it may not physically feel like it makes much of a difference, when you have huge CSS files, so does the response time of your site.

No Fallback Fonts

Web designers are pretty much limited to the few so called web-safe fonts (e.g. Arial, Georgia, serif, etc.). There is a plus side, though. You can still use fonts like Helvetica that aren’t necessarily installed on every computer. The secret lies in font stacks.

Font stacks are a way for developers to provide fallback fonts for the browser to display if the user doesn’t have the preferred font installed.

#selector {
  font-family: Helvetica;
}

Can be expanded with fallback fonts as such:

#selector {
  font-family: Helvetica, Arial, sans-serif;
}

If the visitor doesn’t have Helvetica, they can see your website in Arial, and if that doesn’t apply, it will just be set to any sans-serif font installed.

By defining fallback fonts, you can control on how your web pages are displayed.

Here now are the ways on how your CSS will be maintainable for future updates.

Commenting is a very useful practice not just when returning back to your own CSS in the future, but also for other developers who are picking up your work. If there are thousands of lines in your document it may be worthwhile to setup a small table of contents right at the top of your CSS file. Then using a unique numbering key(I’ve used roman numbers in example) you can do a quick search to jump down to that line of selection.

/*------------------------------
	Table of Contents
---------------------------------
	I. Headers
	II. Body Links

*/
/*-------------------------------
	I. Title for Headers
---------------------------------*/

h1 		{padding:12px 0 0 352px; position:relative;}

h2 		{color: #eee; font-size: 24px;}

h3 		{color:#fff; font-size:1.384em; line-height:1.2307em; padding:0 0 22px;}

/*-------------------------------
	II. Title for Body Links
---------------------------------*/

h1 a 		{display:block; text-indent:-5000px; height:94px; width:259px; background:url('images/logo.png') center center no-repeat;}

.h3-link1 	{padding-bottom:28px;}
.h3-link2 	{padding-top:50px;}
.h3-link3 	{padding-top:40px;}

This organization technique is great for as developers who want to read your CSS file. Another technique is by placing headers throughout your document so that it is easy for everybody to skim.

Separating Aesthetics from Alignments

In some rare situations I have seen web developers splitting individual properties by using CSS comments. You may consider how the main stylesheet functionality includes both positioning and colors/styles. Check out the small code example below:

.container {
  /* alignments */
  display: block;
  padding: 12px;
  margin: 10px 0;

  /* aesthetics */
  background: #ddd;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

This is not a technique you would need in every selectors you’ll be using. But for some element selectors you may end up to 20 different properties. When your CSS file grows, you can expect it will be complicated and messy. Breaking down your styles into a block-line syntax also improves readability and easy to maintain.

Setting up Readable Comments

A line or two blocks of comment will be informative for developers. If you want to explain why you are writing a certain piece of code., commenting is the way to go. Whenever I place code blocks with comments using multiple lines I separate the new lines with asterisk’s on the left side. Here is an example.

/**
 * setup for page container.
 * inner wrapper holds the page content,
 * while outer wrapper centers at max 900px width.
 */
#container { }
#wrapper { }

Final Thoughts
CSS web development is all about organization, metrics, and layout styles. Other designers and developers who scan through your code will have a much less time reading through your documents. I hope this article will provide a few tips for developers to grow accustomed using CSS comments and remove bad coding habits. If you have similar techniques or queries feel free to share with us in the post comments area below.

Avatar Image

Falconerie Badayos II

I'm not the only one for you but you are the only one for me.