Scalable and Modular Architecture for CSS

Scalable and Modular Architecture for CSS

Jonathan Snook

Language: English

Pages: 112

ISBN: 0985632100

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.

Contents
Core
Categorizing CSS Rules
Base Rules
Layout Rules
Module Rule
State Rules
Theme Rules
Changing State

Aspects of SMACSS
Depth of Applicability
Selector Performance
HTML5 and SMACSS
Prototyping
Preprocessors
Drop the Base
The Icon Module
Complicated Inheritance

Appendix
Formatting Code
Resources

APIs: A Strategy Guide

Sams Teach Yourself the Twitter API in 24 Hours

Pro PHP MVC

jQuery Pocket Reference

Learn to Program with C

MacRuby: The Definitive Guide: Ruby and Cocoa on OS X

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

the state of the button el.addClass('is-pressed'); // find the menu by stripping btn- and // adding it to menu selector $('#menu-' + el.id.substr(4)).removeClass('is-hidden'); }); As this illustrates, the state change for a single item is modified on two different items in two different places via JavaScript. But what if the menu actually resided right next to the button? Button and menu in the same part of the document