Best way to structure your CSS stylesheet

Question

I'm relatively new to CSS, and yet I seem to have a pretty good language for beginners. However, although many of the tutorials that I read often warn about “organizing and structuring your stylesheet properly” (and I can understand exactly why I have now created some fairly long styles). I cannot let life find any information about a standardized format for a style sheet or a logical template for a layout that facilitates subsequent reading by a person.

For example, create a section with comments for each "geographic" section of my page (headline, line1, line2, article1, etc.) and keep all the styles for this section within these comment borders? The problem occurs when I have styles that are reused in other sections - and putting them in the default section for styles, and then denying the purpose of grouping them into sections in general. Similarly, structuring my stylesheet by grouping based on text styles, layout styles, etc. It seems even more confusing.

Is there a "good practice"? I know this sounds silly, but it seems that whatever you do with HTML and CSS, someone is ready to tell you their wrong, bad practice or non-army, and I'm left in confusion. I want my code to be a good example of my work if the employer wants to check it in the future.

Answer 1

I've never been taught, but I can tell you how I organize my CSS documents. As you say, I like to divide it into “geographical” areas ... that is, the rules that apply to the header, sidebars, main content, footer, etc. And then, below, I add very specific rules, say, if I need to style a form or table on a specific page. Finally, I add the General Gabbins section below when I add general rules that can be applied in all directions.

Oh yes, I would also like to add a designer palette to the beginning for quick reference.

For instance...

/* PALETTE: dark grey : #555555; pink : #d93575; */ /* HEADER */ #header {...} #header ul {...} /* SIDE BAR */ #side {...} #side ul {....} /* CONTENT */ #content{...} #content p {....} /* FOOTER */ #footer{...} #footer div {....} /* FORMS */ form {...} input {...} /* GENERAL GUBBINS */ .center {...} strong {...} floatleft {...} 

Answer 2

These guys advise you to “Organize Styles with a Top Structure” ( http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/ ). I often use multiple style sheets. For example, in MVC - you can create registry styles for each view. Thus, you can put styles of a certain type in a specific style sheet without clashing with your “common” or “layout”.