Stubbornella

No I'm not arguing for style attributes, that's a maintenance nightmare waiting to happen (with very little waiting needed!). They are a layer of indirection indeed, but which of these do you think conveys more information/semantics to the developer (these aren't bootstrap specific classes, just illustrative):

<div class="sidebar">
<!-- content -->
</div>

<!-- or -->

<div class="sidebar grid-one-whole grid-one-half-medium grid-one-third-large">
<!-- content -->
</div>

The second one is way more verbose, but at a glance you know exactly what is happening (assuming my class names are obvious enough). The classes convey information that an amalgamated class you get from @extend simply cannot.

First let me say that a lot of what I'm talking about is optimal for building large-scale web sites with lots of page variants. Your mileage may vary for smaller sites, the principles can still be applied, but you might not need adhere to them as strictly.

There's been a movement in recent years, Object Oriented CSS (OOCSS). This ethos urges the developer to write CSS as they would other code, using the hard lessons that have been learnt in other language. We should be thinking in abstractions, utilising the single responsibility principle, favouring composition over inheritance, loose coupling, and self-documenting code. I'll go through these one at a time, because the benefits of each flow throughout one another.

Abstractions - using a single class like "sidebar" to contain…

They're different approaches to managing the connection between presentation and the page. Mainly it's whether you're handling changes to the presentation primarily through the CSS or through the HTML.

-Semantic markup stresses using classes on DOM elements that describe what they are rather than how they look. Example: instead of using span class="red", use span class="error", to avoid the ridiculousness of having .red {color:blue;} in your CSS if you want to change it.

- OOCSS is an attempt to use reusable components for presentation to manage the complexity of maintaining large amounts of stylesheets. In the previous example, you'd probably still run into exceptions - if you had one error that you wanted to be blue, but keep the rest red, you'd have to add more specificity to do it: .thisoneexception .error {color: blue;} Now you're dealing with specificity wars (http://numiko.com/labs/2011/css-specificity-wars/) and maintainability issues.

The benefit of OOCSS is in simplifying things to make your life easier by reusing code. For example Nicole Sullivan's media object (http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) This is a type of layout that shows up all over the web. Instead of rewriting the css to achieve that layout for every individual semantic element, you just use those classes to get that layout.

A downside to this approach is that presentational info tends to creep into your HTML, which can get awkward.…

Yes they can.
If you are interested here is how the rendering works.

The rendering happens in batches, the first render is always an expensive operation and includes both "paint" & "layout".

- The "layout"-operation recalculates the tree of visible elements.

- The "paint"-operation paints the element and is commonly done using a software rasterizer.

Every subsequent render happens if an DOM-element triggers a layout or a paint (or both). A re-paint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout. Examples of this include outline, visibility, or background color.

When you use GPU-accelerated CSS properties such as opacity, translate, rotate & scale, both layout- and paint-operations are not executed. The GPU handles the changes for those properties. This is how famo.us wants to achieve its "60fps".

React by itself can cause expensive operations too if you trigger a CSS property that is not GPU-accelerated. In the process of rendering, a DOM-element can be destroyed and recreated when your state or model changes. So be vary of third-party React-components that promise "fluid" or "fast" speeds. IMO animation is still a research-topic for React. Their manual currently lists a method for basic CSS animations and transitions, but it's projects like React Canvas that make React a worthwhile contender for performant animations.

http://facebook.github.io/react/docs/animation.html

Mobile browsers are no different to…

Suprised no-one has mentioned Nicole Sullivan's (amongst others) Object Oriented CSS (OOCSS) project: https://github.com/stubbornella/oocss/wiki

She used this approach at Facebook (and Yahoo, I think?) to successfully tidy up a huge code base of thousands of CSS files down to a more manageable few.

I attended her workshop at Webstock and since then had a chance to put it into practice on a 'get it up quick' green fields project (http://chchneeds.org.nz). I must say I was really pleasantly surprised at the way this approach just avoids a lot of the pain points, as a web developer/coder (ie not an html/css guru) I so often face when just getting the simplest things to 'work'.

I guess the hardest thing for me to get my head around to was that to make things more modular you had to let go (a tiny bit) of being so religious about 'semantic html' as a requirement for the HTML, but I think its worth it to get your CSS a whole lot more modular and 'pluggable' together.

Still a bit more work to do, IMHO, but I'm definitely going to be monitoring this project closely.

Nicole Sullivan's site: http://www.stubbornella.org/content/

At the cost of poor performance on the client [1], so you're just pushing any time saved in development onto your user.

The only way around the poor performance of table layouts is to use table-layout: fixed, which then means you lose all responsive layout so you'd need to create a new version for every screen size you wanted to support (and implicitly, not be able to support every size of mobile screen since percentages don't play well with fixed layout. In this case, you haven't saved any time and in fact have created more work for yourself along with a worse version of your site since fewer people will be able to view it properly.

[1] http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/#tables

If you assumed I was offended by his post, you're far off. I'm only disappointed. The evidence is this blog post and the countless ones like it saying how tough it is for a woman to get into programming without being bombarded with negative attention just because of their gender.

As I said in the other reply, there is no way to perfectly measure discrimination. If you don't trust the various testimonies by women in the tech industry and would rather plug your ears, please do not further this discussion.

Links to check out:

http://www.stubbornella.org/content/2010/07/26/woman-in-technology/

http://www.nytimes.com/2003/01/12/edlife/12STABINE.html

http://www.bluepoof.com/Colloquium/attitudes.html

http://web.mit.edu/fnl/women/women.html