Just run it through ProCSSor (http://procssor.com or http://css.tl). Lots of options.
Ask HN: Anyone have a really smart way to organize css?
61–70 of 122 posts
Re: Ask HN: Anyone have a really smart way to organize css?
#62Here's an example of a super organized CSS, with table-of-contents, https://www.mint.com/css/rd/mint.css
Re: Ask HN: Anyone have a really smart way to organize css?
#63How I do it: 1 File. Single line styling. Order: Reset, html/body, header, container, footer, misc (h1, p, span, input). Indent (ie: #header { } -newline+tab- #header p {}
Re: Ask HN: Anyone have a really smart way to organize css?
#64Organizing the CSS is not a big matter, giving the correct name to the class and id will lead smart way to organize
Re: Ask HN: Anyone have a really smart way to organize css?
#65Don't overcomplicate things:
- Have only one CSS-file, unless your project is huge.
- Never use IDs
- Avoid reset CSS (espescially if you can ignore IE6/7
- If you think you need variables (like in SASS), you are probably thinking about it the wrong way
- Give classes functional names, not presentational
- Linebreaks after declaration. (Makes your CSS-file easier to navigate)
- Remember that you can use you media queries inside your CSS-file
Web designer Jens Meiert has some good articles:
http://meiert.com/en/blog/20090401/why-css-needs-no-variable...
http://meiert.com/en/blog/20080515/css-organization-and-effi...
http://meiert.com/en/blog/20070321/css-practice-pseudo-names...
Re: Ask HN: Anyone have a really smart way to organize css?
#66Earlier quoted context omitted.
ID's are useful for unique element styling which will always be a case in a website. There's certain elements that are absolutely unique. Goes hand-in-hand with javascript to ease selector targeting. I never scope ID's either, that's the wrong way to do it. An ID is always unique so it is top-level.
The problem with absolutely unique elements is that, in a complex enough website (that evolves over time), they often end up not being unique after all. I agree about IDs for JavaScript though.
"I agree about IDs for JavaScript though."
Would you mind elaborating on the JavaScript point? Is it for convenience with document.getElementById or something?
Using jQuery, I tend to prefer class selectors the same as in my CSS.
Re: Ask HN: Anyone have a really smart way to organize css?
#67Earlier quoted context omitted.
ID's are useful for unique element styling which will always be a case in a website. There's certain elements that are absolutely unique. Goes hand-in-hand with javascript to ease selector targeting. I never scope ID's either, that's the wrong way to do it. An ID is always unique so it is top-level.
Another problem with IDs is that they make the "point system" in selectors much more complicated than if you only use classes and elements.
What about an ID for main page elements and things that never will change like #header or #footer or #sidebar?
Re: Ask HN: Anyone have a really smart way to organize css?
#68my rules:
1) Layout and widgets only.
I start with a reset, then layout (block positioning), then widgets. Everything other than layout is a widget. There are no global styles. If there is one of it, it's an ID. If more, it's a class.
2) No (global) element styles! Ever!
No, not even a p { margin: xyz } or a ul { list-style-type }. Every element that cannot be referred to by class / id must look exactly like it would after the reset.
This avoids complex dependency chains where coincidence influences look. Widgets can be moved from one site to another and you actually have to think new widgets through rather than relying on the default values.
3) Avoid classes and id's as much as you can.
Have single base element with a simple but descriptive class name, and then specify the sub-elements.
For example: Instead of “div.content-title” use “#content h1″ (e.g. div#content with a h1 tag inside it).
Basically, design widgets which consist of one base element, and refer to sub-elements via longer expressions. Use indentation to separate sub-elements.
My strong preference is to maximize for human readability (=short dependency chains, descriptive widgets rather than single elements) rather than short CSS. Cascading within widget-scope is fine, but cascading with global styles should be avoided. I find that when I follow these rules, I like my CSS a lot more.
Re: Ask HN: Anyone have a really smart way to organize css?
#69I use a single file for each type of media (screen, print ...).
Each file has general styles first (HTML tags), IDs of layout boxes, classes to fine-tune formatting, and overrides at the bottom (if needed).
I like to keep spacing for readability (maybe minify the files when I'm finished).
Re: Ask HN: Anyone have a really smart way to organize css?
#70Earlier quoted context omitted.
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?
For me, at least in my rails project using Sass (scss): Development mode also creates inline comments in the generated CSS which describe where, in the original scss, the information can be found. What an awkward sentence. I need sleep.
Another option if you are using something like rails is in your development mode just link to the individual CSS files (http://forrst.com/posts/Rails3_Linking_to_CSS_Differently_De...)