Ian Storm Taylor
ianstormtaylor.com · Personal blog · on HN since 2012
Ian Storm Taylor is a designer and developer who writes about CSS, Sass, Backbone.js and interface design.
What HN saysHN links it for the OOCSS and Sass post and "Never Use Black"; commenters debate where object-oriented CSS goes wrong with utility margin classes.
40HN people shared it
31linked it in comments
19stories submitted
2.5Kstory points
8 months agolast shared
2012people per year2026
Most-shared posts
- 1Design Tip: Never Use Black28 people · 1.5K points · first shared 2012 · 217 comments on HN
- 2OOCSS + Sass = The best way to CSS7 people · 128 points · first shared 2012 · 51 comments on HN
- 3Rendering Views in Backbone.js isn't Always Simple3 people · 77 points · first shared 2012 · 12 comments on HN
- 4Media Queries are a Hack2 people · 223 points · first shared 2013 · 78 comments on HN
- 5What's Wrong with the iOS 7 Icons?2 people · 179 points · first shared 2013 · 176 comments on HN
- 6Break Apart Your Backbone.js Render Methods2 people · 88 points · first shared 2012 · 17 comments on HN
- 7Refactoring GitHub's Design1 people · 282 points · first shared 2013 · 92 comments on HN
- 8Walking Through the Design Process1 people · 32 points · first shared 2013 · 5 comments on HN
- 9Skeumorphism on the ipad1 people · first shared 2013
What HN people wrote when they linked it
bilalq · 2014-03-09
I'm not sure if you were being sarcastic or not (text is poor medium for conveying such things), but OOCSS is very much a real thing. I love writing SASS in such a way.
See this post for more info: http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/
paultannenbaum · 2013-09-24
While I agree with the general idea behind the article (object orient your css), I think the second demonstration involving margins is an example of OOCSS gone wrong.
If you are injecting your markup elements with classes like "mbm mts mrl" (or padding, or anything else that is essentially just a css property), this is not much different than just inlining your styles. If you want this level of reusability in your css, use sass and create these as placeholders. From there give your dom element a some kind of class(es) that can extend several of these placeholder values.
Ian Storm had a very well written article that hits on this more: http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/
timdorr · 2013-07-18
@extend itself is awesome and you should use it extensively, especially when using a framework. For instance, if you're using Bootstrap, when version 3 rolls around and removes a ton of old class names, you won't have to hunt through all your view code to replace classes. You can look through your SASS files and just update @extend's where appropriate.
I highly recommend looking at Object Oriented CSS and Ian Storm Taylor's great post on combining it with SASS: http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/
Using SASS placeholders and @extend'ing your framework's classes are a great way to reduce code duplication and complexity. I recently redid our entire frontend using these techniques and it reduced our SASS code by about 30-40%, got rid of plenty of gnarly nested classes, and made it drastically easier to start adding new features.
madethemcry · 2013-05-27
This is totally unrelated to rails. This is about OOCss and what's wrong with twitter's bootstrap in this context. The overall conclusion about doing OOCss might be right but there are many other and better resources for this topic- without those bothering meme images.
Surprisingly enough, the first resource I found describes exactly the same example about sass placeholder and %separator
http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/
https://www.hnsearch.com/search#request/all&q=OOcss
molecule · 2013-05-04
Great article and analysis.
One answer to your question, "what's wrong with black text on white background?":
http://ianstormtaylor.com/design-tip-never-use-black/
iota · 2012-11-21
The fight against "default" white seems analogous to Ian Storm Taylor's recommendation to never use black (http://ianstormtaylor.com/design-tip-never-use-black/). I prefer off white (e.g., #f9fafc) because of the same reason I like text color set at #333 — it looks softer, but still almost imperceptibly different from #fff/#000's traditional "paper and ink" aesthetic.
http://www.colorcodehex.com/f9fafc/
http://www.colorcodehex.com/333333/
petercooper · 2012-11-05
Some recent posts about this that I thought were interesting (for background): http://blog.mediumequalsmessage.com/relationship-between-oocss-and-css… http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/
dsego · 2012-10-31
There was a similar article not so long ago about OOCSS + Sass. http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/
spyhi · 2021-09-15
I am surprised to find this comment so high up when so much of it is so categorically wrong I almost wonder if you're saying opposite things as a joke.
Perhaps the most egregious is your position on black shadows being the best and physically most realistic color to blend with, when in reality pure black doesn't exist in nature almost at all, it's just how our brains process things and if you actually use pure black then things will look subtly wrong--I know because I used to do that and learning to stay away from black where possible after taking a basic design course was one of the things that best improved the feel of my designs. Like, there's decades of research in the arts, sciences, and design community about this! It works for a reason.
For the sake of brevity, I'll leave this blog post here that explains it better and more in depth: https://ianstormtaylor.com/design-tip-never-use-black/
hcarvalhoalves · 2013-09-18
I can see a lot of effort went into interactions and some screens. Then I'm left with the impression they just winged it on the rest [1].
The redesign of the messages app limited itself to removing the graphics. The app still shows messages as bubbles, it's just bland now. I can think on a couple better design solutions for chat threads by looking at other apps and Adium themes.
The Newsstand is another example of redesign-WTF. It still has bad usability and small thumbnails, it just replaced the background with some random grey background.
Noteworthy are also those icons on the home screen. There's no consistency between them, as pointed by multiple designers already [1][2]. I can't believe Apple is pushing these as final.
Overall, it looks like a rushed job, not something I would expect from Apple. I see no compelling reason to update.
[1] http://tristanedwards.me/what-ios7-should-look-like
[2] http://ianstormtaylor.com/whats-wrong-with-the-ios-7-icons/
ccleve · 2026-03-06
For an opposing view, https://ianstormtaylor.com/design-tip-never-use-black/
kdazzle · 2023-05-07
First time I read an argument against all black in design was this 2012 article. Something about it not being a color found in nature. Then, yeah, some people seemed to interpret it as “use gray on gray”.
https://ianstormtaylor.com/design-tip-never-use-black/
ianstormtaylor · 2019-03-01
Fun article to read, and has some interesting ideas!
In case anyone else is interested I wrote a similar style of article about refactoring GitHub’s interface a few years ago too:
https://ianstormtaylor.com/refactoring-githubs-design/
nilved · 2017-07-20
https://ianstormtaylor.com/design-tip-never-use-black/
#191919 is "real black."
vladdanilov · 2017-07-11
It may be new but it is not a well-thought design.
110+ characters per line is hard to read and ugly [1].
Pure black on white has been discussed many times. While it satisfies min contrast requirements, it feels unnatural, and again, hard to read, causing eye strain [2][3]. Although this is not an issue on screens with automatic brightness adjustment, they are sadly not everywhere and it is wiser to target an average screen considering Mozilla auditory.
[1] http://practicaltypography.com/line-length.html
[2] http://ianstormtaylor.com/design-tip-never-use-black/
[3] https://ux.stackexchange.com/questions/23965/is-there-a-problem-with-u…
kbutler · 2017-06-17
It's a pretty common design meme to "not use pure black" (e.g., https://ianstormtaylor.com/design-tip-never-use-black/) or "not use pure white".
What these designers appear not to realize, is that you are going to be viewing these designs on a light-emitting device, or at least a light-reflecting surface. None of these can actually produce a "pure black" (which would be no light at all) or "pure white". Even NASA only gets close: https://www.nasa.gov/topics/technology/features/super-black-material.h…
So designers can say that #000 is too dark, or that #fff is too light, but calling them pure black or pure white, is just inaccurate.
JacksonGariety · 2016-12-20
I recall a blog post by Ian Storm Taylor [0] that suggested it from the perspective of a painter. Not sure how well it applies to screens, but it's definetly not a thoughtless move to use #222 for your fonts.
0: https://ianstormtaylor.com/design-tip-never-use-black
Swizec · 2016-12-19
From my limited exposure to designers, I've learned that they think lower contrast strains reader's eyes less than high contrast does. Black on white is thought to be too striking to read comfortably.
Here is a post from 2012 explaining why it's important to use a dark grey instead of a pure black: https://ianstormtaylor.com/design-tip-never-use-black
And I agree. Pure black often looks bad.
Light gray is even worse.
ryanSrich · 2016-02-15
You should never use absolute black. It's a common phrase you'll hear your first day of Color Theory class http://ianstormtaylor.com/design-tip-never-use-black/
jastanton · 2014-08-01
I agree that black should be #000 for the sake of semantics. Though it's pretty popular opinion to never use black in design:
http://ianstormtaylor.com/design-tip-never-use-black/
wonderyak · 2013-09-11
What we need are 'Element Queries' - http://ianstormtaylor.com/media-queries-are-a-hack/
melling · 2013-05-19
Is there a HN for Designers? I peruse Behance and Dribbble for ideas, but since I'm a programmer and not a designer I really need read discussions and tutorials on Photoshop, Illustrator, design theory, color, etc. I would think that there's enough material. Occasionally, really good stuff like this appears on HN:
http://ianstormtaylor.com/design-tip-never-use-black/
I'd like a daily dose.
prawn · 2013-04-26
Design Tip: Never Use Black
http://ianstormtaylor.com/design-tip-never-use-black/
Madness64 · 2013-01-11
Another way to make the reading experience much better would be to not use the color black. This article explains pretty well why you should never use this color. http://ianstormtaylor.com/design-tip-never-use-black/
evancharles · 2012-11-27
I do it to reduce contrast, not increase it. White on black is awfully harsh. Never use black: http://ianstormtaylor.com/design-tip-never-use-black/
chewxy · 2012-11-21
It's the contrast between the text/content and the background that affects your comfort though. There was an article about how you should never use black for your text on a white bg[0]. I think the points there are rather salient.
In fact the W3C has a good calculator for colour contrast [1], which I think is a good guide for calculating colour contrast when designing sites
[0]http://ianstormtaylor.com/design-tip-never-use-black/
[1]http://www.w3.org/TR/WCAG20/#contrast-ratiodef
notimetorelax · 2012-09-07
Yeah, he embraced the idea to never use black:
http://ianstormtaylor.com/design-tip-never-use-black/
EDIT
It looks awful in Chrome(Windows) but in Explorer it's OK...
http://imgur.com/a/CA7Ow
scotty79 · 2012-08-02
I've done Backbone course in codechool.com It's very basic and targeted at beginners but in last lessons already I've seen how it becomes tangled and begins to fall apart.
I feel that Knockout provides you with much more structure that prevents you from making too much of a mess.
Custom bindings provide easy way to insane flexibility http://learn.knockoutjs.com/#/?tutorial=custombindings and the models don't look like hundredth attempt at just implementing CRUD. Also no re-rendering of html and no need for rebinding DOM events (vide http://ianstormtaylor.com/rendering-views-in-backbonejs-isnt-always-si… ).
Thus my noob preference.
ggreer · 2017-07-11
> Pure black on white has been discussed many times. While it satisfies min contrast requirements, it feels unnatural, and again, hard to read, causing eye strain…
I completely disagree with this. Consider the failure modes of erring in either direction:
- Too much contrast? Reduce screen brightness. (This has the beneficial side effect of increasing battery life on mobile devices.)
- Too little contrast? Uhh… squint more, or try to find software that lets you override the designer's intent.
Most people aren't using professional screens in low lighting, and not everyone has young eyes. Lower contrast can be a deal-breaker for these people. Even for those with perfect vision, low contrast can be incredibly annoying. It's so frustrating to view a screen in direct sunlight and be unable to see content because a designer didn't want to cause eye strain.
A side note: Amusingly, the first thing I did when looking at your second source (http://ianstormtaylor.com/design-tip-never-use-black/) was use my reader mode extension. I disliked the off-black sans-serif font.