Best Practices - CSS Stylesheet Formatting?

Why not have multiple stylesheets on your development boxes, but have them merged into one in your deploy scripts.

7 This has the benefit making the end-user only making one request combined with the benefits of multiple files. You can also minify the result while you're at it, making the user experience even faster! – James A.

Rosen Jun 5 '09 at 17:30 2 ^ this 1) use multiple stylesheets in development 2) have script to merge and minify all style sheets into 1 small compact stylesheet 3) profit – resopollution Jun 5 '09 at 19:23 7 @resopollution - um, you can't presume to know step two if step three results in profit. Also, step one should be "underpants" – Jason Jun 5 '09 at 19:44 1 This runs the risk of having your CSS break when going from development to production. – Derek Adair Jun 5 '09 at 19:06 Why not just keep it simple by having one stylesheet and separating it into multiple sections using comments.

– EarthMind Jun 5 '09 at 11:24.

I've recently switched to using code indentation to format all my stylesheets. It gets rid of the wall-o-text that most CSS currently resembles and makes browsing for specific statements pretty easy. #menu { asd:asda; } #menu a { asda:asd; } #menu ul { asd:asda; } #menu ul li { qwe:qwerty; } #content { asd:asdf; } /* etc...

3 +1 for a great idea, I've never seen this done before! The only concern I would have is the fear of my IDE auto-reformatting my indentions, of course those settings can be turned off. – Joshua Poehls Jun 5 '09 at 17:18 1 I was thinking it would be cool if the IDE /enforced/ the indentation.

:-) – Patrick McElhaney Jun 5 '09 at 17:22 1 this Helps for readability and definetly suggest indentation for that reason. However for lage stylesheets I recomend breaking the styles up based upon a usage / cascading organization. – David Yancey Jun 5 '09 at 17:28 Yep, this a great way to keep things readable.It also helps you to see the relationships between parent Elements and their children.

– ajm Jun 5 '09 at 17:29 6 While formatting is great, what are you going to do when you have 1000's of lines of CSS. Formatting does not help when you have to scroll through lots of lines of code. Breaking it out helps you have a better organized structure which you can easily find what you are looking for.

– Jason Heine Jun 5 '09 at 17:39.

Be careful using @import -- especially in a master css file. The @import stylesheets will not download in parallel and you cannot control the order in which they are imported (in IE). See the gh Performance Web site blog for more information.

I organize my CSS file by putting the common elements (header, navigation) at the top and the more page specific elements at the bottom. It's not hard to find stuff because I usually debug/work in firebug which gives the line number of the element you are inspecting.

Here's how I do it: /* HEADER ------------------------------------------------- */ #screen-reader {position: absolute; left: -99999px; top: -99999px;} #header {background: url(../images/header-bg. Jpg) no-repeat; width: 960px; height: 209px;} /* NAVIGATION ------------------------------------------------- */ #main-nav {float: right; margin: -194px 110px 0 0;} I break up my CSS into sections with comments and make sure everything is in line. I just think it's a cleaner approach.

1 for good idea – Jitendra Vyas Mar 5 '10 at 20:46.

My site has a global. Css which imports the other CSS in the order that they need to cascade. Example: Global.

