Ask HN: Anyone have a really smart way to organize css? • Hacker News Board

Re: Ask HN: Anyone have a really smart way to organize css?

#111

Post by stalemath » Mon, Mar 28, 2011, 6:25 PM UTC

I usually include comments where necessary before a section, so in a file named global.css, I may have:

/* header / .header { margin: 0 auto; padding: 0; width: 800px; }

/ body / .body { margin: 0 auto; padding: 10px; width: 800px; background-color: #fff; }

/ footer */ .footer { margin: 0 auto; padding: 10px; background-color: #EEE; border-top: 1px solid #BBB; }

(this is just an example, assume the classes are for div's)

If I have multiple CSS files, I may just call one (style.css) in the of HTML document. Then within the style.css, I can just make a list of the documents using @import.

((by the way, this didn't come out the way I expected on here))

Re: Ask HN: Anyone have a really smart way to organize css?

#112

Post by kinofcain » Mon, Mar 28, 2011, 6:32 PM UTC

rimantas wrote: post #94

kinofcain wrote: post #34

Earlier quoted context omitted.

Exactly, as far as CSS is concerned an id is effectively equivalent to a class name except when it breaks things. Ids should be used only for scripts, and most of the time should be auto generated anyway.

It is not equivalent in any sense. Let's not forget specificity.

If you're relying on weird specificity chains, then your CSS is likely an unmaintainable mess.

Leave IDs for uniquely identifying an element on a page because you need to access it from a script.

Treating them like "Extra Strong" class names is a maintenance nightmare.

Re: Ask HN: Anyone have a really smart way to organize css?

#113

Post by halles » Mon, Mar 28, 2011, 6:50 PM UTC

simonw wrote: post #19

Natalie Downe, my co-founder, has a very neat technique for organising CSS which she calls a CSS System. She described it in this talk: http://lanyrd.com/2008/barcamp-london-5/sg/ She splits everything in to general styles (basic HTML elements), helper styles (things like forms, notifications, icons), page structure (header, footer, layout columns etc), page components (reusable composable classes for components that…

I think most of you who answered this reply missed the point where CSS is not HTML… ID's should be used when they suit better. The same with classes. You end up constructing semantical html which a) easier to maintain and b) won't mix the design with the content on code-time.

Re: Ask HN: Anyone have a really smart way to organize css?

#114

Post by halles » Mon, Mar 28, 2011, 6:54 PM UTC

I use 4 stylesheets:

- reset (duh) - layout (structural stuff) - typography (general typegraphic styles) - styles (stuff gets prettier than the already are).

As for the grouping o selectors, i try not to reuse much code so cascading will not mess stuff up, i'd rather make big css than fragile css. I also try to group code on a per section basis… just remember i do have a typography stylesheet which makes most of the stuff readable and pretty before the glitz rolls in.

Re: Ask HN: Anyone have a really smart way to organize css?

#115

Post by kentbrew » Mon, Mar 28, 2011, 7:08 PM UTC

simonw wrote: post #19

Natalie Downe, my co-founder, has a very neat technique for organising CSS which she calls a CSS System. She described it in this talk: http://lanyrd.com/2008/barcamp-london-5/sg/ She splits everything in to general styles (basic HTML elements), helper styles (things like forms, notifications, icons), page structure (header, footer, layout columns etc), page components (reusable composable classes for components that…

+1 for never styling by IDs, which are global variables and should be used when all else fails.

Re: Ask HN: Anyone have a really smart way to organize css?

#116

Post by tintin » Mon, Mar 28, 2011, 8:40 PM UTC

Pewpewarrows wrote: post #108

tintin wrote: post #100

Earlier quoted context omitted.

I checked the lanyrd.com stylesheet. I'm sorry to say but if your stylesheet is this big you are doing it wrong. 100K for a compressed stylesheet! So I'm not so sure her technique is a winner.

Oh really? Because every medium-to-large website I've ever looked at or developed has had a stylesheet that large. Facebook? Twitter? GitHub? 100k+ compressed stylesheets. Hell, even if your site is small-to-medium sized but very design-intensive, I could see you reaching that mark. Don't worry, I'm sure all those developers are "doing it wrong" too.

Well did you check the stylesheet of Twitter for instance? Only 40K but even then.. why even that big for a simple Twitter homepage!? So I'm sorry you did not convince me. And maybe, I know it's a bold statement, they are doing it wrong.

I think it also has to do with frameworks. Sometimes frameworks spit out a lot of HTML you won't ever need. So the HTML is bloated in the first place. Then it's a hell of a job to style the mess.

When you are fortunate to control the HTML you should first start to optimize your HTML before you even start with CSS.

Re: Ask HN: Anyone have a really smart way to organize css?

#117

Post by dools » Tue, Mar 29, 2011, 2:49 AM UTC

My colleague @camslizzle just put out http://stacklayout.com/ - it's pretty new but it has a lot of promise I think and has received some favourable comments around twitter and here on reddit: http://www.reddit.com/r/web_design/comments/g3p9d/introducin...

Re: Ask HN: Anyone have a really smart way to organize css?

#118

Post by mryall » Tue, Mar 29, 2011, 12:38 PM UTC

tomfakes wrote: post #4

Slightly related, but mainly a formatting issue, I format my css files as such: .foo { x: y; a: b } .bar { m: n } .baz { background: blah blah url(xyz.png) top left; x: y; i: j; } instead of the more commonly seen: .foo { x: y; a: b; } .bar { m: n } .baz { background: blah blah url(xyz.png) top left; x: y; i: j; } My format takes up less vertical space in the editor. Sometimes, I can get my entire CSS file into a sin…

If you're working on a project with multiple people, having the CSS properties one-per-line helps a lot with determining who changed what in your version control system.

Most of the command-line diff tools don't highlight changes within a single line, and annotation tools usually work on a per-line basis as well.

Re: Ask HN: Anyone have a really smart way to organize css?

#119

Post by simonw » Tue, Mar 29, 2011, 3:25 PM UTC

tintin wrote: post #100

simonw wrote: post #19

Natalie Downe, my co-founder, has a very neat technique for organising CSS which she calls a CSS System. She described it in this talk: http://lanyrd.com/2008/barcamp-london-5/sg/ She splits everything in to general styles (basic HTML elements), helper styles (things like forms, notifications, icons), page structure (header, footer, layout columns etc), page components (reusable composable classes for components that…

I checked the lanyrd.com stylesheet. I'm sorry to say but if your stylesheet is this big you are doing it wrong. 100K for a compressed stylesheet! So I'm not so sure her technique is a winner.

Lanyrd is a complex site - we have over 50 different page templates, all of which are styled using that one stylesheet. We get a lot of functionality out of that 100K. Not to mention that CSS compresses extremely well - served with gzip, the entire stylesheet is actually just 19745 bytes.

We use a far-future expires header (and serve from Amazon CloudFront), so browsers should only ever fetch the file once no matter how many pages on the site the user visits.

Re: Ask HN: Anyone have a really smart way to organize css?

#120

Post by andraganescu » Tue, Mar 29, 2011, 6:04 PM UTC

http://andreidraganescu.info/blog/1

I use this system for about 4 years and am still delighted on how easy it comes to me. In brief:

- Split up your style sheet according to rule types.

- There are three main rule types that help when split: grid, decorations and fonts.