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

• 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.