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.
2. @ J O H N A L B I N
Senior Front-end Developer
PreviousNext
3. FREE GIFTS FROM ME
Zen Grids
zengrids.com"
Normalize.css for Sass/Compass
github.com/JohnAlbin/normalize-scss"
Succinct theme for Colloquy (IRC for Mac)
github.com/JohnAlbin/succinct-for-colloquy"
git-svn-migrate
john.albin.net/git/git-svn-migrate"
Zen theme for Drupal
drupal.org/project/zen
4. “Are you new to
front-end web development?
"
Here’s a secret:
no one else really knows
what they’re doing either.”
— Nicolas Gallagher
WHERE ARE WE
HEADED?
19. ON THE MEANING OF
SEMANTICS
.omnomnomnom
"
is more semantic then!
"
.blaaagh
20. ON THE MEANING OF
SEMANTICS
Don’t name your class .blubadu-blubadu-blubadu-pphhffft
21. ON THE MEANING OF
SEMANTICS
Content semantics
is handled by HTML5 elements"
Let’s make our class names use
Design semantics"
Make the class names meaningful to
the developers and designers