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

Re:Ask HN: Anyone have a really smart way to organize css? by bmelton on Sunday March 27, 2011 @10:38PM (#2376876)

I haven't used it, as there just hasn't been a project with enough lead time to experiment with something lately, but I'm fond of the idea of code generators for CSS, like CleverCSS for Python and Sass for Ruby.

Other than that, the best advice I can offer that I DO follow is that I group all HTML elements together, all IDs together, and then all classes together. Within each of those groupings, everything is in alphabetical order.

  body { foo: bar; }
  form { foo: bar; }
  h1, h2, h3 { foo: bar; }
  input { foo: bar; }
  p { foo: bar; }

  #container {}
  #footer {}
  #nav {}

  .etc {}
  .even {}
  .odd {}

and so forth.

[ Parent | on HN ]

Re:Ask HN: Anyone have a really smart way to organize css? by xdrone on Monday March 28, 2011 @01:46PM (#2379263)

my css is pretty simplistic like this also.

one thing to do is to place class names based on the url with your id's. the class name can be generated from the request_uri (assuming the html code is in a view/template/include).

example: <div id="container" class="contact_us">

then if you need tweaks to a specific page, just add #container.contact_us { foo: bar... }

[ Parent | on HN ]