Advertisement
Workflow

Weekend Presentation: SMACSS

by

One of the speakers I met up with at the Smashing Conference this month was Jonathan Snook, talking about his SMACSS (pronounced “smacks”) approach to stylesheet organization. In this quick video on Adobe TV, Jonathan introduces you to the ideas behind SMACSS.


If you're anything like me, your CSS files probably start out in a logical way, but become less and less organized as you build and add and build and edit and build. The SMACSS approach is a set of guidelines which logically group certain aspects of your CSS, making it modular, accessible and streamlined. And scalable (mustn't forget that).


Quick Vid


Further Resources

For more information on SMACSS take a look at smacss.com, follow Jonathan on Twitter @snookca, or check out his blog.

Related Posts
  • Photography
    Lighting
    Creating a Magic Photo with a Magician and Playing CardsBen lucas magician 18 prenew
    In this tutorial, I'm going to show you to create the seemingly impossible. I jammed as much chaos as possible into a single photo to create a visual feat fit for a magician. We'll look at the decision making process, the lighting, and the retouching that went into creating a final image.Read More…
  • Web Design
    eCommerce
    E-commerce for Mobile: Making the Most of Your SiteMobile thumb
    In this article we’re going to address some mobile e-commerce hurdles. I'll break down a few of the most important steps to take account of in preparing an e-commerce site for mobile access and offer you some advice based on my experience.Read More…
  • Web Design
    HTML/CSS
    Why I Choose Stylus (And You Should Too)Stylus thumb
    The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
  • Web Design
    HTML/CSS
    Quick Tip: Fix Your Messy CSS With SMACSSSmacss retina
    Face it, your CSS is a complete mess! Today I'm going to introduce you to SMACSS, a set of guidelines and principles to tidy up your stylesheets, making your projects better organised, flexible and scalable.Read More…
  • Code
    Articles
    Interview With Jonathan SnookJonathan snook retina preview
    I've met many web developers over the years and the common theme is that they tend to specialize in a specific aspect of web development. They're either designers, JavaScript coders, server-side experts or perhaps a tiny bit of all of them. Rarely do I meet someone who is incredibly well-versed in the full-stack having an amazing design acumen and being able to take a vision and bring it to life, front to back. Jonathan Snook is one of those rare breeds and also an influencer in the web development world. His skills have made him a sought after speaker and writer and afforded great opportunities at companies like Yahoo! and Shopify. He's now venturing into product management and we catch up with him to see how that's going and his advice for anyone looking to jump into that role.Read More…
  • Web Design
    CMS
    Understanding Ghost: Stages of DesignUnderstanding ghost retina
    The process of building themes for Ghost is incredibly smooth, simple and very easy to learn. But before you start building an actual Ghost theme it's important and helpful to understand the role themes play in the overall Ghost ecology so that you can design in the optimal way.Read More…