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

Post by mattdawson » Mon, Mar 28, 2011, 4:40 AM UTC

erikpukinskis wrote: post #38

peng wrote: post #30

At some point, the amount of CSS complexity becomes best handled by a preprocessor. Stylus is great: http://learnboost.github.com/stylus/ I made a post about it, and personally prefer it to Sass and Less: http://nylira.com/stylus-the-revolutionary-successor-to-css/ The hardcore abbreviation mixins in my post seem to offend some coders. When you work in CSS and HTML hours every day though, every character saved adds u…

My current project has 30 directories with 73 partial Sass files, which compile down to one 320kb file. Isn't that a lot to download? That's like 2 seconds on average to download that file in the U.S., and probably in the 10 seconds or higher range for a lot of folks. I guess if the download is delayed to after some kind of engagement (sign up, etc) it's not a big deal? Is 320K of CSS really necessary? (legitimately…

Post by findm » Mon, Mar 28, 2011, 4:46 AM UTC

Post by panpainter » Mon, Mar 28, 2011, 5:19 AM UTC

nagash wrote: post #42

zefhous wrote: post #39

Ideally, I use Sass with Compass ( http://compass-style.org/ ). This alone is a great start to keeping things organized. One of the things I love about Sass is that it allows partials and variable declarations, which both help immensely with code organization. Then, my code is usually organized as follows. Each section can be extracted to a partial if it gets long enough or if more separation is desired. Framework in…

The biggest problem that I have with Sass is that the file/line references in your developer tools point at the compiled CSS files, and so you don't have any real reference to where in your Sass files that style is defined. Any solution for this?

Post by zefhous » Mon, Mar 28, 2011, 5:20 AM UTC

nagash wrote: post #42

zefhous wrote: post #39

Ideally, I use Sass with Compass ( http://compass-style.org/ ). This alone is a great start to keeping things organized. One of the things I love about Sass is that it allows partials and variable declarations, which both help immensely with code organization. Then, my code is usually organized as follows. Each section can be extracted to a partial if it gets long enough or if more separation is desired. Framework in…

The biggest problem that I have with Sass is that the file/line references in your developer tools point at the compiled CSS files, and so you don't have any real reference to where in your Sass files that style is defined. Any solution for this?

  Sass::Plugin.options[:line_comments] = true
  # or with compass:
  sass_options = {:line_comments => true}

  /* line 138, sass/screen.sass */
  #navigation a:hover {...}

Post by dogonwheels » Mon, Mar 28, 2011, 5:21 AM UTC

nagash wrote: post #42

zefhous wrote: post #39

Ideally, I use Sass with Compass ( http://compass-style.org/ ). This alone is a great start to keeping things organized. One of the things I love about Sass is that it allows partials and variable declarations, which both help immensely with code organization. Then, my code is usually organized as follows. Each section can be extracted to a partial if it gets long enough or if more separation is desired. Framework in…

The biggest problem that I have with Sass is that the file/line references in your developer tools point at the compiled CSS files, and so you don't have any real reference to where in your Sass files that style is defined. Any solution for this?