Managing Complex Projects with Design Components - Drupalcon Austin 2014

  • 671 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
671
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
6
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. @ 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?
  • 5. www.w3.org/TR/components-intro/" css-tricks.com/modular-future-web-components/ WEB COMPONENTS WHERE ARE WE HEADED?
  • 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. <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. Reusable and repeatable components" Self-contained design
 (included CSS only applies to its component) WHAT CAN WE LEARN
 FROM THE FUTURE?
  • 9. CSS SPECIFICITY
 WARS CSS SPECIFICITY
 WARS
  • 10. .menu .item a:link {}" .sidebar .menu .item a:link {}" .page-37 .sidebar .menu .item a:link {} CSS SPECIFICITY
 WARS
  • 11. .menu .item a:link {" .sidebar & {" .page-37 & {}" }" } CSS SPECIFICITY
 WARS
  • 12. OVERLY GENERIC CLASS NAMES .title { } .block .title { } .node .title { } .views .title { } .content { } .block .content { } .node .content { } .views .content { }
  • 13. SEEMED LIKE A GOOD IDEA AT THE TIME.
  • 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. GOALS OF DESIGN COMPONENTS Reduce specificity" Reduce applicability / control the cascade" Improve maintainability
  • 16. DESIGN COMPONENT One class == one consistent style
  • 17. DESIGN COMPONENT One class == one consistent style .button.navbar .side-nav .bio .watermark .tabs .more-link .teaser .pager .breaking-news
  • 18. ON THE MEANING OF SEMANTICS
  • 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
  • 22. 1.BASE 2.LAYOUT 3.MODULE 4.STATE 5.THEME SMACSS
  • 23. 1.BASE 2.LAYOUT 3.MODULE 4.STATE 5.THEME 1.BASE 2.LAYOUT 3.COMPONENTS 4.STATE 5.SKIN SMACSS
  • 24. 1.BASE 2.LAYOUT 3.COMPONENTS 3.1.STATE 3.2.SKIN SMACSS
  • 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. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower
  • 27. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower__petals .flower__face
  • 28. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower__stem .flower__leaves
  • 29. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower__stem .flower__leaves .flower__stem__leavesNO!
  • 30. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower__bed
  • 31. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower--rose
  • 32. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower:hover
  • 33. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower.is-pollinating
  • 34. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN @media (min-width: 48em) {! .flower! }
  • 35. " " " 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN @media “print” {! .flower! }
  • 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. 1.BASE 2.LAYOUT 3.COMPONENTS 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN SMACSS BEM }
  • 38. FILE ORGANIZATION = FIRST 3 SMACSS CATEGORIES
  • 39. SIMPLE FOLDER STRUCTURE
  • 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. STYLES.SCSS
  • 42. AUTOMATED STYLEGUIDE kss-node
 github.com/hughsk/kss-node
  • 43. THE “FUGLY” SELECTOR HACK
  • 44. THE “FUGLY” SELECTOR HACK Selector in DOM
 I couldn’t change Class name I wish
 I could use in DOM
  • 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!