SDD: Styleguide-Driven Development

over 9 years ago from , a walking pile of oxidation

This is a topic I feel very strongly about, and Nicole does a great job of walking us through their real-world experience with approaching a project from a component-based perspective.

The end result is a consistent-feeling product and reduced wastage (in terms of human resources (time + effort) as well as the actual size of your codebase).

Long video, but it's definitely worth watching if you're a designer, front-end developer, or even PM!


  • Artem TitoulenkoArtem Titoulenko, over 9 years ago (edited over 9 years ago )

    I've unknowingly stumbled into this development pattern. The designer that I work closely with and I noticed that there were a lot of similar elements in his mockups. We agreed that they could all be the same elements and we made both psd and html/css styleguides from which we copy/paste code to use across the website.

    I heavily recommend this approach to:

    • make it easy for new devs/designers to pick up and use common components
    • keep a consistent style both in mind and in practice
    • make inconsistencies more evident and be more carefully considered
    • waste less time restyling components and spend more of it thinking about interaction, flow, logic, etc
    2 points
    • Derryl Carter, over 9 years ago

      Here's another good resource that I found a while ago -- wherein designs are created on a per-component basis, and then stitched together into full views when needed. I haven't tried this myself, but it's an idea I intend to test sometime soon.

      0 points
  • Daniel LaudingDaniel Lauding, over 9 years ago

    I have been working with this approach in the last projects and it rocks!

    0 points
  • Wes OudshoornWes Oudshoorn, over 9 years ago

    Will certainly check it out.

    Reminds me of http://styletil.es/

    0 points
  • Tom GantzerTom Gantzer, over 9 years ago

    I'm trying to adopt this workflow too, it's nice to see there's an established name for it! Thanks for the link.

    0 points