CSS Comments - Commenting is a vital part of coding, and its not usually until you come back to work on some code

Tom · 7th February 2009, 09:40 PM

Commenting is a vital part of coding, and its not usually until you come back to work on some code you did a couple of years before you realise how helpful it would be to know what is doing what.

CSS Syntax:

Comments begin with /*
Comments end with */

The hardest part I have is remembering if its */ or /*, the easiest way to remember it is "slar"(slash-star), and the end comment is the reverse.

Examples of CSS Comments:

Code:

/*comment*/
body {/*comment*/ background: #fff;}
body {background: #fff;} /*comment*/
body {
/*
comment
*/
    background: #fff;
    }

There arn't any problems with symbols in comments, if you like talking in "leet" then you'll be fine:

Code:

/* "£" '%' *%* () {} [] # @ ; : ? / \ | ! & - + = _ */

Thats the simple part, now the hard part, remembering to use it and when to use it.

But you can never use too many comments, thats the best thing to remember. They will always be helpful, at least they are as long as they make sense.

Your CSS code should be relative to the content, so if you have a right hand col it should be called something like:

Code:

.rightcol {width: 100px;}

Thats obvious its the right column, but with only 1 line of CSS it would be hard to get confused. But what if your right column div is called "rtdiv"?

Code:

/* Right Column Div */
.rtdiv {width: 100px;}

its pretty much that easy, and once you start using comments you will start organising your CSS to make it easier to follow.

Its all down to personal preference, I organise my code as below as I find it helpful:

Code:

/* My CSS */

/* Import CSS Files */
@import url("global.css");
@import url("nav.css"); 

/* Body Style */
body {background-color: #333;}

/* Header Tags */
h1 {}
h2 {}
h3 {}

/* Content divs */
div.main {float: left; width: 600px;}
div.right {float: left; width: 200px;}

/* Footer */
.btmdiv {}

Hope you find this helpful.
Tom

Tom · 9th February 2009, 09:00 AM

Here is a new way I came up for displaying and organising CSS.. to make it a little easier to follow.

You just need to design the layout of your site and the mark those sections and put the corresponding CSS underneath. That way you can easily tell which section relates to which part of your website, easy

Code:

/* 
Tom over  at webprocafe.com 
Visual CSS Comments
2009
Enjoy!
*/

/*
Navigation
------------------------------
|xxxxxxxxxxxxxxxxxxxxxxx|    |
------------------------------
|                    |       |
|                    |       |
|                    |=======|
|                    |       |
|                    |       |
|                    |       |
------------------------------
|                            |
------------------------------
*/

.nav {}
.nav a:link {}
.nav a:hover {}

/*
Login
------------------------------
|                        |xxx|
------------------------------
|                    |       |
|                    |       |
|                    |=======|
|                    |       |
|                    |       |
|                    |       |
------------------------------
|                            |
------------------------------
*/

.login {}
.login p {}

/*
Content
------------------------------
|                        |   |
------------------------------
|xxxxxxxxxxxxxxxxxxxx|       |
|xxxxxxxxxxxxxxxxxxxx|       |
|xxxxxxxxxxxxxxxxxxxx|=======|
|xxxxxxxxxxxxxxxxxxxx|       |
|xxxxxxxxxxxxxxxxxxxx|       |
|xxxxxxxxxxxxxxxxxxxx|       |
------------------------------
|                            |
------------------------------
*/

.content-wrap {}
.content p {}
.content a:link {}

/*
Adverts
------------------------------
|                        |   |
------------------------------
|                    |xxxxxxx|
|                    |xxxxxxx|
|                    |=======|
|                    |       |
|                    |       |
|                    |       |
------------------------------
|                            |
------------------------------
*/

.ad-50off {}
.ad-99off {}
.ad p {}

/*
ShoutBox
------------------------------
|                        |   |
------------------------------
|                    |       |
|                    |       |
|                    |=======|
|                    |xxxxxxx|
|                    |xxxxxxx|
|                    |xxxxxxx|
------------------------------
|                            |
------------------------------
*/

.shout {}
.shout p {}

/*
Footer
------------------------------
|                            |
------------------------------
|                    |       |
|                    |       |
|                    |=======|
|                    |       |
|                    |       |
|                    |       |
------------------------------
|xxxxxxxxxxxxxxxxxxxxxxxxxxxx|
------------------------------
*/

.footer {}
.footer p {}

7th February 2009, 09:40 PM	#1
Tom Join Date: Jan 2009 Posts: 730 Blog Entries: 16 Thanks: 17 Thanked 34 Times in 34 Posts Expertise: Design & Graphics Experience: Quite Good	CSS Comments Commenting is a vital part of coding, and its not usually until you come back to work on some code you did a couple of years before you realise how helpful it would be to know what is doing what. CSS Syntax: Comments begin with /* Comments end with / The hardest part I have is remembering if its / or /, the easiest way to remember it is "slar"(slash-star), and the end comment is the reverse. Examples of CSS Comments: Code: /comment/ body {/comment/ background: #fff;} body {background: #fff;} /comment/ body { / comment / background: #fff; } There arn't any problems with symbols in comments, if you like talking in "leet" then you'll be fine: Code: / "£" '%' % () {} [] # @ ; : ? / \ \| ! & - + = _ / Thats the simple part, now the hard part, remembering to use it and when to use it. But you can never use too many comments, thats the best thing to remember. They will always be helpful, at least they are as long as they make sense. Your CSS code should be relative to the content, so if you have a right hand col it should be called something like: Code: .rightcol {width: 100px;} Thats obvious its the right column, but with only 1 line of CSS it would be hard to get confused. But what if your right column div is called "rtdiv"? Code: / Right Column Div / .rtdiv {width: 100px;} its pretty much that easy, and once you start using comments you will start organising your CSS to make it easier to follow. Its all down to personal preference, I organise my code as below as I find it helpful: Code: / My CSS / / Import CSS Files / @import url("global.css"); @import url("nav.css"); / Body Style / body {background-color: #333;} / Header Tags / h1 {} h2 {} h3 {} / Content divs / div.main {float: left; width: 600px;} div.right {float: left; width: 200px;} / Footer / .btmdiv {} Hope you find this helpful. Tom __________________ Fusion Web Hosting - Friendly and easy to use www.fusionservers.co.uk Last edited by Tom; 9th February 2009 at 08:14 AM..*

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode