Adjust css examples formatting (#26127)

This commit is contained in:
David Way
2018-12-13 05:03:03 +00:00
committed by Tom
parent 18d5502965
commit 012e93154b
35 changed files with 303 additions and 326 deletions

View File

@ -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. Its 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)