• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
SassConf: Managing Complex Projects with Design Components
 

SassConf: Managing Complex Projects with Design Components

on

  • 1,634 views

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 ...

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.

Statistics

Views

Total Views
1,634
Views on SlideShare
1,612
Embed Views
22

Actions

Likes
8
Downloads
10
Comments
1

3 Embeds 22

https://twitter.com 20
https://www.rebelmouse.com 1
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    SassConf: Managing Complex Projects with Design Components SassConf: Managing Complex Projects with Design Components Presentation Transcript

    • SassConf 2013 Managing Complex Projects with Design Components John Albin Wilkins @JohnAlbin
    • SassConf 2013 John Albin Wilkins @JohnAlbin
    • Free Gifts From Me ★ Zen Grids http://zengrids.com ★ Normalize.css for Sass/Compass http://bit.ly/normalize-with-compass ★ Succinct theme for Colloquy (IRC for Mac) https://github.com/JohnAlbin/succinct-for-colloquy ★ git-svn-migrate http://john.albin.net/git/git-svn-migrate ★ Zen theme for Drupal https://drupal.org/project/zen
    • Introduction to Sass and Compass O’Reilly Due in Winter 2013 May contain Lemurs.
    • Building Sites Outside-In
    • CSS Specificity Wars
    • CSS Specificity Wars .menu .item a:link {} .sidebar .menu .item a:link {} .page-37 .sidebar .menu .item a:link {}
    • CSS Specificity Wars .menu .item a:link { .sidebar & { .page-37 & {} } }
    • Seemed like a good idea at the time.
    •          Nicolas Gallagher “Are you new to front-end  web development?  Here’s a secret:  no one else really knows  what they’re doing either.” — @necolas
    • What are Design Components? ★ “Component” is the same as… ★ “Object” in OOCSS ★ “Module” in SMACSS ★ “Block” in BEM’s BlockElement-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 components in 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)
    • A component with sub-parts .feature
    • A component with sub-parts
    • A SMACSS “state”
    • The “fugly” selector hack Selector in DOM I couldn’t change Class name I wish I could use in DOM
    • On the meaning of semantics
    • On the meaning of semantics .omnomnomnom is more semantic then .blaaagh
    • On the meaning of semantics ★ Content semantics is handled by HTML5 elements ★ Design semantics is handled by class names
    • Thank you! Follow me on the Twitterz. @JohnAlbin