How do you organize your CSS?

[kenquad]

The more complex layouts I create, and the more I move away from inline styles, the more bewilderingly long my css files become. It’s a real productivity killer when you have to thumb through 1000 classes to find the one you need, or stop and fire up the “find” tool to do it for you.

It’s tempting to split the css into many smaller files, but this presents a performance issue.

So, how do you keep your CSS organized for maximum productivity?

Do you separate it into many files and then maybe combine them in the final version?

Do you use comments to create sections?

Do you make use of a code navigator or some other piece of streamlining software?

Thanks.

[xhtmlcoder]

To me it sounded like the rarer - less common - styles were pasted back into the HTML markup itself, i.e. between the <style> which is rather weird unless I read that part wrong.

[Stomme_poes]

drool

No, what I meant was, if you have one rule that only ever shows up for one page, then what does it matter if it’s cached in the main style sheet (making it larger) or if the user just grabs it when they happen upon that page?

Most of my CSS applies to ALL my pages, so I use one stylesheet. But, mostly that’s maintenance reasons. IF I had a style that only applied to one page, especially a page that was least likely to be visited, I don’t believe I’d be losing any benefit by putting that one style in the HTML page itself. Move a few kb away from the main css, add a few kb to the special page. Meh. I don’t think you’ll notice any speed difference in that sort of situation.

AllanP sounded like he did it quite often though, and who knows how much would be too much… I’m just stating a hypothetical situation and claiming that in that situation, it wouldn’t matter either way. I certainly wouldn’t separate all my styles into various pages. I’m much too lazy for that. Larry Wall claims Laziness is a Virtue of Programmers, and I believe the Laws of Larry : )

Mmmm, chocolate…

[system]

Clearly divide your stylesheet into specific sections. you can get to the area you are looking for faster. Before you divide up your styles, it is important to define an outline you are comfortable with as will as a separator format you can notice easily.

[renownedmedia]

I’ll usually do layout rules at the top, starting at the top of the HTML and working my way down (header, content, footer). Then, when more functionality is required, append those at the bottom, keeping relevant information together. When building web applications, it may be beneficial to break certain sections up. For example, if a site has a video section use a video.css file, and for the forum section use forum.css. Some users may only use one or the other and would benefit from the files being broken apart.

Also, try not to do any crazy CSS indenting, it just wasn’t meant to be nested like programming languages.

[Stomme_poes]

the ‘role’ attribute which is invalid in the doctypes they use

Since I’ve started using roles for ARIA, and it has been accepted that there are two independent implementations (JAWS/IE/WIN, Orca/FF/Linux) of ARIA landmark roles (yeah borrowed from XHTML2 but in theory can be used anywhere), so I’m sitting here waiting for them to update the validator.

whistles

in the meantime, my pages are going slowly invalid, unless I want to use Javajunk to add them in. Which I’ve played with, but don’t like. They say “oh you can validate them with the HTML5 validator” but I’m not writing HTML5 so that’s out… been using Gez Lemon’s A11y toolbar for now, but I notice it doesn’t catch me when I misspell complimentary … er complementary lawlz

[system]

@Stomme_poes

I seriously want to see “Some Damned Site: a Turdpress Blog” come to life… if only as an example code site.

I would totally put it in my sig.

Use the stock skin for WP, then have as it’s posts going through and listing everything wrong with the default WP skin – could have sub-pages with the top/more common skins for similar dissection?

You know, like the title attributes redundant to the content of the anchors they are on, the absolute URL’s for EVERYTHING, the endless unneccessary div, the inlined style for nothing, use of paragraphs around form elements, h2 inside LI (usually meaning it shouldn’t be a list in the first place), the ‘role’ attribute which is invalid in the doctypes they use, use of multiple presentational classes on elements instead of saying what they are, believing the 62.5% myth, etc, etc, etc…

… and that’s just the stock skin which is the BEST of the lot compared to most of the custom templates out there.

[Stomme_poes]

Instead of having to rewrite the bad code over and over again, I seriously want to see “Some Damned Site: a Turdpress Blog” come to life… if only as an example code site.

I would totally put it in my sig.

[system]

@ccRicers

That is, instead of giving every single element a class name, I just look to see how high I can go on the element levels to name a selector there, and base all the other elements’ styles off that name.

Exactly – that’s kinda the whole point of the ‘cascading’ part of Cascading Style Sheets.

