The Smart Way to Write CSS

CSS is one of the important skills every web designer must have.

Understanding CSS is the initial challenge as CSS is not easy. One needs to understand how to use CSS selectors, properties, pseudo-code, etc. While you learn the basic way to write down a CSS code, it is very important to understand the way to organize it. While basic coding practices focus on keeping the code well organized and nicely indented, a couple of changes in the way of writing the CSS code file can have a huge impact on the output.

Here are a few tips to write quick, clean and non-redundant CSS code:

Writing CSS Reset
Always use a CSS reset file at the start of the code. If you don’t define any element style, then the browser will apply its own CSS style which might create a mismatch in the design as browsers have their own styles. Use of CSS reset will override browser-default-styles, allowing you to write a clean code base. If you don’t know how to write a reset file, then you can also download it, as it is available on the internet.

Organizing styles in blocks
Organizing code into blocks is important as it will not only help you but also your colleagues to understand the flow of your code, instead of spending hours understanding which code is placed where. So, group your code properly, divide it into blocks or sections. There are many ways to organize your code into blocks. The first is where you can create blocks of elements of the design, for example, blocks of images, buttons, links, etc. And the second would be organizing them according to the parts or sections of the design, for example, header, menu, main body, sidebar, footer, etc. Organizing also helps in writing a non-redundant code. Sometimes we might end up repeating some of the CSS properties, so organizing your code into blocks will prevent redundancy.

Organizing CSS with comments
Assume one day you are told to work on an old project of yours, and it’s been a long time you haven’t touched that code and now you don’t remember which style is placed where since unfamiliarity will result in you not remembering the locations of specific styles. CSS files are quite long, having many lines. So it’s always important to comment your code properly, you may save a lot of time that you just would have spent on the code searching for a style. And it will also help your colleagues to understand your code with much ease.

Use CSS shorthand
Using shorthand, we can write a multiple line code on a single line. The code looks neater, cleaner and short if we use shorthand. For example, for use of a border, you can set the border-width, border-style and border-color property of an element by using just one ‘border’ property. It also makes writing easy. However, if you just have to change the colour of the border, then using longhand will be better, instead of setting all 3 properties.

Quick CSS classes
If you use a property over and over in a code, then writing a separate class for that specific property would be beneficial. So you can use that class in your HTML file whenever you would want that style property to be applied instead of defining it again and again.

These are not the only tips to write CSS smartly, there are many more. These are a few basic tips I personally follow to write better CSS.

Vijata Redkar