Managing Complex Projects with Design Components - Drupalcon Austin 2014

2,563 views
2,202 views

Published on

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.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,563
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
10
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Managing Complex Projects with Design Components - Drupalcon Austin 2014

  1. 1. MANAGING COMPLEX PROJECTS WITH DESIGN COMPONENTS Front-end Track - June 4, 2014 J O H N A L B I N W I L K I N S
  2. 2. @ J O H N A L B I N Senior Front-end Developer PreviousNext
  3. 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. 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?
  5. 5. www.w3.org/TR/components-intro/" css-tricks.com/modular-future-web-components/ WEB COMPONENTS WHERE ARE WE HEADED?
  6. 6. www.w3.org/TR/components-intro/" css-tricks.com/modular-future-web-components/ WEB COMPONENTS “Hey… Web developers really like" templating systems." We should implement that" natively in HTML.”
  7. 7. <carousel> <ohgod-ohgod-why-wont-my-client-listen-to-me-about-carousels> www.w3.org/TR/components-intro/" css-tricks.com/modular-future-web-components/ WEB COMPONENTS
  8. 8. Reusable and repeatable components" Self-contained design
 (included CSS only applies to its component) WHAT CAN WE LEARN
 FROM THE FUTURE?
  9. 9. CSS SPECIFICITY
 WARS CSS SPECIFICITY
 WARS
  10. 10. .menu .item a:link {}" .sidebar .menu .item a:link {}" .page-37 .sidebar .menu .item a:link {} CSS SPECIFICITY
 WARS
  11. 11. .menu .item a:link {" .sidebar & {" .page-37 & {}" }" } CSS SPECIFICITY
 WARS
  12. 12. OVERLY GENERIC CLASS NAMES .title { } .block .title { } .node .title { } .views .title { } .content { } .block .content { } .node .content { } .views .content { }
  13. 13. SEEMED LIKE A GOOD IDEA AT THE TIME.
  14. 14. WHAT ARE DESIGN COMPONENTS? “Component” is the same as…" “Object” in OOCSS" “Module” in SMACSS " “Block” in BEM’s Block-Element-Modifier" “UI Pattern”
  15. 15. GOALS OF DESIGN COMPONENTS Reduce specificity" Reduce applicability / control the cascade" Improve maintainability
  16. 16. DESIGN COMPONENT One class == one consistent style
  17. 17. DESIGN COMPONENT One class == one consistent style .button.navbar .side-nav .bio .watermark .tabs .more-link .teaser .pager .breaking-news
  18. 18. ON THE MEANING OF SEMANTICS
  19. 19. ON THE MEANING OF SEMANTICS .omnomnomnom " is more semantic then! " .blaaagh
  20. 20. ON THE MEANING OF SEMANTICS Don’t name your class .blubadu-blubadu-blubadu-pphhffft
  21. 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
  22. 22. 1.BASE 2.LAYOUT 3.MODULE 4.STATE 5.THEME SMACSS
  23. 23. 1.BASE 2.LAYOUT 3.MODULE 4.STATE 5.THEME 1.BASE 2.LAYOUT 3.COMPONENTS 4.STATE 5.SKIN SMACSS
  24. 24. 1.BASE 2.LAYOUT 3.COMPONENTS 3.1.STATE 3.2.SKIN SMACSS
  25. 25. 1.BASE 2.LAYOUT 3.COMPONENTS 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN SMACSS BEM }
  26. 26. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower
  27. 27. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower__petals .flower__face
  28. 28. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower__stem .flower__leaves
  29. 29. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower__stem .flower__leaves .flower__stem__leavesNO!
  30. 30. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower__bed
  31. 31. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower--rose
  32. 32. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower:hover
  33. 33. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower.is-pollinating
  34. 34. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN @media (min-width: 48em) {! .flower! }
  35. 35. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN @media “print” {! .flower! }
  36. 36. DECONSTRUCTING A DESIGN COMPONENT .the%component%%modifier/ .the%component__an%element/ .the%component.is%state/ / .the%component:hover/ / @media/all/{/.the%component/{}/}/ .the%skin/.the%component
  37. 37. 1.BASE 2.LAYOUT 3.COMPONENTS 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN SMACSS BEM }
  38. 38. FILE ORGANIZATION = FIRST 3 SMACSS CATEGORIES
  39. 39. SIMPLE FOLDER STRUCTURE
  40. 40. EASY TO FIND YOUR COMPONENTS. Inspect the DOM." Find the class on the design component." Look for a file with that name in the components folder.
  41. 41. STYLES.SCSS
  42. 42. AUTOMATED STYLEGUIDE kss-node
 github.com/hughsk/kss-node
  43. 43. THE “FUGLY” SELECTOR HACK
  44. 44. THE “FUGLY” SELECTOR HACK Selector in DOM
 I couldn’t change Class name I wish
 I could use in DOM
  45. 45. WHAT DID YOU THINK?E V A L U A T E T H I S S E S S I O N : A U S T I N 2 0 1 4 . D R U P A L . O R G / S C H E D U L E Thank you!

×