It’s why when I see nonsense like this:

 <div id="header" class="clearfix">

  <div id="header_top"> 
   <div id="logo">
    <a href="http://http://somedamnedsite.turdpress.com/">Some Damned Site</a>
    <h1>A Turdpress Blog</h1>
   </div>
   <div id="header_menu">
    <ul class="menu" id="menu">
     <li class="page_item"><a href="http://somedamnedsite.turdpress.com/">HOME</a></li>
     <li class="page_item page-item-2"><a href="http://http://somedamnedsite.turdpress.com/about/" title="About">About</a></li>
    </ul>
   </div>
  </div>

  </div><!-- #header end -->

(and yes the original turdpress skin I’m basing that on DOES the double http:// too) I wonder just what the **** the developer was smoking with that garbage. Especially since for 99.9% of the appearances that said markup is used for doesn’t need anything more than:

	<h1>
		<a href="/">
			Some Damned Site<br />
			<small>A Turdpress Blog</small>
		</a>
	</h1>
	
	<ul id="mainMenu">
		<li><a href="/">HOME</a></li>
		<li class="last"><a href="/about">About</a></li>
	</ul>

MORE than enough hooks to apply all the same styling as the original.

@ccRicers

Additionally, I prefer to see each CSS attribute get its own line instead of cramming all of what styles a class or ID into one line. Makes better sense for debugging and spotting errors in the text editor.

Spot on. I’ve rarely if ever seen the people who do the slap it all on one line routine not make the mistake of decaring the same property twice, and it’s no wonder; it’s such an illegible mess you can’t even tell half the time where one property begins and the next ends - made even WORSE when they go and cram spaces everywhere EXCEPT between properties.

You make one property per line, tab them in, clear as a bell. You get a nice list of what properties are declared you can quickly go over.

Makes me wonder if the people who do shove it all on one line are on some crappy editor or undersized display that can’t show more than 10 lines at a time or something… but then I’m spoiled as I find it hard to even think about coding on anything that won’t show me at least 50 lines at a time anymore.

Basically, a lot of times it’s just sloppy coding habits and sleazing it out any old way that cause the REAL headaches for developers – and they are so blind to their own bad habits being the core of their issues… but then I learned high level languages from a Nun with a ruler. THWACK INDENT!!! THWACK DE-INDENT!!!

I really think a lot of programmers need a firm hand with a paddle when it comes to things like that.

[system]

[ot]Actually, when I typed those three words examples it reminded me of… http://www.youtube.com/watch?v=H7CxWNY829Y

Wasnae directed at you… though for latin phrases I always preferred quando omni flunkus moritati[/ot]

[system]

since most of the other tools like macro’s and so forth you end up wasting so much time setting them up and screwing around with them you never actually write anything… <snip/> besides by the time I remember what ones I have set up, I can just type the damned thing out in less time. I can’t agree more with deathshadow60

[system]

@Stomme_poes

As I’ve said before, 99% of the time the reason I have classes with names like .center or .bold is because, for no reason, I’m told “could you make this thing here green and bold, and center this sentence? I think it looks nicer.”

For “NO” reason?!? Then what the *** business do they have changing it? Just WANT it to look like a fly by night scam or something? (Sorry, but from what you described, all I could picture is one of those types of sites)

I mean, is it a STANDOUT, could a semantic tag like EM or STRONG make more sense?

I would immediately be asking “what about this MAKES it that way” – if they can’t answer, I’d tell them where to shove it… though that could be a hefty part of my total disgust with the entire industry of late.

@Stomme_poes

Easiest solution? Make that h2 <h2 class=“clear”>. Is there a better one? Only if there’s some content reason why the client wanted the thingie above to sit to the right or left. Usually, there isn’t.

… and is there a perfectly good block level container around it? Is there any unique identifier already on it? If you have to put a presentational class on it or add one, I’d suspect something was wrong with the markup in the first place!

@Stomme_poes

Heaven forbid keyboard commands are allowed in a text editor lawlz. Switching an extra step? 99% of the time, I’m pulling up files and other admin stuff first (though you can also do that in the command to start vim itself too).
Plus you skip the step where you start up your graphical text editor. You’re already in the terminal, you just type vi filename and you’re there. Much less work.

Yeah, but if I wanted to spend all my time dicking around on the command line, I’d still be using Xenix on my Trash-80 model 12.

[kenquad]

@deathshadow60

The so called “IE image toolbar” is the bit that pops up over a image when you hover over it for a bit including the options to save, resize or whatever.

Oh, I remember that. It doesn’t bother me.

[Sega]

@donboe

In most cases the designis are approved, but you probably know how things go. You have those situations where you have to deal with such things. I’m not talking about major adjustments but it are adjustments.

Clients always change their mind. I know how it works. It depends how you convey the message to them. I always found that when this did happen it was the sale-person too eager to bag the client and rush their decision. It’s always good to let the clients wait 3 - 4 days prior to approving the design. Even so, they still often change their mind.

[donboe]

@Sega

Have you tried to get the site designed and approved prior to development. Adjusting a design is easy, but I can’t imagine how it’s like when you have to design on the fly whilst the client asks for changes.

In most cases the designis are approved, but you probably know how things go. You have those situations where you have to deal with such things. I’m not talking about major adjustments but it are adjustments.

[gary_turner]

@Sega

So creating a clear class is the only way I know how to clear something properly.

There are several ways to clear or encapsulate floats. None are panaceae, including the clear property; each having gotchas. See Enclosing Float Elements.

cheers,

gary

[system]

@donboe

After that I aways declare some general classes: floats, dispays and clears, in every possible combination (this helps me to keep the style sheet organized), because before I always found my self creating a new class when I needed something floated or cleared, but this way I just add an already existing class to an already existing element. After that that indeed from header to footer.

Now, I might be reading what you said wrong, but if I’m reading this right… uhg. Problem with this approach is you’re defeating one of the points of using CSS in the first place, getting presentation the devil out of the markup.

I mean, if you’re going to have classes for “clear” or “floatLeft” or “bigFont” – at that point why bother using CSS as you’ve gone back to doing nothing more than aliasing <CENTER>, ALIGN=“LEFT” and <FONT size=“3”>… If that’s what you mean, it’s the same as the people using javascript to emulate TARGET because target is deprecated in STRICT - COMPLETELY FORGETTING WHY it’s deprecated in the first place! You might as well go back to using HTML 3.2 and pretend CSS doesn’t even exist. (Same thing I say about most ‘frameworks’ like YUI or Blueprint)

At that point the net improvement to the code? ZERO. COMPLETELY missing one of the entire improvements CSS makes possible.

Used to be a joker around here who did that using nothing but one and two letter classes – absolute TRAIN WRECK when his code looked like:

<div class=“l c fb j hw b”>

especially since those were all presentational in nature – COMPLETELY MISSED THE POINT of CSS.

“content”, “mainMenu”, “footer”, “article”, “sideBar” - those are good class or ID names. They say what the element IS, not how it’s going to appear. Appearance has NO business being in the markup unless it’s basically shoved down your throat by a design element… in which case change the design

But I’m a real stickler for separation of presentation from content – the only concession being use of semantically neutral tags as wrappers or sandbags to make up for all the stuff CSS3 is supposed to fix. (and might be real world deployable in about a decade)

I may have misunderstood your meaning on that – but it really sounds like the code I used to spend a lot of time cleaning up for others and/or modernizing.

[Sega]

@donboe

I find myself always adjusting, because the client suddenly want another section added to the page.

Have you tried to get the site designed and approved prior to development. Adjusting a design is easy, but I can’t imagine how it’s like when you have to design on the fly whilst the client asks for changes.

@deathshadow60

if you’re going to have classes for “clear”

I have classes for clear, what else would you use? If I want to clear something then I normally create a class like this:

.clear {line-height:0px; 
          font-size:0px;
          height:0px;
          clear:both;}

HR is terrible for clearing. It should be removed from use completely. So creating a clear class is the only way I know how to clear something properly.

[Stomme_poes]

If it’s columns, there’s probably another column or the footer after, if it’s a leading plate or trailing plate, it’s usually inside a div.article or some such where I can put the clearing behavior on that parent.

If I’m floating big things like that, I never need any clearing classes… because all the Big Things have some kind of name I can use.

Off Topic:

Ok I don’t have Flash, but I did have a nagging suspicion that it was a schoolhouse rock song… lawlz

[goldfidget]

One CSS file for global styles, header, footer, etc. then one for each page type. It means I’m pulling 2 files instead of one but the files themselves are dramatically smaller.