How do you organize your CSS?

Oh, something else occurred to me I thought I’d point out, as via PM I must helped someone clean up a page where they had tons of bloated markup and tons of classes… for no reason. Lemme give you a quick example of the markup that was involved. The markup was the root of the problem even though he was asking me about CSS.

He had a table - now, there’s nothing wrong with tables for tabular data like an excel spreadsheet, it’s what they’re for… but I often say the problem with tables had nothing to do with it being a ‘hack’ but instead had to do with people not understanding how to build one properly or even realizing that there are more tags that can go inside a table than a TR and TD… I’m referring to CAPTION, THEAD, TBODY, TFOOT and TH – quintet of tags most developers seem blissfully unaware of…

To paraphrase his table (stripping out his data and turning his 10x40 grid into a measly 3x3):


<table id="someData" class="someData" cellpadding="0" cellspacing="4" border="1">
	<tr>
		<td colspan="4" class="title">Table Title</td>
	</tr><tr>
		<td class="empty">&nbsp;</td>
		<td class="columnHeader">Column 1</td>
		<td class="columnHeader">Column 2</td>
		<td class="columnHeader">Column 3</td>
	</tr><tr>
		<td class="rowHeader">Row 1</td>
		<td class="data">Data 1-1</td>
		<td class="data">Data 2-1</td>
		<td class="data">Data 3-1</td>
	</tr><tr>
		<td class="rowHeader">Row 1</td>
		<td class="data">Data 1-1</td>
		<td class="data">Data 2-1</td>
		<td class="data">Data 3-1</td>
	</tr><tr>
		<td class="rowHeader">Row 1</td>
		<td class="data">Data 1-1</td>
		<td class="data">Data 2-1</td>
		<td class="data">Data 3-1</td>
	</tr>
</table>

779 bytes

The class on the table wasn’t even used anywhere else… there was no reason to use a ID instead of a class, MOST of the values on the table declaration have no business even being IN the markup, and not ONE of the classes or attributes on his TD are neccessary.

His resulting CSS was something like this (no joke):


table#someData.someData { background:#CCC; border:1px solid #000; }

table#someData .title { padding:4px 0; text-align:center; background:#FCC; border-left:1px solid #000; border-right:1px solid #000; border-top:1px solid #000; border-bottom:0; }

table#someData .colHeader { font-weight:bold; padding:2px 6px; border:1px solid #000; background:#CFC; }

table#someData .rowHeader { font-weight:bold; padding:2px 6px; border:1px solid #000; background:#CCF; }

table#someData .data { padding:2px 6px; border:1px solid #000; background:#FFF;

table#someData .empty { background:none; border:none; }

608 bytes

…on top of ‘table#someData.someData’ being wasteful (and a serious whiskey tango foxtrot), there’s hordes of redundant values being declared like the padding that could simply be attached to every TD.

So as I often say, the first step is to fix the HTML. That first colspan TD should be the CAPTION, the next row should be TH inside a THEAD, the .empty can be targeted as a TD, .rowheader should be TH inside TBODY, while the remaining .data TD can simply be TD.


<table class="someData" cellspacing="4">
	<caption>Table Title</caption>
	<thead>
		<tr>
			<td></td>
			<th>Column 1</th>
			<th>Column 2</th>
			<th>Column 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Row 1</th>
			<td>Data 1-1</td>
			<td>Data 1-2</td>
			<td>Data 1-3</td>
		</tr>
		<tr>
			<th>Row 2</th>
			<td>Data 2-1</td>
			<td>Data 2-2</td>
			<td>Data 2-3</td>
		</tr>
		<tr>
			<th>Row 3</th>
			<td>Data 3-1</td>
			<td>Data 3-2</td>
			<td>Data 3-3</td>
		</tr>
	</tbody>
</table>

530 bytes

Provides ALL the hooks we need to apply that styling… and the ONLY reason we have to use cellspacing is that FF and IE are BOTH still complete retards about handling the border-spacing CSS attribute.

The CSS for that is simplified down too.


.someData {
	background:#CCC;
	border:1px solid #000;
}

.someData caption {
	text-align:center;
	padding:4px 0;
	background:#FCC;
	border:solid #000;
	border-width:1px 1px 0;
}

.someData th,
.someData td {
	padding:2px 6px;
	border:1px solid #000;
}

