CSS simplifies the process of designing. This is what I believe but despite concerted efforts being made to make it more powerful, some web designers are still grappling with its basics. It is not that these designers are not creative or do not know bean about designing, rather they unknowingly make some mistakes that takes a heavy toll on the whole designing and development process. They extend the CSS code unnecessarily and in the majority of cases, the codes are barely comprehensible with loads and loads of junk playing around. Now, it is not an uphill task to keep the codes clean. There are some simple ways to do that. Wondering what they could be? Well, let me explain them to you:
Do not Mess Things Up: Simple may sound, but believe me this is the toughest thing that every professional fears. But being organized has its own share of advantages. When you are dealing with CSS, you must not write code as they come up in your mind. You will feel like being in hell when you are to edit that code. So, try to keep things organized. The rule of thumb is that you must proceed with the least important items first and then you should go on featuring other important elements down the line: Below is an example: Start with Generic and less important items like – body, <p>, <a>, <h1> then you should be starting with #header, #nav-menu, main-content and the rest of the things. It is not that tough. All you got to do is to work a little harder and you will just be fine.
Inline CSS: Though the use of Inline CSS is thankfully not that prevalent these days, you should avoid it like plague. One of the biggest draws of inline CSS is that it makes the size of the document extremely large and another disadvantage of using Inline CSS is that it makes the coding look unruly and unmanageable. Another shit about Inline CSS is that you need to open all the individual pages one by one and get them edited. A freakishly boring task that everyone around will try their level best to avoid.
External CSS File: While coding CSS, it always makes sense to separate the design and HTML. Keeping all the CSS codes in another external CSS file and then fetching them whenever required is the best way to keep job neat and clean. Moreover, it reduces pressure from the document and makes it easier for the browsers to load them faster.
Mention Everything: It is a good practice to mention everything in details. I mean when you are using a color code in CSS, it would be nice of you if you can manage to add the name of the color just beside the color code. It will save your skins a hell lot of ways when you are to edit them.
Create a Library: If you are using the same code again and again, it does not really make any sense to code them manually from the scratch. You should create a library and then save them under some under different templates. It will save a lot of time, energy and relieve you from the pressure of doing the same tasks over and over again. This is the smartest thing that you can do to relieve yourself from the extreme work pressure.
Use Shorthand CSS: To make the style-sheet load faster, you should be using shorthand CSS. This will make the style sheet look smart and is considered to be the best practice. This looks smart and save long hours of editing job. Rather than trying this –
#box {
margin-right: 16px; margin-left: 15px;
margin-top: 12px;
}
#body { margin: 16px; 15px 12px 0px; }
Hyphens over Underscore: Though people are much in the habit of using underscore while coding CSS file, it has some serious shortcomings. For say, underscore create troubles for sites when rendered in older versions of browsers. CSS might not work properly because of the underscore and something if the lady luck does not favor you that much, it might stop working at all. Rather you should nip the problem by using hyphens instead.
Group Elements Whenever Possible: The best way you can reduce work pressure and make your life a hell lot better by using shortcuts whenever possible. Try to group things together whenever possible as this will reduce the volume of the CSS file.
Do Not use Large Images: Use of extensively large images is going to kill your website as the loading time will take a plunge. Rather you should small images and then use the repeat function in the CSS as this will help you keep the volume of the CSS file to something sensible.
CSS Validation: This is a common vice shared by almost all web designers. In fact, we are too lazy to make the CSS and the HTML coding errors free. There is a nifty little tool available that can help you pinpoint the errors within a file. Just past the URL in the given space in W3 Validation website and it will immediately show you the number of errors it contains. A smart way to fix errors and make your CSS file immaculate. CSS Reset: Do not panic if you see your website rendering quite awkward in different browsers. This is quite a common phenomenon and to avoid this embarrassing situation, you should be using CSS reset. This is a small trick that will make your website render seamlessly in all browsers. These techniques may not help you make your webpage flawless, but will stop the coding thing appear lawless to some extent.
Michael Evans is a passionate writer and a regular contributor to leading web design library.
