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