Was that Mixpanel css written by hand? Maybe it's just slightly inefficient css generated by sass/less/stylus.
How We Could Write Better CSS
21–30 of 55 posts
Re: How We Could Write Better CSS
#22The author's wish is coming true. CSS techniques are already becoming unified through frameworks like Bootstrap and Foundation.
It is not the frameworks that are bringing about the change. http://oocss.org/ and http://smacss.com are bringing about this change. Bootstrap's CSS techniques are written with a heavy bias on OOCSS, and by doing that it is setting a good example. I'll give you that.
Re: How We Could Write Better CSS
#23I find that following a prefix method works quite well for organizing a lot CSS. For example (using sass): .home-header-h1{ font-size: 20pt; padding: 0px; margin: 0px; line-height: 1.3; } .home-header-h1-blue{ @extend .home-header-h1; color: blue; } .home-header-h1-green{ @extend .home-header-h1; color: green; } This helps keep classes out of your HTML and avoids large amounts of nested CSS. Here's the compiled sourc…
But with classes with "green" and "blue" in the names, you're still mixing meaning and presentation and hurting maintainability. See: http://thecodelesscode.com/case/95
Re: How We Could Write Better CSS
#24The way FB implements margins is terrible, there's nothing "semantic" about it - it's basically a single level of abstraction above whacking style tags onto elements directly.
Re: How We Could Write Better CSS
#25Deeply nested CSS selectors in the source (like the ones in your MixPanel examples) are often a sign of CSS preprocessors in use. Using a tool like LESS or Stylus, MixPanel is probably including mixins in their styles that allow them the same modular flexibility you describe without cluttering the HTML with confusing, non-semantic classes like "mrm". Edit: your site's visual design is awesome, btw
This * 1000. Just because the output isn't 100% optimal doesn't mean the input isn't sane, maintainable, or clean.
true, however, remember that the output must be sane too since you're putting it in the HTML
Re: How We Could Write Better CSS
#26This post is a little over the top, the examples are both legible and work, there is no need to get dramatic over CSS.
Re: How We Could Write Better CSS
#27I don't completely agree with author's opinion.
I think the Facebook Way (tm) has its pros, but using page-level specificity is a great way to avoid specificity hell.
To be more specific, for a site with vastly different pages, it's best to have page or section level class that limits the scope of each css definition, so the person making change to one section of the site will not accidentally break other pages. Also, with little base style, there is less need to override styles with more specificity.
For such a site, CSS like this tend to be easier to maintain:
#home-page h2 { /* home page title styles / }
.news-item h3 { / news item title / }
#widget-page h2 { / widget page title / }
.widget-item h3 { / individual widget title */ }
Re: How We Could Write Better CSS
#28OP here. Thanks for the feedback. A lot of people seem to be getting hung up on the sass thing. I'm all for sass, I don't think using 15 CSS classes for margins is the best way to handle this. I just wanted to use a watered down illustration for those who don't yet understand sass. Ideally, this should al be abstracted into variables/mixins/extends. My main point though, is that I'd like to see us working together to…
Extremely confused by the fact that there's no article navigation on your site. I just wanted to read more...
Re: How We Could Write Better CSS
#29I don't know, after dealing with hundreds of jsps and javascript files adding margins in all variety of ways when they should be a consistent size (that of course, has changed over time and not been changed everywhere) in an enterprise codebase I'll take the Facebook approach for margins any day over just directly modifying style properties..
Re: How We Could Write Better CSS
#30OP here. Thanks for the feedback. A lot of people seem to be getting hung up on the sass thing. I'm all for sass, I don't think using 15 CSS classes for margins is the best way to handle this. I just wanted to use a watered down illustration for those who don't yet understand sass. Ideally, this should al be abstracted into variables/mixins/extends. My main point though, is that I'd like to see us working together to…
Extremely confused by the fact that there's no article navigation on your site. I just wanted to read more...
Yeah, sorry mate. I just hacked it together. My CSS is horrendous too :)
I've two other articles: http://www.colmtuite.com/three-reasons-why-wireframing-tools... http://www.colmtuite.com/a-more-flexible-development-framewo...