<img alt="" src="https://secure.leadforensics.com/150446.png " style="display:none;">

Writing clean CSS

Tushar Narwade Aug 17, 2017

CSS CSS standards

ways-to-write-clean-css-1.png

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.

Similar Blog

e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.