10 Tips on CSS: The Right Way

We know how important CSS is in case of developing UI in web projects. But most of the time we don’t take it seriously. When we are asked to create PSD to HTML, we simply start writing our HTML and CSS. We do not examine the complete PSD to find out similarly styled elements, similarly styled elements with very view changes such as with border radius and without border radius, floated at left and floated at right etc. Instead of examining the full PSD to find out this kind of design patterns we start writing CSS from TOP to BOTTOM.

I would say, that is a very bad practice.

The proper use of CSS should be targeted to minimize the amount of styling code we write, as CSS should be reusable. Now if you design a button floated to the left, we won’t be able use that button anywhere else where we may need the button to be floated to the right. I mean, we can, but forcibly. But if you had designed the button class with all required styles except the float, we could have used it anywhere just by adding a required floating class additionally.

Again, if there are buttons with same styles except that they have different color schemes (background and font color for normal state, hover state, active state etc.), we could have wrote a class with all styles, and additional classes for colors. Now we can use any combination of theses classes on a button to have different styles on it.

Again, if you are writing a class for a button, you can also write this class for any tag. Like in bootstrap, you can use the .btn class on <a>, <span>, <input type=”submit”> etc. on any tag to get the same result.

Another thing which is also very important that, the PSD is not the last thing. More templates, pages etc. can be added later to the theme. You should understand this fact and should write CSS in a manner that makes creating these extra pages a fast process as your CSS can be reused.

10 Tips on How to CSS Properly

An one-liner class contains at most one CSS properties. For example: .fl{float: left}, .tac{text-align: center}, .vam{vertical-align: middle}, .m20{margin: 20px;}. You got the idea, right? Most CMS, UI platforms have this kind of classes to make things easier. Load this CSS file after loading all of your CSS files.

This is always suggested, whenever you want to change a predefined style of a third party source like bootstrap, jquery or fancybox etc., please do not make the change in the original CSS files. Instead, create CSS file and write all you overridden style codes in this file. Also load this CSS file after loading all those original CSS files.

I have already described this in detail. The purpose of having classes is the ability to reuse similar styles. If you style the input button of a form with a class and I can not use the class on any other element outside the form, not even on a button element, then what is the point of creating the class at all, right?

I have also discussed it above. Try to play with bootstrap classes to see how flexible those classes are. For example, if you use .btn class on an <a> element it will look like a button with default color which is, in general, gray color. If you combine .btn with .btn-primary (class=”btn btn-primary”), you will see that the color has changed. Again if you combine .btn-lg with it (class=”btn btn-primary btn-lg”) you will notice that the button got bigger in size and also the font-size has changed. We can use more classes to customize the button to the state we want. This is flexibility and heavily recommended.

Please study the design again and again to find out related designs before starting to write CSS. If you have to design 10 closely similar buttons separately, then you should better put those CSS inline!

This is old-school, but saying again, please use meaningful names for you classes, so meaningful that those classes speak for themselves. Many IDE now a days, give class name suggestions while coding HTML & CSS. Meaningful class names are great as the coder won’t need a documentation on what the class will do to the element.

Use commented blocks, such as; /*** Header Start **/. This will greatly help you managing large CSS files.

Please, please do not mix up your base styles with the styles of different media and display width. Also please do not create same block twice or more. That is, keep all the styles for print media in one print media block, all styles of 720p width in one media query block etc.

Yes, consider there is a widget in the theme which lists titles with thumbnail images on the left. You are writing CSS for this widget. You can write this in a way that adding only one class in the wrapper of the widget will turn the thumbnail images from left to right, remove that class, images will again appear on the left. If you can simply do this, your co-worker can add an option in the configuration of the widget to let user select that how the widget should look like, images on left or images on right. You can also write another class for the widget in addition to the base class that hides the images, everything else remains the same. And all these can be done with CSS just by adding or removing additional classes.

Try using w3c free CSS verification tool to see how your CSS is doing, what are the warnings or errors you should fix. That is a great tool I must say.