Search within TutorialsPark

CSS Comments


CSS Comments and its applications and best practices.


CSS Comments.

1.A good development practice is to Comment on your CSS styleheets.

Why Comment on CSS stylesheets:

a.) To comment on why you wrote a certain rule, as a reminder.

b.) To help your project team understand the code properly, and carry on from where you left.

c.) To improve the readability and maintenance for your CSS file.

d.) It help keep a track of people who worked on the project, who created it , when it got updated etc.

e.) Very beneficial for large projects involving many developers and multiple stylesheets.

f.) You can also use CSS comments to disable some part of your CSS code.

2. A comment on CSS stylesheet starts with " /* " and ends with " */ ". All your comments must be within these symbols.

Example of CSS Comment

Note: CSS comments cannot be nested, everything after the closing tags " */ " will be interpreted as CSS rule.

CSS Comments to Disable rules.

1. You can disable some parts of your CSS code temporarily by encapsulating them within the comment tags /*.....*/

2. This technique is useful when you are experimenting with CSS rules or troubleshooting some design problems.

Example: Disable CSS rules with Comments

Note: To restore the CSS rules back, just remove the Comment tags.

CSS Comments: A Table of Contents.

1. A Table of Contents describing the project requirements , sections etc is included as a guide or reminder for developers.

2. Table of Contents may contain symbols that are not used in CSS code, eg{ $, @, ?} to enable easy searching.

Example: CSS Table of Contents

Note: Its a good development practice to help keep a track of work completed or remaining.


CSS Comments: Create a Color and Typography Reference

1. Another Good Development practice is to include a brief reference within the stylesheet for stuffs like Colors and Typography.

2. This acts a reference for colors and typography for entire projects , ensuring that files remain structured and consistent and easy to maintain, always.

CSS Comments: Color and Typography Reference

Note: This is a good development when working of a large project with multiple developers.