How to comments in CSS?

By  ShC    25 - 24 January, 23
How to Comments in CSS

Share article on social media


Cascading Style Sheets, also known as CSS (Introduction), is an effective language for styling and organising web pages. Similar to any programming language, it is essential to use comments in CSS code to describe what particular sections or lines of code need. By doing so, you can recall your actions when you return to the code in the future and make your logic more clear to other developers who might be working on the same codebase.

There are two types of comments in CSS, single line comments and multi-line comments.

Single Line Comments

Single line comments start with "//" and can be placed anywhere in the CSS file, but are commonly used at the end of a line of code. They are useful for making quick notes or annotations about a specific line of code.

Single line comments example :

/* This is a single line comment */
body {
    background: blue; /* This is also a single line comment */
}

Multi-Line Comments

Multi-line comments begin and end with "/" and "*" including. They can involve various lines, making them ideal for commenting out large sections of code or explaining the code in greater detail.

/* This is a multi-line comment

Multi line comments cover multiple lines of code or cover multiple spans of lines*/

Comments in CSS is essential in CSS because it can be difficult to understand the intent of the code without them. Comments can help to explain why certain decisions were made and make the code easier to understand and work with for others. They can also serve as a reminder to yourself of what you were thinking when you wrote the code, preventing confusion if you need to return to it later.

It is also best practise to keep your CSS code organised and readable in addition to commenting. This can be achieved through the use of consistent indentation, naming conventions, and the grouping of similar styles.