Maintaining your CSS
Going through long CSS files and figuring out where is that particular property in which changes have to be made can be a daunting task sometimes.
While developing large applications it is difficult to maintain and organize your CSS. Generally, developers tend to ignore CSS practices during the initial stages of development until it is complied up to be something very messy.
According to my experiences, here are some tips which can help you keep your CSS clean and organized.
- Follow a proper style guide
Discuss with your team and come up with a proper style guide for your application. This step first includes a primary style that will be applied until something special is done to that element.
Similarly, you can define primary properties for h1, h2, p, link, and table tags
2. Code commenting
It’s a good practice to add a comment block to your CSS as it helps any other developer who gets onboarded and it also helps you when you come back to your code after taking a break!
3. Naming convention
Name your CSS classes according to what that element does so that when you review your code it is better to understand and if there are some changes that have to be incorporated in that element it is easy to find that class. Avoid naming classes as ‘a’, ‘c2’, ‘x’ etc.
4. Classes and ID Selectors
Use IDs only when one element on the page should have a particular style. Always use Classes to identify more than one HTML element. Do not confuse yourself and create one more class that has the same properties as a class that already exists in your code somewhere.
5. Keep consistency of your CSS with respect to the HTML
While writing the HTML code the order in which the Classes appears in the HTML elements, in the same order CSS Classes should be defined in the CSS file. So that when you tally your HTML code with respect to CSS it appears in the same order and preserves consistency.
6. Writing optimized CSS
To improve readability, always try to use CSS shorthand properties which shorten the code.
For example when you specify the margin-top and margin-right for an element like this:
You can actually write it in a single line of code:
I hope the above tips help you in organizing your CSS when you design robust applications. More CSS and SCSS tips coming soon in my future blogs!
Thank you for reading, if my post was helpful please hit the little clap :)