Writing clean CSS


Writing clean CSS is essential for readability and helps in maintaining the code. In order to write clean CSS here are few of the rules you must keep in mind.

  • Use a hyphen (‘-’), underscore ('_') or camel case into class names. It is important that you maintain consistency and use any single standard for class writing in your project.
  • It is advisable to use all small letters in class names if you are following the hyphen or underscore standard. It is recommended to use short and content specific class names.
  • One must keep in mind to avoid multiple dependencies while writing CSS. You should also use most of the inbuilt classes while using any CSS library like bootstrap.
  • Add comments for every new section and also avoid ID selectors.
  • Try to use minify CSS on the server level, when you making your website/application live.
  • Avoid “!important” property
  • Use external CSS
Usage of Less/Sass:

CSS on its own might seem like a lot of fun, but stylesheets are getting larger, complex, and harder to maintain. This is where Sass/Less can help.

So, what makes Saas/Less so useful in CSS? Sass allows you to use things like variables, nested rules, inline imports and more. Using Sass/Less can help you write a clean CSS. Let us look at a few points that can help you use them in the best possible way.

  • You should try to use any one CSS compiler for a new project.
  • If you have good hands on Sass, then Sass is recommended.
  • Define global variables.
  • Do not change/edit core library files.(ex. Bootstrap/Material)
  • Make sure you have defined all global styling in the initial setup of the project.

Common classes which we should follow and use in most of the projects:

The recommended list of common classes that one must follow and use in most of the projects include:

  • page-wrapper
  • header-wrapper
  • header-left , header-right
  • logo-container
  • super-nav
  • social-links-wrapper
  • search-wrapper
  • main-nav
  • banner-wrapper
  • main-content-wrapper
  • left-wrapper
  • right-wrapper
  • footer-wrapper
  • footer-left-wrapper
  • footer-right-wrapper
  • I hope that the blog will help the coders who were stuck with writing a perfect and clean CSS.
With the launch of newer frameworks and tools for better web development CSS has become a mandatory skill for the coders and developers.
Topics: CSS CSS standards

e-Zest Solutions is digital experience engineering company with facilities in the United States (Detroit & San Jose), Germany (Hannover), United Kingdom (London UK) and India (Pune) with global clientele. Our services include custom software development, offshore software development, UX consulting, BigData, Managed cloud Services (Azure & AWS), SharePoint consulting/Migration, Enterprise Java application development, Automated software testing services.