How to make CSS organised

Harsh Sinha
26th Feb 2018
  • Share Icon
  • Facebook Icon
  • Twitter Icon
  • LinkedIn Icon
  • Reddit Icon
  • WhatsApp Icon
Share on
image

CSS or Cascading style sheet is a process of adding a style like fonts, color etc. to the web documents. With the help of CSS, designers can create different styles to describe the way different elements like headers, links will appear. As the multiple style sheets can be applied to a single web page, that is why the cascading term is coined.

What is meant by cascading?

Nowadays websites have become very complex. So it is extremely difficult to develop the website using the basic CSS. It will require thousands of line to write for creating effects on a single element. This will make the whole system very complex. It is highly important to keep the website organized. This does not mean that cascading has no importance. Cascading still has a lot of power and potential to build the website but now the whole process becomes very difficult if you write each and every code.

image

It really does not matter what tools you use, for one-page writing stylesheet will work, but for a website with a lot of pages, it won’t work.

Use a CSS Pre-processor

The regular CSS applies the CSS from the different CSS files and folder. This makes the whole process very slow as the website has to load each and every CSS file. Have you ever thought if you have only one file for all the CSS files? Well! This is exactly what pre-processor does. Sass which is the most popular CSS pre-processor compile all the CSS files into one big stylesheet and then this stylesheet is loaded into the webpage. Due to this, the speed of the website increases. This way is much faster than using @import in the regular CSS.

Have a separate file for small websites

If you are developing a small scale website then it is better to have a separate CSS file for every single page. This option is better if you have different layouts of each page and you don’t want to scroll the CSS of other web pages. All you have to do is to open the file of the specific webpage and you will find the code. However, this technique is not recommended if you have the same layout of all the pages and lots of web pages there, then it is better to use pre-processor.

Use separate CSS for repeating elements

There are scenarios when there are repeating elements and component. So, in that case, it is better to have a separate file for the CSS. This gives you the advantage to use the same CSS file again and again. For example, there are a header, navigation bar, footer etc. which are common on every page, so make a separate CSS file which will organize your code and will make it very convenient to use and understand.

Reduce the complexity by breaking it down

Working on large and complex CSS files is not an easy task. If there is team involving many members, then this task becomes more complex if you are thinking about building a separate file. To resolve this, you have to completely change your thinking. This complexity can be resolved by using an atomic design which includes five characters namely atom, molecule, organisms, template, and pages.

Atoms are basically the small elements like button, fields etc. Molecules can be a form involving fields and button, organisms can be complete header etc. This is how you can organize the CSS. Some people will be involved in each module. These modules will be imported into molecule CSS files and these molecule files will be imported into organism CSS files and this is how the complexity of a website can be reduced and managed.

Avoid inline styling

It is never a good option to choose. Website developers must avoid using the inline style; they must use either external or internal styling methods. External styling is the best way to arrange and organize the CSS. Don’t ever use class=”attribute” and style=” attribute”. It may occur to you that the inline styling is not causing any troubles but when the website become complex and large, then these inline styling will cause a lot of problems.

Reduce the depth

Try to avoid too many classes as it will make your code difficult to read. Make sure that you are using simplified CSS which will make your code readable and easier to understand. There has to establish a balance between too many classes and no classes at all.

  • Share Icon
  • Facebook Icon
  • Twitter Icon
  • LinkedIn Icon
  • Reddit Icon
  • WhatsApp Icon
Share on
This is a YourStory community post, written by one of our readers.The images and content in this post belong to their respective owners. If you feel that any content posted here is a violation of your copyright, please write to us at mystory@yourstory.com and we will take it down. There has been no commercial exchange by YourStory for the publication of this article.
Report an issue
Authors

Related Tags