.someData thead th {
	background:#CFC;
}

.someData thead td {
	background:none;
	border:none;
}

.someData tbody th {
	background:#CCF;
}

.someData tbody td {
	background:#FFF;
}

469 bytes

Basically by getting rid of every class except the one on the outermost container and the extra bits we don’t need in the CSS like saying what tag the ID or class is on, we not only reduced the markup by 32% (more like 60% on his 15x40 table), it shaves 23k off the CSS. If you format the CSS the same way as his original, it only sheds 30 more bytes! (why bother)

It illustrates something I was saying earlier – a firm grasp of the basics of HTML is the first step to writing good CSS. To flog the deceased equine, CSS is only as good as the markup it’s applied to… especially if you exploit the advantages of semantic markup and the ‘cascading’ part of Cascading Style Sheets.

For reference, I took his page which had little to no formatting and was 90k of markup and 30k of CSS, and dropped it to 20k of each. It was literally an example of “not every ejaculation deserves a name” being represented as “not every TD needs a class”… or should even be a TD for that matter. It’s like when you see

<p class=“heading”><b>My Heading</b></p>

You just want to take them across your knee with a paddle at that point. :kaioken:

No, I think I read it right given your examples you’ve completely missed the POINT of CSS and by practicing adding/removing classes in the markup instead of properties in the CSS, you do NOT have separation of presentation from content or modern coding techniques. I’m willing to bet your CTC ratio is in excess of 6:1 after doing that. If you have to change your markup to flip something like a float, you completely wrote your markup wrong / decade PLUS out of date in the first place!

If you’re setting a bunch of things the same, always remember that thanks to specificity and source order you can change it again later targeting just the single element - WITHOUT going into the markup. That’s kind of the point of CSS.

you’re welcome and no problem :lol:

but who knows, someday…

Thanks. But no thanks. Like I said I don’t like messy stylesheets and markup. I’m okay how I use it

one thought: before making 1-3 class names that don’t mean nothing, i shorten the names the old way (there is always an old way!) by removing as many vowel and consonant as possible but still having enough to guess.

.fllft {
    float: left;    
}
 
.flrgt {
    float: right;   
}
 
.inl {
    display: inline;    
}
 
.blk {
    display: block; 
}
 
.clrbth {
    clear: both;    
}
 
.clrlft {
    clear: left;    
}
 
.clrrgt {
    clear: right;   
}

Hehe,
he said “tranny”

hehehehe :stuck_out_tongue: … I don’t think you will find much opposition on that front. I never understood it either. What would you think it’s Code-to-Content ratio be one of these grids then? :lol::rofl::rofl:

i guess he has a better luck finding FPGAs boards or ARMs, like older GPS devices nobody wants anymore, to do assembler programming.

I went to a few web seminars and they were all trying to convert everybody to this grids, saying how stable and fast they are in terms of cross-browser support and how little effort they required.

After they showed me the code I saw something like 30 odd classes in the most mis-represented way possible. I could not even imagine how one would get around it. It just seemed like they were trying to make something I already know simpler by complicating it. Not to mention the CSS you have to include, which by most accounts is redundant code.

Recently I have started to design in a grid-format, but the coding is still done myself. Designing in grids looks more attractive I think, and it’s spaced out nicer. What’s your take on this?

The infamous CSS3 and HTML5, I remember when people were talking about this in 2005. Is it actually ready for use yet? I kind of like Aptana as my editor, and JEdit. They really do a good job too. :slight_smile:

wouldn’t be nice if all the code was to be “beautified in reverse”: changing names for class, id, function, variable consistently all over the site?

Actually, no… because at least where I work, we often get problems when my static HTML is converted over to some template (usually Smarty). In those cases, I diff the two files in vim to find where the screwup was. I’ll need the names to be the same for testing like that.

However, I’m sure that’s not how most places are set up, so I can’t speak for anyone else.

i guess i look to the code as not that important to be easily read by world’s eyes.

This is the part I agree with you (in general)… while it’s sure nice to be able to read someone’s code when doing a view source, if it’s a large page with lots of HTML and lots of CSS and everything else, looking nice isn’t necessary for the browsers… browsers don’t care, and so long as user agents are the ONLY ones looking at the code, then no, it doesn’t have to be pretty at all.

It just happens that how it works here at my job, WE humans also end up looking at the production code : )

