How to write better maintainable CSS?
When we write CSS especially for a large scale application, we should always keep in mind about maintainability in long run. Every application is subjected to modification and up gradation, so there is no point of starting over from scratch every single time. When we go back to our code base after a long time or adding new members contributing to code base should be able to identify things is in the right place.
If we have written a maintainable CSS, updating some minor changes to our repository will not be a daunting one like
1) changing the value for a variable,
2) changing a class name,
3) identifying which modules are written in which section of the code and locate where is the specific line comes from.
Only if we incorporate few style guidelines we can easily achieve that.
Commenting:
As a beginner we should start practicing this point.Commenting the code with proper description is always handy.
/*Home page styles*/
/*Home page ends*/
/*Home page ends*/
Structuring your CSS file
You can write CSS from general styles like, defining font-faces at the top and common styles like padding for each section and move on to each section from top to bottom./*Resets and global declarations*/
/* Resets and global declarations ends */
/*Body, html*/
/*Body, html ends */
/*Fonts and typography*/
/*Fonts and typography*/
/*Header*/
/*Header ends*/
/*Banner */
/*banner ends*/
/*Services section*/
/*Services section ends*/
Do not Repeat:
When any framework like HTML5 Boilerplate or Bootstrap or any other framework is used, utilize the framework and do not repeat the styles with custom CSS instead of applying class name from framework. Like,
.text-uppercase can be used from bootstrap instead of writing text-transform:uppercase.
Efficient CSS:
Both the markup and CSS must be precised to be minimum lines. There is no point in writing 10 lines of code when 3 lines can do the job. Using latest and correct syntax for implementation is more important.Using CSS3 property like calc, display:flex will be more efficient than following older methods.
Semantic naming:
HTML5 has provided with useful semantic tags like section, header, footer, main, aside…etc. Out of various reasons for w3c going for semantics, giving a meaningful communication is the prime. Likewise, for CSS holding a better semantics is important. Naming a meaningful class like
.banner, .banner-content, .footer-logo instead of .blue_foo
It is always better to have a class name without typos. Fixing a better strategy for naming the classes is the best way possible. Use of CSS preprocessor
CSS preprocessor will assists much in writing a maintainable code as it provides the concept of modularity. Module based approach will help in writing modules as separate files instead of searching in a single long CSS file. CSS like SASS/LESS have more advanced features like inheritance, nested selectors variables, and mixins. Using directives like @import, @extend can reuse the code everywhere but defined one time.IDs
Limit using IDs wherever possible as it has comparatively higher specificity than classes. Selective and clever usage of ID is encouraged. If applying an additional class name will do the job opt it instead of adding an id which may lead to specificity issues when reused. Using CSS Selectors efficiently will make the code base lighter.Naming Conventions:
Application styles will always follow naming conventions based on BEM methodology.header {}
header > .brand {}
header > brand > img {}
Always follow a checklist before delivering every single website. You can periodically revise the checklist based on the requirement and nature of the projects.
Subscribe to Creative Technocrayts and be a part of growing community.
Do contact for colloborating projects. Glad to work with you!
Comments
Post a Comment