Writing your first assignment of CSS coding can look cumbersome and tiring to you, if you have not written code before and used to working with tables only. These days, the service market of converting PSD to CSS is growing at fast pace and so is the number of service providers.
But one thing for sure that everybody can write CSS. Even programs are doing it for you now. But question arises: Is that CSS good enough? Below you will see ten tips to write better and comprehensive CSS—
Indentation
Indentation is very important to keep your code well organized. It can be eye straining when you have got 600 lines of CSS code to sift through. So with indenting the rules, you can make scrolling through the file and finding the proper CSS classes and ID’s easier.
Alphabetical Order
You need to organize your CSS classes, IDs, and or rules within them according to alphabetic order. Alphabetizing your properties is indeed very important. By alphabetizing your properties, you are creating a consistency that will help you reduce the time you spend searching for a specific property. Alphabetizing the CSS rules with classes and Ids, will make the things tidy and well organized too.
Apply Shorthand CSS Code
You should learn to make use of shorthand code. It allows to speed up the writing process, thereby, reducing the cluttering in the style sheets and making it easier to flip through. I just wonder why people write CSS in long format codes where writing in a shorthand code allows things to look much cleaner. For instance, margin shorthand rule implies going like this: top, right, bottom, left, reducing the number of lines of unnecessary code to save on clutter and increase speed.
Use of CSS Reset
Things go strange in CSS coding, when you need to write same coding again and again in order to get the right display in all the browsers. This is the situation where CSS reset comes into play. There are different resets available in the market like Eric Meyer Reset, the YUI Reset, or could be your own custom reset, but once you get used to the reset, it becomes much easier to ensure that every browser is displaying items properly.
Do the Right Way
You should not touch the style sheet until you’re done with writing markup. First of all, mark-up the entire document from the opening body tag to the closing body tag before even creating a CSS file. Instead of adding any superficial divs in advance, create very generic divs like header, content, footer as these things are going to exist for sure. Add those only once you start writing the CSS and feel the need to create them. Well said, “CSS is just worthless without a well formatted document”.
Treatment for Classes and IDs
At times, we become over-burdened with our assignments, so to get the things done fast anyhow, we give very strange and irrelevant class and ID names. The problem arises when we need to modify our CSS style sheet, we would need to refer our HTML as well to figure out which class or ID belongs to what. Try to give right and relevant names to classes and IDs. Picking the proper naming structure for your css classes and ID’s can help you dig through your stylesheet files as well as your html files, to edit the code. On the other note, it happens many a times that some classes or IDs tend to expire during working on a assignment only, as we don’t feel any need to use it further. But we do not remove it and keep it in a file. The stylesheet very soon starts accumulating with unused elements and the time comes, when it becomes hard for you to differentiate between used and unused elements in the stylesheet. You need to eliminate all the unused classes and IDs from the style sheet, but if you really wan to keep it with you for future reference, then you may save it in separate file.
Consistency
There are many topics in CSS for debate which I want to get rid of. This tip is to let you know to be just consistent with whatever pattern you follow. There is debate on 1 line vs. multiple lines issue. Everyone has their own opinion, so pick what works for you and stick with it throughout the stylesheet.
Writing Comments
Comments are like your best buddy. Commenting can be a great way to keep things well organized and clean. You should neatly organize your CSS code by grouping similar elements and describe the groups with simple comments. This will definitely save your time while skimming through, but also prove helpful for your clients when you pass along the code – they’ll be able to find items easier, fix items themselves and mailing you for very small alterations required.
CSS Inheritance
Inheritance is a very common concept within technical world and useful also, If multiple styling properties are same within their child elements of a parent element then it’s better to define them for their parent element and let the CSS inheritance do all the work. This will help while the code will be updated at the later stage, it will also reduce the CSS file size considerably. This inheritance is known as OOCSS i.e. Object Oriented Cascading Style Sheets. This is one of the good tip need to be kept in mind when you convert PSD to CSS.
Hacks Should be Separated Out
Writing conditional elements and hacks is a part of day routine activities, but you need to make it separate from style.css file. Whereas getting the hacks mingled with rest of coding, it will add element of cluttering and also not be considered as valid coding. Not just this, separation of these two will allow you to make edits and adjustments to the hacks and conditional elements easier, without effecting your main CSS code.
These are some of the tips which will help you in writing neat, clean and well organized CSS. We might have missed out your way of writing better and comprehensive CSS. If it is so, please share your experience and tips with us in the comments below!