Sandbags are either empty elements (<span></span>) or extra wrappers (wrapping another <div> around the meaningful box you had originally) to contain extra background images, or be a destination for javascript insertion sometimes.

I consider the empty div I was forced to create for silly Share-this icons a sandbag as well. Share-this wants you to have their invalid span-things sitting in your HTML. I refused and further-bloat the jQuery on the page to insert their HTML into an empty div. This way, js-less users don’t have to have all the span-things showing up and not working right.

.cnt = content
.btn = button
.rnd = round
.wrp = wrapper
.link = links
.main-wrapper {}
.quote = quote

I’ll actually use “content” and “button” and “wrapper” for my names, because there’s nothing else to them (no other names). I haven’t had quotes in my pages but if I did, I’d use the q element (Gary Turner has a nice example of how to actually get those elements to work in HTML/CSS also in IE on his page here <–scroll down to “Second Thoughts”… this is what I’ve used the one or two times I’ve had quote elements).
But for example I still have code like

<input type=“text” id=“HuisgegevensStraatNummer” name=“HuisgegevensStraatNummer” value="" />

in forms because those id’s are used in the back end for processing and I must have my HTML id’s and names conform to the back-ends. Here is where the strange long names and mixing of case come in. The other id’s and classes are just mine and there is no fighting.

Honestly, I’m not sure why most people who use them, use them. I’ve read Jeff Croft’s explanation of why Blueprint (one of the first grid systems) was developed, and it sounded like it made sense for what his team was doing (churning out a bunch of similar sites for different customers, and the whole team had access to some sort of styleguide everyone used), but I wouldn’t like working with 15 classes with names like .sq-15-w-130 because that’s just damn hard to work with (unless, as Jeff says, you’re using those all the time for a crapload of similar sites). That and the types of sites you see listed as “success stories” on the 960 site are stuff that is simply written completely differently than I would.

Somewhere around here (several months back?) there’s a thread asking how people use grids or not, and Paul O’B gives an answer on how his experience was using his first grid. The problem was that the client wanted a site that didn’t fit in the grid. Yeah, that’s a problem. Maybe if their design HAD fit in the grid it would have been easier.

Layout and common for me. Layout gets duplicated per browser changed or just overriding features.

Grid systems like 960 and YUI

Code To Content. You take the raw CDATA, no tags, and you compare it to how much code you are using to deliver it.

While there are tools to determine it, the easiest way I’ve found is to hit CTRL-A in a browser that doesn’t copy markup to the clipboard (like Opera), open up a decent text editor, hit ctrl-v, and let the text editor tell you how much text there is.

I usually compare that number to the size of the markup, as well as the size of all code involved. Good rule of thumb is anything over 3:1 HTML to plaintext is rubbish – though LOTs of images and LOTS of form elements can make it go higher. (selects with absurd numbers of OPTION tags for example)

Then comparing ALL code – HTML + CSS + JS for the second ratio. IMHO there 8:1 is the ideal, 10:1 is acceptable – anything over that tends to be trash.

Take the homepage here on sitepoint. Right now there’s 6.6k of plaintext (content), and they are using 73k of markup to send it – so the markup is in excess of 10:1 – that’s bad, but forgivable. Overall they are using 320k of html, css and javascript to deliver 6.6k of plaintext, a ratio of around 50:1 – so that’s embarrassingly bad.

You go to Yahoo’s home page, and they only have 5.6k of plaintext, which of course is why they need 188k of markup for a 33:1 ratio and 780k of javascript, css and html for just under a whopping 140:1 – their ineptitude knows no bounds.

(mind you those ratios are rough approximations in my head)

This and ds60 are a pretty good explanation of how I organize a lot of my CSS. My reset statements come first with my general sitewide styling items (what’s a paragraph look like, what are my basic typography conventions like line-height, etc.). Then I write my layout, mostly CSS-P to arrange my XHTML element on the page as I want them positioned.

Then I use a second stylesheet to write the colors, borders, etc. Mostly these are long series of selectors for a declaration or two, very short compared to the structural code. However, this let’s me easily rework the sitewide appearance at any point in the future whether it’s tweaking or changing colors wholesale or adjusting the border widths. Coloration has a section, as do borders, background images, typography, etc. I follow this with my OO-CSS components which are a series of style rules grouped under a comment that names each component.