Css file: @import url('Directory/MainLayout. Css'); @import url('Directory/Links. Css') @import url('Directory/Tables.

Css') Doing it like this will help you organize your CSS.

3 Keep in mind that "imports" are blocking: you'll see a bit of slowdown. If you can, try to keep stylesheets separate and use link tags or - better yet - concatenate them while serving them to the user. That said, if I can't concatenate I always use the above method.

– ajm Jun 5 '09 at 17:16 1 This may not work with his requirement. If he can only HOST one for example, this won't work. If his client doesn't want the client to download more than one file, it doesn't work either.In fact, if there is any non-arbitrary reason behind the requirement, this probably doesn't actually meet it.

– TM. Jun 5 '09 at 17:18 2 Doesn't that bypass his requirement for one stylesheet? – Matt Spradley Jun 5 '09 at 17:20 7 Yes you are right, this will cause a bit of a slow down.

I think in today's world though, how much of a slow down do we really see? – Jason Heine Jun 5 '09 at 17:20 1 While depending on the user's connection the performance hit is minimal from my experience. I use Jason's suggestion almost exclusively now and have tested with various connections from dialups on up.

The managability with this method is nice. – David Yancey Jun 5 '09 at 17:23.

Stylesheet Maintenance CSS Standards and Best Practices Create Maintainable Code With A CSS Styleguide.

You may find the Compass stylesheet framework useful. In Compass you can use Blueprint CSS, The Yahoo! User Interface Library or 960 Grid System.

1 I've been experimenting with compass/sass for a few weeks now, and I'm delighted. I makes it very easy to structure you css into separate files, use indentations to structure nesting and use mixins and variables to get consistency in your code. The screencast is worth a watch wiki.github.Com/chriseppstein/compass – Tomsky Sep 18 '09 at 14:00.

What @tj111 mentioned above, can be achieved using an online tool - styleneat.com. Works quite well for organizing huge stylesheet(s) without breaking anything.

If you're using Visual Studio 2008, the size and organization of your CSS files may not really matter. There's some tools built in that make styles SUPER manageable, even going so far as to give you a visual representation of each style for reference. Scott Guthrie has a great blog post on this.

weblogs.asp.net/scottgu/archive/2007/07/....

I put all my selectors on one line, with alphabetical attributes (like ajm): #aside{ float:left; margin:0 0 0 1em; padding:0 1em; position:relative; z-index:999; } I used to indent (like tj111), but since I use multiple editors on multiple platforms, the spacing quickly got out of whack, and I spent too much time fixing it. The CSS file is ordered by major blocks: reset, typography and layout. Selectors are ordered by, roughly, their place in the HTML structure.

Sprinkled throughout, I'll use "flags" so I can find major blocks of styles in a search: /* =Header Other comments can go here, too */ #header { key: value; nkey: value; } #header h1 { key: value; }.

2 Putting all your rules on a single line wreaks havoc when it comes time to diff the file; you can see that a rule for a selector changed, but you can't necessarily see which rule without examining it closely. Keep rules and selectors on individual lines, and let a tool like YUI compressor do the minifying. – rmurphey Sep 18 '09 at 14:49 I personally find it pretty unreadable as well.

What’s the thinking behind it? – Paul D. Waite Feb 12 '10 at 17:16.

I use styleneat.com/ to consolidate all my . Css into one nice and neat file. D.

Here's how I do it: #container { font-size: 220%; margin-top: 15%; min-width: 600px; text-align: center; } #container p { font-size: 100%; line-height: 1.2em; margin-bottom: 15px; } #container . Accepting { font-size: 16px; } #container . Domain { font-weight: bold; } #container .

Smaller { font-size: 65%; } #container #ad { margin-top: 2em; margin:0; } #container #ad img { border: 1px solid #CCC; padding: 3px; } I keep the selectors one line long if there is 2 or less settings in it. Also use comments to seperate the sections, such as /* header */ & /* main */. Edit: Take a look at minify for combining & compressing css (and js if you wish).

This is actually the way I've been doing things. I'm quickly realizing that the downside of this method shows itself when your stylesheet gets lengthy. Indentation starts to lose its meaning and you really can't see the commented sections.

– Justin Niessner Jun 5 '09 at 19:30 Yea I'd have to agree with you, starting to find that on a recent project. I'm sure there are much better formats that scale, but for ease of use on the average site this works just fine :D – Sam Jun 5 '09 at 20:06.

Download and read Natalie Downe's PDF CSS Systems. (The PDF includes tons of notes not in the slides, so read the PDF! ).

Take note of her suggestions for organization. If on a Mac, Use CSSEdit Organize the properties within each selector block. Many people suggest alphabetization.

Here's my approach. Pick the one that feels right to you. Make sure you're taking advantage of CSS shorthand as much as reasonably possible.(remember that 'line-height' is unitless, so 'line-height: 1.5;' is the same as 'line-height: 1.5em;'... Also a unit does not need to be specified for zero values, so 'padding: 0px 0px 1em;' can be written as 'padding: 0 0 1em;'... the 'background' shorthand property defaults to a 'background-color' of 'transparent', a 'background-repeat' of 'no-repeat' and a 'background-position' of '0 0' so sometimes you can skip setting some or all these depending on the situation ... 'normal' and 'bold' font-weights can be written as '400' and '700' respectively).

These may seem quite minor, but in a huge CSS file, they can add up and they're good habits to develop anyway. As others have mentioned, use server side scripting if possible to minify your css file before serving it up to browsers so you can maintain a human-readable version.

When a stylesheet gets really long I tend to favor readability of selectors much higher than the properties themselves. An example was given above where a whole rule is compressed on to one line. That is my default format no matter how many properties: #container {width: 900px; margin: 0 auto; font-size: 1.2em; } #header {width: 100%; } #header .

Nav {margin: 0; } #header . Nav li {list-style-type: none; } #header . Nav li a {font-size: 1.4em; color: #0f0; } #header .

Nav li a:hover {color: #3f3; text-decoration: underline; } I'm not a huge fan of indenting, but it may help you visualize your HTML within the stylesheet. Either way you have a compact, scannable CSS file. As for long sets of properties, I try to organize them so I can skip to the end or middle if I know what I'm wanting to tweak.

Generally, put display/position/z-index first, then width/height/margin/border/padding/background, then any typographic properties like font-size or color, and finally throw all the browser-specific tweaks at the very end (-moz-box-shadow).

Readability of selectors is the up most impotent thing of css! – vsync Oct 28 '09 at 12:13.

The idea of "Modular CSS" as described here 24ways.org/2008/making-modular-layout-sy... helped me organise my CSS well. The cost is having multiple classes on html elements but that is what they are for.

I like to keep all my stylesheets (relatively) small and broken out by section (about, products, contact, etc. ). When pushing to production, I run front-end blender to consolidate and minifiy all of the stylesheets into a single global. Css file.

This minimizes the overall number of CSS calls in the production environment (1 instead of 20! ), avoids the overhead of @import, and allows for better caching/cache-busting as needed.

Great advice in all the responses above! I always find myself doing the following: Ordering my selectors in order from generic Element (h1, em, a) selectors to more specific selectors (div#foo, a#bar) and winding up with generic (div. Blah span.Biz) at the end.

No real reason other than I know that, after Elements, it follows along in decreasing specificity. Ordering attributes in alphabetical order within selectors. I've tried grouping them in meaningful ways (like position, left, and top always showing up together), but you'll find that things end up hard to read if attributes are missing.

Alphabetical order is always nice and easy to skim. Example at the bottom as the editor's eating my code formatting. Finally, I always make sure to comment anything that's tricky.

For example, I had a background image that was a 4x4 dot that I repeated and used as a horizontal rule. As it repeated as a 4x4 block, I made sure to comment that so any other developers would see just what the heck it was doing and why I used so many 4- and 2- based values for sizing that Element. Just remember: someone else is going to be looking over this someday, so make it easy to read and skim!

Here's how my selectors generally look: div{ float:left; margin:0 0 0 1em; padding:0 1em; position:relative; z-index:999 }.

First I work on how i'd like the general page elements to look, for instance my p, a, h1, etc tags at the top. Then I work on on section of code at a time, like #header for instance, and include everything relevant to the #header element. I separate sections with a comment, for instance: /*---------------------HEADER----------------*/ so that it's nice and big when i'm looking for it later.

I then create generic reusable classes near the bottom, like . Disclaimer or something that can be put in a random p tag. Of course it's not so great if you want to keep file size down, but I find that a couple extra bytes in your css file to prevent you from going crazy when trying to find things later is absolutely worth it.

Of course you can also minify :).

Using something like minify can work wonders. You can have several stylesheets that upon delivery, merges all into one http request. It also removes any whitespace from the Css allowing it to load faster.In regards to managing a huge file, you might refer to alistapart's article on separating structure, type and color.

With clearly defined comments to separate these sections of css, you'll find it much simpler to refer back and edit. My preference is to separate all base HTML styles into one clearly defined (through comments) area of the style sheet. From there I have a structure section where all containers are defined.

After that I separate using comments based on any unique templates. And sometimes I even separate any link styles on their own. Hope that helps!

Make the most of inheritance, write scalable, reusable code and stack classes where appropriate. I use a similar format to Nick Satkovich up there ^ and rarely feel the need to use more than one stylesheet. I find that css indentation makes code less readable than an inline format.

Well structured stylesheets with well named ID's and classes shouldn't need indentation.

Perhaps you can use the alphabetising features offered here, for making each css file's elements easier to reference by eye.

I seem to have a different type of CSS Coding Style. I tend to apply a pattern similar to programming. Here is a sample markup and the way I style them.

Test Test CSS html {} body {} #menubar {} #menubar ul {} #menubar ul li {} #menubar ul li a {} #footerMenubar {} #footerMenubar ul {} #footerMenubar ul li {} #footerMenubar ul li a {} Of course, some of you will raise a topic about the file size, but I gain much more efficiency and readability using this pattern that I am willing to compromise a little bit of file size. Furthermore, it also gives a idea of the position where a particular markup lies in the HTML file also. (P.

S, Same answer can be found here too.

I faced the same problem and I fixed it by creating 2 folders for css. First css_m\ in which include my css but the css is divided by module , so I can have a directory tree there with tens of files. Then there is the css\ folder which contain like few css files which are created from the files in css_m using a small program I wrote.

The html files are only linked to the css in this folder. I set the program to execute in the pre-build event of the web app. So each time I modify the small css files and hit build the big css are being updated.

The definition on how to generate the css files from the files in css_m are included in a text file . Ini with the following format: ;please use the char ";" to write a comment (need to be the first char on the line) =..\css\main. Css General.

Css Layout. Css Nav_Header. Css Nav_Sections.

Css Nav_Pages. Css Footer. Css Pager.

Css Dialog. Css =..\css\emp. Css emp\Layout.

Css emp\Nav_Pages. Css this file will create 2 files (main. Css & emp.

Css) using the createcss. Exe program. Also the program will display a warning if there is a css file in its subfolder tree that wasnt included in the ini file.

I am including the program source and exe and ini here if anyone want to use it , but its basicaly pretty simple program :) the program is . Net framework 4 using visual studio 2010 http://www.mediafire.com/file/z4gnppa46d2qvqp/CreateCss.rar p.s. If anyone knows a site which I can put the rar there and which don't expire please tell me in a comment.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.