Comments on: Improving Your Process: Thinking More About Your CSS

By: Year in Review: Highlights from 2009 - Monday By Noon

Year in Review: Highlights from 2009 - Monday By Noon — Sat, 06 Feb 2010 16:45:21 +0000

[...] Improving Your Process: Thinking More About Your CSS [...]

By: Duncan Macdonald

Duncan Macdonald — Mon, 15 Jun 2009 00:59:56 +0000

It’s a fair point, and I generally structure my CSS in much the same way as yourself. I would disagree that you ‘need’ to do it though, it’s really a personal matter, however annoying that may be to other people. And I’ve definitely had to spend more than my fair share of time sifting through unkempt, randomly ordered stylesheets, trying to make some sense of them.

If you work solo, write any old mess you want, but if you have to work with anyone else, keep it tidy. It makes life a lot easier for everyone.

By: Leon Paternoster

Leon Paternoster — Sat, 13 Jun 2009 19:36:26 +0000

I use just one CSS file. I don’t use comps: the markup comes first and the CSS fits around that.

The organisation depends on what I’m designing. If it’s a simple blog theme it’s: basics (reset, html, body), layout, typography and then the individual area changes (header, nav, content, comments, sidebar, footer). I’m pretty disciplined when slotting amendments in.

If I’m designing something a bit more complex then I tend to take a more modular approach (which corresponds to OOP, I guess). So I’ll start with the basics, set the grid and then declare lots of reusable, presentational classes and organise them along the lines of colour, rules, size and proportion. ‘Unsemantic’, but HTML5 will solve that problem.

By: JR Tashjian

JR Tashjian — Fri, 05 Jun 2009 16:57:31 +0000

Writing better CSS has always been important to me. I do stray from structure for small edits, sometimes. I used to be the person who appended changes to the end of the document. Usually do to laziness or because there are multiple CSS files to search for the correct place.

I like the way you structure your CSS, starting globally and working down to the details. I tend to have a very small global declaration and put details into every other declaration. This is something I am working on… Finding the pattern, as you mentioned.

Awesome article!

By: Rahul

Rahul — Fri, 05 Jun 2009 11:42:22 +0000

There’s a tool now to organize css like you mention – styleneat.com – works great.

Good read, nevertheless.

By: Jonathan Christopher

Jonathan Christopher — Thu, 04 Jun 2009 12:54:42 +0000

@Ben Carlson: You’re definitely not alone in segmenting your stylesheets into separate files. I gave that a go for some time, but didn’t like the setup/maintenance factor. It was cumbersome for me to edit two files to style a single element. It was rare though, as type is quite global in comparison to everything else you style. I do see the value in abstraction, but personally prefer to have everything combined. Thanks for the notes!

@Julie: Glad to know it’s not only me consistently checking into myself as far as my styles go!

By: Julie

Julie — Thu, 04 Jun 2009 02:51:19 +0000

Ha! I structure my stylesheets the exact same way you do! Call me crazy, but I also use consistent “typography” in my comments to indicate up to four levels of headings and subheadings. I recently started experimenting with indenting child elements as @Ben Carlson described above, but I have mixed feelings about it. I think it’s something I will only do (if at all) in the page structure section.

By the way, I don’t think it’s at all strange that you put so much emphasis in the quality of your stylesheets. I think a big part of the fun of CSS is making your styesheets as beautiful as possible, because code is poetry! Even though I am pretty sure I know what works best for me, I am endlessly fascinated by other people’s methods.

By: mysticpixels

mysticpixels — Wed, 03 Jun 2009 10:27:35 +0000

You are true … its the pattern identification that plays a key role in building a custom css framework

By: Ben Carlson

Ben Carlson — Mon, 01 Jun 2009 16:04:22 +0000

I’ve been trying to keep my stylesheets in order as much as I can (for the most part). Even though I’m not a very good coder, I try to emulate actual programming by indenting my CSS. So, any child is indented from its parent. I usually start my CSS out with a very basic margin and padding reset, and work my way down the HTML structure, starting with container, then header, then navigation usually, then content, footer, etc. Then, I too, have page-specific styles towards the end (unless it’s #container.homepage and #container.content_page where I’ll put the styles near the other #container styles).

One thing I have been doing, and liking, is separating styles out into layout.css and text.css. This may not be a perfect solution, as I know it’s extra HTTP requests, but it works for me, and it’s not like I’m developing sites where that extra request is going to be a problem. It helps me keep things organized, kind of like separating style from content.

I haven’t tried doing too much “OOP” styling, but I’m hoping to experiment with it a bit where new projects allow.