Click here to watch Managing Complex Projects with Design Components
Our CSS sucks. We've been building sites for over a decade using crappy, ornamentation techniques and shoddy selectors. Our styles unintentional bleed across the site. Our stylesheets are fragile and unmaintainable and full of specificity landmines. Pandas wander alone in the wilderness.
But there's no need to drown ourselves in beer. New technologies like Web Components and new techniques like OOCSS, SMACSS and BEM show us that planning before building can make our projects maintainable, easier to debug, and smaller with reduced CSS file sizes.
This session will introduce the basic techniques for CSS layering and using design components, the heart of any front-end CSS project. We will also discuss CSS/Sass organization and tips to more easily implement these ideas.
Comments
Slides!
The slides for my presentation are available at: http://www.slideshare.net/JohnAlbin/managing-design
Auto-generated style guide
So last week, people were asking if the auto-generated style guide example I used in my presentation was publicly available so they could browse at their leisure. Unfortunately, it is not. That MSNBC style guide is an internal doc at this point. And, since that style guide is the first one I had ever built, there weren't any other ones to show.
However, I took the flower component example from the presentation and made a style guide just for it: http://johnalbin.github.io/flower-power/