Comments on: Opt-in Typography

By: Wojtek Urbanski

Wojtek Urbanski — Wed, 04 Jul 2012 08:11:53 +0000

Great article! Thanks!

I have been using this technique for a while now (5 projects I guess) and it is doing great! Especially in the projects where you need standard styling for content in few places.

My implementation differs a bit. My approach, is to identify the common stuff in typography and style it globally. Only after then I scope styling that is specific strictly for “standard” text. This way I get styling that is more universal IMO and has the best of both worlds.

By: Chris Vendilli

Chris Vendilli — Sun, 03 Jun 2012 17:35:41 +0000

I love this concept. Such a simple way to extend greater control over different elements of your site.

By: Ryan Miglavs

Ryan Miglavs — Tue, 29 May 2012 06:59:58 +0000

I’ve worked with sites that do this both ways (basic styles applied universally or only to elements within a certain class container).

While different intelligent folks will work differently, I strongly feel it’s better to have good general styles and then override them as necessary. That’s how CSS is supposed to work.

Setting good defaults saves lots of trouble, for all the situations and modules you (or your client) haven’t made yet.

At some point, someone would forget to apply that ‘text-module’ or ‘c’ or ‘whatever’ class, and then the typography would be wrong and someone would have to change the HTML. That smells bad. Especially if you’re talking about a system that maybe doesn’t have a great templating system, like Drupal, well, that can become more complicated than you’ll enjoy.

At some point the HTML will not be what you expect right now. This is good, this is the growing web. Even if it remains clean and semantic, it will need to do something different later. CSS is great for this, because you can define default styles to get you most or all of the way there.

I have a much stronger suggestion for you folks who use SASS or LESS: create a reset mixin that contains all your reset styles. Then, in places like your global nav where you want to blow all the defaults away, you can just add in your reset mixin and start fresh.

By: Brad

Brad — Fri, 25 May 2012 14:45:20 +0000

Excellent Idea and one that we all should have seen. So easy to do using LESS

By: Ahmed

Ahmed — Mon, 21 May 2012 02:48:39 +0000

i like that :D

By: Jasper Kennis

Jasper Kennis — Fri, 11 May 2012 00:05:30 +0000

Scott has a good point here. I think the technique described comes natural to SASS writers, I've been doing it for a while now, and well it's okay as long as you don't stack to deep, you have to be a little careful.. In my experience, it's tempting to do things like this:


footer, nav {
  /* Some styling for footers and nav */

  > ul {
    /* Some styling for ul in footers and nav */

    li:last-of-type {
      /* Some styling for li in ul in footers and nav */

      a { /* Some styling for a in li in ul in footers and nav */ }

    }

  }

}

The resulting selector for the nested a elements would be:


footer > ul li:last-of-type a, nav > ul li:last-of-type a

That's rather big already, and what if this would be wrapped in an article, as part of a sidebar, which SASS and this article might mislead you to do. Not saying the technique is bad, but keep in mind that nesting too deep will get you enormous selectors, if only for the kb's, think twice.

By: Yoram Glob

Yoram Glob — Thu, 10 May 2012 15:37:49 +0000

Taking into consideration the HTML5 usage, I think html5.js should be mentioned for older browsers. The HTML5 tags might be problematic with IE<=8

By: Steve King

Steve King — Thu, 10 May 2012 01:08:04 +0000

seems interesting to use typography with ease.I’ve thought about doing my styles this way but then I always felt like it was too “different”. Now I feel silly about not doing it this way.

I think this may be a permanent change in my web development habits.

By: Michael Chacon

Michael Chacon — Wed, 09 May 2012 21:02:17 +0000

Cool, thanks. It’s rare that a top level element retains it’s styles throughout a project and I always find myself overriding the master styles I set ( which truthfully are usually only relevant to the content area of a site anway).

By: Catherine Azzarello

Catherine Azzarello — Tue, 08 May 2012 15:22:49 +0000

Gawd! This is brilliant! I’ve been deep in a project for over 6 months now, with a Twitter Bootstrap base. As the project grows (Agile dev) I find myself fighting the cascade as we add new pieces: mobile, iframes, Facebook apps, WordPress, stand-alone HTML, etc.

I will definitely think along these lines as we continue development. And I’m sure going to use this method on new projects!

Thanks!