Scalable and Modular Architecture for CSS
Format: PDF / Kindle (mobi) / ePub
Scalable and Modular Architecture for CSS by Jonathan Snook
English | ISBN: 0985632100, 9780985632106 | 2012 | 112 pages | PDF | 4 MB
CSS is messy. At least, it always seems to get messy as projects and teams grow in size. If you’ve ever battled specificity issues by throwing “important!” at them, or found the components of your site so increasingly intertwined that you’re afraid to change anything, then this book is for you. If you’ve ever come into a project and found yourself confused by the existing code, then this book is for your co-workers. Scalable and Modular Architecture for CSS explores techniques that can make your sites more manageable.
A flexible guide to developing sites small and large. Scalable and Modular Architecture for CSS (or SMACSS, pronounced “smacks”, for short) is more style guide than rigid framework. There’s no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It’s an attempt to document a consistent approach to site development when using CSS. And really, who isn’t building a site with CSS these days?!
Learn about the four types of CSS rules for state-based design, and how this approach to development can make it easier to work on larger sites and with larger teams.
Categorizing CSS Rules
Aspects of SMACSS
Depth of Applicability
HTML5 and SMACSS
Drop the Base
The Icon Module
Background comes next. With the advent of CSS3 gradients, background declarations can actually become quite verbose. Once again, vendor prefixes just compound the issue. Multiple backgrounds with CSS3 declarations. Code example from Lea Verou’s CSS3 Pattern Gallery. background-color: #6d695c; background-image: url("/img/argyle.png"); background-image: repeating-linear-gradient(-30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
but I have always tried to stick to either the 3 digit or 6 digit hex format wherever possible. #000 and #FFF are shorter, albeit barely, then their keyword counterparts. Likewise, I wouldn’t use rgb or hsl, since the hex form is shorter. Of course, rgba and hsla have no hex form and they would get used. Be Consistent At the end of the day, the important part—like much of what SMACSS describes—is to establish a standard, document it, and be consistent with it. It will make it easier on you
What problems were solved with this approach and what problems did we introduce? (Very rarely does any solution solve 100% of the problem.) The grid layout can now be applied to any container to create a float-style layout We have decreased the depth of applicability by 1 (See the chapter on Depth of Applicability for more on that) We have reduced the specificity of the selectors The height requirement has been removed. A particular row will grow to the height of the tallest item in that