Stubbornella

This is my favorite recent example of thoughtless discrimination against women: http://www.stubbornella.org/content/2014/05/09/sexist-by-design/ And you can see it's not a particularly new problem: http://news.blogs.cnn.com/2011/06/09/glass-staircase-not-dress-friendl…

Looks like he just rewrote the ideas of [Nicole Sullivan](http://stubbornella.org) and [Harry Roberts](http://csswizardry.com).

I'm just going to leave here some of my CSS Good Practices bookmarks: * https://github.com/necolas/idiomatic-css * http://coding.smashingmagazine.com/2009/04/08/from-table-hell-to-div-h… * http://engineering.appfolio.com/2012/11/16/css-architecture/ * http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-…

Sometimes we take the whole semantics thing to a point where it's counterproductive. Not every single selector has to be semantic. That's how get into situations like the ones that lead to Nicole Sullivan writing "Our best practices are killing us":http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-…

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…

Nicole Sullivan: http://www.stubbornella.org/

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-pe…

I like Lea Verou: http://lea.verou.me and Nicole Sullivan: http://www.stubbornella.org/content/

I really like seeing companies build out their own style guide libraries. It's such a huge win in terms of maintaining css and keeping it consistent across an entire site/platform. We went through this process at Trulia about a year ago, and the results had a huge impact[1]. Sadly we never released our style guide to the public, but we did open source the tool for building it: https://github.com/trulia/hologram It tries to keep things simple by letting you use markdown and html to document your css/js inline and then extracting that into a style guide. 1. http://www.stubbornella.org/content/2013/06/05/creating-living-style-g…

Here's the first few hits from Google: https://developers.google.com/speed/articles/reflow https://developers.google.com/speed/articles/javascript-dom http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-pe…

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

Here is a video presentation on a similar subject from last year. http://www.stubbornella.org/content/2010/07/01/top-5-mistakes-of-massi…

She has a blog post explaining the x's here: http://www.stubbornella.org/content/2010/12/09/the-hacktastic-zoom-fix… Edit: I also agree with your sentiment. This seems to move away from what CSS classes are intended for, and gives things naming conventions that are tied directly to their internal CSS code instead of to their semantic meaning on the page. That said, I haven't used it either, so maybe it's way better this way, but something doesn't sit right with me.

Wrong, wrong, wrong. 1) Forget about XHTML, it's dead, use the HTML5 doctype it works well with even older browsers 2) From building a semantic form you gain exactly: nothing. Search engines won't give you traffic because you got a semantic form, and browsers won't render them better. 3) SPECIFICITY will help you produce huge CSS, that will make your life a living hell. http://www.stubbornella.org/content/2010/07/01/top-5-mistakes-of-massi… 4) You should NOT CARE about whether the device is a handled or a tablet, you SHOULD care about it's screen size, aspect ratio, whether it has a mouse etc.

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-… 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.…