Staying organized with CSS

I've been an admin on some websites before and it shocked me the way admins just drop in lines in CSS and over time lose track of everything. I decided to not let myself into the way they were being an 'admin' and stay organized.


What is CSS?

    CSS stands for Cascading Style Sheet
    CSS defines how HTML elements are to be displayed
    Styles were added to HTML 4.0 to solve a problem
    CSS saves a lot of work
    External Style Sheets are stored in CSS files

In other words: CSS makes it possible for the founder and admin(s) to style their website and keep it neat and pretty.


Where can I find it?

Your CSS can be found in your Admin Control Panel (or ACP in short). You will find the link at the bottom of the index page and can only be accessed with admin privileges. Click it to access it. Now go to the "Display" tab. On the left you'll see a menu called "Pictures and Colors" and in it is a link called "Colors". Hit that and on your right side click the "Cascading Style Sheet" (CSS) tab. Below that, you'll find your CSS.


Building it all up

I organized my CSS into 3 different blocks:

1. Forum layout and settings << This is the main body actually, the 'naked' forum will look like.
   
2. Topics Posts and User(s) Profiles << This is the about the forums, posts, topics, user settings.
   
3. Chatbox settings << This is your chatbox styling CSS.
   

and added 2 empty lines in between each block to separate them. Each block has a clear header and footer.


Example header:

[css]

Code:

/*****************************************************************/
/**** FORUM LAYOUT AND SETTINGS **********************************/
/*****************************************************************/

Example footer:

[css]

Code:

/**** END FORUM LAYOUT AND SETTINGS ******************************/

Then, I thought of describing each CSS feature by adding a comment line just above the function, like this, or have them combined into sub-sections:


Example:

[css]

Code:

/**** NAME GLOW FOR THE USER ACCOUNTS ****************************/

Example (general): http://prntscr.com/5ywhhd


Compression and Speed

Compressing CSS will enable you to gain speed on your forum reading all through it by your website's engine. There's a maximum of 600 lines (I believe) in CSS, so that's why unnecessary coding should now and then be detected and removed or altered by an admin. To compress CSS, there are various online tools available to you that can do that for you in an automated process. Potentially these programs could also ruin your CSS if you don't know what compression methods or options you should use. If you learn how to compress CSS manually, it's even better. My total CSS consists of just 181 lines for my entire website, of which about 135 or so netto and the other lines are comments or section intervals.


Backing up your CSS

I regularly make backups of my CSS and place them locally on my computer and on a forum on my website accessible to admins only. In the topic title I place the backup date. Use the code box to save your data in the topic and try to avoid using plain text or text files because of UTF translation mishaps when saving and retrieving data from them.


Well, that's my "best CSS practice". I hope you liked reading a bit more about it and learned some.

Samantha.

very awesome sam i love it the only thing i really dif when i organize my css is i use only 2 lines to save space for later on if you end up adding tons of css to style each individual thing

Code:

/*------Css Title-----Info if you choose----------*/

Code:

/*________________End Of Code________________*/

i use dashes for title and underscores for end that way when im scrolling threw my css and i see a --- i automaticly know its a title and same for the ___ i know its the end of a code... but to be honest it dont really matter what you use as long as you organize your css because it does get out of hand and fast

side note: things you don't want to be read in css you can put inside
/* and */

so if there is css you want to disable just put it inside that .. and you don't have to wrap each line you can wrap a whole page or just one part of your css with just 1 set

@_Twisted_Mods_ : I agree with your vision for compression reasons it would be better to have some of the remark lines cut out, but it all depends on the user of the little work of art. Now I'm used to have it divided into 3 blocks I probably could scrap 6 of 'm. It's just kind to the eye and have better readability, that's all.

When people are new to CSS adding extra comment lines will help them to better understand CSS for it 'll explain them the function of the line below in their CSS.