A method to better organize your CSS code blocks.

As most of you know, these blogs don't seem to support multi-line coding for CSS, and at least for me this can lead to getting lost for a moment when trying to find something specific. So while working on what I hope to be the blog for my first character, I started trying to find a solution to help segment this incredibly long block of code into a more organized fashion.

After a few semi-solutions (They allowed you to segment the code, but either the organization wasn't the best, or you would have a bunch of returns in your blog) I started thinking about CSS commenting. That is, these: /* */.

I wondered if perhaps you could put returns in a comment block and have them ignored by the code and thus have said code assume it's still progressing as an unbroken line. After testing, this does indeed seem to be the case.



A crash course on comment blocks for those that might not fully understand their use:
--------------------Comment Block Usage--------------------
/* Comment blocks are a way for programmers to leave behind comments and explanations for various bits of their code without actually affecting the code. This is possible because the code completely ignores anything inside a comment block. That is, absolutely nothing you type inside a comment block will be seen by the code, for as far as the code is concerned, it doesn't exist. */
------------------------------------------------------------------



Here is how I've got comment blocks working to segment my CSS code (style tags assumed):
-----------Begin Code-----------
body{background:hex;font:size font style;color:hex; padding; etc;}/*

*/#header-region {background-color:hex;}div#sidebar-left.sidebar stuff stuff stuff...

------------End Code------------



Important note: Make sure your comment block begins with /* and ends with */. Note the asterisk's position in relation to the slash.



Here's a quick example of something similar to what I have running my character's blog right now:
--------------------Begin Code--------------------
((style))/*
===Body Configuration===
*/body{background:#0a0219;font:13px century gothic;color:#4b00c6;padding-top:20px; padding-bottom:20px; padding-right:120px; padding-left:140px;}/*

===Header Configuration===
*/#header-region {background-color:#0a0219;}/*

===Link Configuration===
*/#block-menu-primary-links a,#tabs-wrapper a,#squeeze h2,a:link,a:visited{color:#909dfe;text-decoration:underline;}a:hover{color:#ffffff;letter-spacing:1px;}.breadcrumb a,.breadcrumb{color:#909dfe !important}div#sidebar-left.sidebar a:hover,div#sidebar-left.sidebar ul.menu a:hover,div#block-user-1.clear-block.block.block-user a:hover{color:#ffffff;letter-spacing:1px;}/*

===Side-menu Configuration===
*/div#sidebar-left.sidebar h3{color:#4b00c6; font:11px century gothic;}h2{color:#4b00c6; font:11px century gothic;}div#sidebar-left.sidebar a,div#sidebar-left.sidebar ul.menu a,div#block-user-1.clear-block.block.block-user a{color:#000d63;text-align:left;letter-spacing:0px;text-decoration:none;}/*

===Comment Box Configuration===
*/#wrapper #container #center .right-corner .left-corner {background:#8E8A7F;}.comment.odd, tr.odd, tr.info {background-color: #000128; width: 600px;border:2px solid #000b56;}.comment {border: none;margin:auto}tr.even, .comment.even {background-color: #000128;width: 600px;border:2px solid #000b56;}/*

===Blog and Miscellaneous Configuration===
*/#wrapper #container #center .right-corner .left-corner{background:#0a0219}.node{border-bottom:none}.comment div.links {background:transparent;}.new {background:transparent;}ul li, ul.menu li, .item-list ul li, li.leaf{background:none;}/*

===Logo Fade===
*/#logo,.mplayer,.picture{filter:alpha(opacity=15);-moz-opacity:0.15;opacity:0.15}#logo:hover,.mplayer:hover,.picture:hover{filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75}.((/style))

---------------------End Code---------------------

Editing for improved readability..
Feel free to let me know if anything could use further clarification.
Hraeth's picture

Already told you how much you

Already told you how much you rocked for this.
It always bit having to sort through such a huge chunk of text.

I was fueled entirely by how

I was fueled entirely by how awesome you are.
Hraeth's picture

Don't even start that now.

Don't even start that now. >8C
I'll cram that code somewhere it doesn't belong.

probablynotreally<3

Besides. You're awesomazing.
ocean's picture

Thank you for this! I might

Thank you for this! I might be able to use it sometime--I never can find what I need in giant blocks of coding. xD

Welcome. :3 I'm -used- to

Welcome. :3 I'm -used- to relatively large blocks of coding and I can still have trouble finding what I want quickly unless it has -some- kind of structuring.

This is great! You are awsome

This is great! You are awsome you know<3 haha lol
Smiling
-Konoha-

Thank you. x3 But -you- guys

Thank you. x3 But -you- guys are awesome simply for reading this blog post! I've been working on updating the code so it's more accurately organized in hopes to provide a decent source of reference to help with organization, so check back on occasion! :3
Unplugged's picture

I never knew this worked

I never knew this worked here! You rock. Thanks for sharing.

These are totally not the

These are totally not the responses I was expecting from when I normally make posts like this in other forums. x3 It is -you- guys that rock.
Unplugged's picture

Can I link your blog in my

Can I link your blog in my CSS Help?

Feel free. The more help it

Feel free. The more help it can provide the better.
Unplugged's picture

Thanks! I added it to my CSS

Thanks! Smiling I added it to my CSS blog.

No problem, and thanks for

No problem, and thanks for adding. :3

There's just something about a problem whose solution came about from using comment blocks that, as a (learning) programmer, I find amusing.
Ravyn's picture

Awesome.

Awesome.

Yes, you are -very- awesome.

Yes, you are -very- awesome. I agree. ;3 ((Blame Hraeth for bringing me here))
But yes, thank you.
EternalWanderer's picture

Truly useful... stralking

Truly useful... stralking this.

Wow, this is awesome. Thank

Wow, this is awesome. Thank you!

EternalWanderer - Stralker!

EternalWanderer - Stralker! D: Thanks for the comment and track. x3

Ravus - Glad you think so, thanks! :3

Sithrim's picture

trackk.

trackk.


#4b5160
WonderfullySarcastic's picture

Haven't gotten to the point

Haven't gotten to the point where I am in dire need of this, but until then~ *track*
#1354
.

I did not know this blog

I did not know this blog existed! Thank you WonderfullySarcastic for bumping it! X3

Thank you Ikaron. I did not know you could use something like that. I was always so use to the old way (or what I considered the old way >_>; ). This will be helpful!

tracking this

tracking this

Welcome. :3 I havn't been

Welcome. :3 I havn't been around here much but I do check in now and then. Good to see that this blog is still being useful!
Alyssa035's picture

Track! Thank you so much for

Track! Thank you so much for this!
The man with the key is king,
And honey you should see me in a crown.
takayama's picture

track

track