sassconf: managing complex projects with design components
DESCRIPTION
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 landminds. Pandas wander alone in the wilderness. But there's no need to drown ourselves in beer. 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 workshop will introduce the basic techniques for CSS layering and using design components, the heart of any front-end CSS project. We will also discuss Sass organization and tips to more easily implement these ideas.TRANSCRIPT
John Albin Wilkins@JohnAlbin
Managing Complex Projects with Design
Components
SassConf 2013
John Albin Wilkins@JohnAlbin
SassConf 2013
★ Zen Gridshttp://zengrids.com
★ Normalize.css for Sass/Compasshttp://bit.ly/normalize-with-compass
★ Succinct theme for Colloquy (IRC for Mac)https://github.com/JohnAlbin/succinct-for-colloquy
★ git-svn-migratehttp://john.albin.net/git/git-svn-migrate
★ Zen theme for Drupalhttps://drupal.org/project/zen
Free Gifts From Me
Due in Winter 2013
May contain Lemurs.
Introduction toSass and CompassO’Reilly
Building Sites Outside-In
CSSSpecificity Wars
.menu .item a:link {}
.sidebar .menu .item a:link {}
.page-37 .sidebar .menu
.item a:link {}
CSSSpecificity Wars
.menu .item a:link {
.sidebar & {
.page-37 & {}
}
}
CSSSpecificity Wars
Seemed like a good ideaat the time.
“Are you new to front-end web development?
Here’s a secret: no one else really knows what they’re doing either.”
— @necolas
Nicolas Gallagher
What are Design Components?
★ “Component” is the same as…
★ “Object” in OOCSS
★ “Module” in SMACSS
★ “Block” in BEM’s Block-Element-Modifier
★ “UI Pattern”
Goals of Design Components
★ Reduce specificity
★ Reduce applicability / control the cascade
File organization =first 3 SMACSS Layers
Simple Folder Structure
styles.scss
Putting all componentsin one folder means it is ridiculously easy to find components.
★ Inspect the DOM.
★ Find the class on the design component.
★ Look for a file with that name in the components folder.
A simple component
and a variant
(all in one file)
.feature
A component with sub-parts
A component with sub-parts
A SMACSS “state”
The “fugly” selector hack
Selector in DOMI couldn’t change
Class name I wishI could use in DOM
On the meaning of semantics
.omnomnomnom
is more semantic then
.blaaagh
On the meaning of semantics
On the meaning of semantics
★ Content semanticsis handled by HTML5 elements
★ Design semanticsis handled by class names
Thank you!
Follow me on the Twitterz.@JohnAlbin