I think this is simply a disagreement about the size of the website. People with big sites usually argue that performance optimization is GOD, they also usually have the luxury of working at a big company where they can put in years learning the ins and outs of one system and this makes sense in that environment. People with smaller websites stress readability and maintainability because you generally don’t make a living on a couple small websites, you need to take care of a bunch of them and learning fifty screwing naming systems is simply unacceptable.

That said, I do take issue with the idea that “educated” or smart people have an easier time reading gibberish than anyone else. Certainly, the bulk of best practices on the server-side are to increase the simplicity of the program. Performance optimization in programming is only done as a last step and then to achieve the minimum possible optimization that still meets the predefined benchmarks. While optimization is important, it comes at the expense of maintainability so you optimize only for the purpose of meeting spec and no further.

Which matches my experience with it. Quite often optimizers, especially when it comes to the HTML, fail to understand that your CSS might be displaying a block-level tag as display:inline, and by stripping the white-space it changes the formatting.

It’s one of the things I mean when I badmouth dreamweaver – quite often you load the code I’ve written into dreamweaver, make NO changes and just hit ‘save’ and it breaks the layout… Minify type scripts, especially if applied to markup can break things even worse!

I’ve even seen cases where it breaks pages because it removed comments though as I point out time and time again, that’s entirely the habit of putting the comment after a closing tag instead of before it where in FF it will sometimes act like a BR (script tag had the same issue in one version of FF IIRC) and in IE if the comment ends up between floats you’ve got the double-render or dissapearing content bugs… Which is funny because then minify would actually FIX IE while breaking FF.

I love laughing at the people who end up resorting to IE conditional comments for IE7 when all they have to do to fix the page is either remove the comments or move them INSIDE the element they are for instead of between sibling elements.

Or the take the old trick of putting a comment inside a empty tag so you can set any height on it in IE… mind you that trick can now be replaced with font-size:1px; – but it’s another example of something minifying the markup can totally screw up.

CSS on the other hand should NOT break due to minification/whitespace stripping because it has clear rules and isn’t white-space sensitive… though make sure you put the ; at the end of every declaration as for example:

width:180px}

Breaks in some browsers, though damned if I can remember which ones. (might not even be true anymore, I think that was some 1.x version of Gecko that had a regression?!?)

Again, headaches… and in the case of CSS, is it REALLY worth 2 or 3 bytes per line of code on average in the grand scheme of things?

Is this the kind of website you mean - http://willpeavy.com/minifier/
and this - http://www.cssdrive.com/index.php/main/csscompressor

I did use those sites, but like I said, I cannot write natively .wa1 etc. and know what I mean. These programs also tamper with your code, making it do weird things.

@Sega

i think that even smaller sites would benefit. and think about mobile. yes, you lose readability. who cares, you don’t teach “how to write understandable html”, you offer a no nonsense web page. the ones who care enough should be educated enough to be able to read that code.

This would really have to be a very big site to be worth all this trouble. In any other normal scenario I cannot see this working, I certainly would not bother for a 8 page website. From your point of view it must be worth it, and it will probably save you a lot of money so ye, I can see this working for you.

When you said that the classes do not have to make sense, were you serious? I mean would you code something like “.w1{}”, instead of give it a meaningful name. How would one do this without getting lost? I don’t suppose you would have automated software to cope with this kind of process, or would this simply be a process of doing find-replace a series of times? How would I know what class w1 is, I would probably need some kind of name-sheet.

Just to get an idea here, how many pages does one of these sites have? How many visits per month? And how much bandwidth?

Again, headaches… and in the case of CSS, is it REALLY worth 2 or 3 bytes per line of code on average in the grand scheme of things?

In my opinion I have to say no, it seems like a lot of trouble, and even with CSS code minify will have a negative affect on the functionality of the code (it does tamper with the code). I know with HTML is just messed everything up.

I am wondering how one would use this minify thing constructively, or if there is something I am missing. Maybe there is a plug-in which is full proof. The website’s however do a pretty bad job.

I keep saying this, I cannot natively write .wa1 as a class in my code, and understand what it means. I would need a description sheet, it would be a nightmare!

Dreamweaver is something that anybody who knows his code can do without. Just to illustrate I don’t even have Dreamweaver.

Web design, at it’s full glory, is too complicated to be confined to grids.
What would you do if you had several boxes overlap in the design? and each box had some function to it?