Adjust css examples formatting (#26127)
This commit is contained in:
@ -3,23 +3,18 @@ title: Comments in CSS
|
||||
---
|
||||
## Comments in CSS
|
||||
|
||||
Comments are used in CSS to explain a block of code or to make temporary changes during development. The commented code doesn't execute.
|
||||
Comments are used in CSS to explain a block of code or to make temporary changes during development. The commented code doesn't execute.
|
||||
|
||||
The comment syntax in CSS works for both single and multi-line comments. You can add as many comments to your stylesheet as you like.
|
||||
|
||||
```css
|
||||
/*
|
||||
This is
|
||||
a multi-line
|
||||
comment
|
||||
This is
|
||||
a multi-line
|
||||
comment
|
||||
*/
|
||||
|
||||
/* This is a single line comment*/
|
||||
.group:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
```
|
||||
|
||||
By using CSS comments to make your stylesheets more readable, the CSS will be easier to maintain in the future for you or another developer.
|
||||
@ -30,7 +25,7 @@ You can also make your comments more readable by stylizing it.
|
||||
```css
|
||||
/*
|
||||
***
|
||||
* SECTION FOR H2 STYLE
|
||||
* SECTION FOR H2 STYLE
|
||||
***
|
||||
* A paragraph where I give information
|
||||
* about everything that someone who reads the code
|
||||
@ -47,11 +42,11 @@ You can add as many comments to your stylesheet as you like. It’s good practic
|
||||
Comments should be used everyday in your CSS to keep in maintainable and readable by any dev who dives into said CSS.
|
||||
Here are a few exmples to get you started of CSS comments you can use in your daily work to make your life that bit easier.
|
||||
|
||||
``` css
|
||||
```css
|
||||
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
||||
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
||||
CSS TABLE OF CONTENTS
|
||||
|
||||
|
||||
1.0 - Reset
|
||||
2.0 - Fonts
|
||||
3.0 - Globals
|
||||
@ -83,12 +78,12 @@ Here are a few exmples to get you started of CSS comments you can use in your da
|
||||
/****************************************************************************
|
||||
6.0 - Body */
|
||||
|
||||
/************************************************************************
|
||||
5.1 - Sliders */
|
||||
|
||||
/************************************************************************
|
||||
5.2 - Imagery */
|
||||
|
||||
/************************************************************************
|
||||
6.1 - Sliders */
|
||||
|
||||
/************************************************************************
|
||||
6.2 - Imagery */
|
||||
|
||||
/****************************************************************************
|
||||
7.0 - Footer */
|
||||
```
|
||||
@ -103,7 +98,7 @@ Here's how region works:
|
||||
/*#region Header */
|
||||
|
||||
.header {
|
||||
font-size: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/*#endregion */
|
||||
@ -112,13 +107,13 @@ Here's how region works:
|
||||
------------------------------------------- */
|
||||
|
||||
.footer {
|
||||
height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
/*#endregion */
|
||||
````
|
||||
```
|
||||
|
||||
### More Information:
|
||||
|
||||
* [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments)
|
||||
* [CSS Comments by Adam Roberts](https://www.sitepoint.com/css-comments/)
|
||||
* [CSS Guidelines](https://cssguidelin.es/#commenting)
|
||||
* [CSS Guidelines](https://cssguidelin.es/#commenting)
|
||||
|
Reference in New Issue
Block a user