Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to OOCSS Workshop

1,390 views

Published on

Let’s face it… while CSS is as basic a language as you can get, it can be a challenge to master - especially when it comes to implementing large scalable projects. Without some sort of framework, it’s easy to end up in specificity spaghetti with severely duplicated code, browser performance issues, and generally unmaintainable, unsemantic, and unscalable CSS code.

Adopting a design pattern like OOCSS will help you eliminate these nightmares and make crafting your CSS a joy once again. This workshop will examine the importance of a modular CSS architecture, profile the core principles of OOCSS, allow you to try your hand at module implementation, and touch on a few of the pros and “cons” of the system.

Published in: Internet
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Intro to OOCSS Workshop

  1. 1. Introduction To OOCSS Julie Cameron @jewlofthelotus Slides http://bit.ly/oocss_wks Exercises http://bit.ly/oocss_ex Workshop Prep
  2. 2. About Me @jewlofthelotus DERP.
  3. 3. About You What is your name? What is your 140 character bio? What is your favorite CSS prop/value?
  4. 4. #cascade { div.is { span.delicate { position: absolute !important; } } }
  5. 5. “It’s almost a challenge to find a development team that’s working on a codebase that’s more than a couple of years old where the CSS isn’t the most frightening and hated part of that system.” Andy Hume - CSS for Grownups
  6. 6. TOP DOWN CSS = REPETITION & BLOAT
  7. 7. SELECTOR MISUSE = SPECIFICITY HELL
  8. 8. BLOAT + BAD SELECTORS = BAD PERFORMANCE
  9. 9. !IMPORTANT = THE DEVIL
  10. 10. NONE OF THIS IS SCALABLE OR MAINTAINABLE. A hot mess is what it is…
  11. 11. TOP DOWN OVERLY SPECIFIC CSS HTML
  12. 12. WE’VE BEEN COUPLING OUR HTML & CSS
  13. 13. Coupled CSS Selectors
  14. 14. Object Oriented Cascading Stylesheets OOCSS https://github.com/stubbornella/oocss/wiki
  15. 15. A scalable, maintainable, semantic, and predictable approach to writing CSS.
  16. 16. OOCSS was created by Nicole Sullivan while working for Facebook. She created a reusable CSS module called the “media object” to save hundreds of lines of code. stubbornella.org
  17. 17. The Media Object “a content block containing a fixed-size media element (e.g. image or video) along with other variable-size content (e.g. text)” https://github.com/stubbornella/oocss/wiki
  18. 18. The Media Object “a content block containing a fixed-size media element (e.g. image or video) along with other variable-size content (e.g. text)” https://github.com/stubbornella/oocss/wiki AKA a Facebook status.
  19. 19. A Media Object Media to the left and some variable length content to the right. img.png
  20. 20. OBJECTS
  21. 21. Objects are the abstraction of repetition.
  22. 22. Object Makeup 1. HTML - one or more nodes of the DOM https://github.com/stubbornella/oocss/wiki/FAQ
  23. 23. Object Makeup 1. HTML - one or more nodes of the DOM https://github.com/stubbornella/oocss/wiki/FAQ 2. CSS that styles those nodes
  24. 24. Object Makeup 1. HTML - one or more nodes of the DOM https://github.com/stubbornella/oocss/wiki/FAQ 2. CSS that styles those nodes 3. JavaScript functionality tied to those nodes
  25. 25. Modules with Variations .btn
  26. 26. Modules with Variations .btn .btn—primary .btn-small CSS .btn:hover
  27. 27. Modules with Variations .btn .btn.is—disabled .btn.is-active CSS JS .btn—primary .btn-small CSS .btn:hover
  28. 28. Module Components Object aka module / component / block .btn, .media
  29. 29. Module Components Object aka module / component / block .btn, .media Child Objects .media__img, .media__body Relationships
  30. 30. Module Components Object aka module / component / block .btn, .media Modifiers .btn—-primary, .media—-inline CSS Design Variations Child Objects .media__img, .media__body Relationships
  31. 31. Module Components Object aka module / component / block .btn, .media Modifiers .btn—-primary, .media—-inline CSS Design Variations States .btn.is-active, .media—-collapsed CSS / JS Design Adjustments Child Objects .media__img, .media__body Relationships
  32. 32. BEST PRACTICES
  33. 33. SINGLE RESPONSIBILITY Do one thing well and one thing only.
  34. 34. .CLASSES .CLASSES .CLASSES Take that, specificity!
  35. 35. NAMING CONVENTIONS Just breathe. Everything is going to be okay.
  36. 36. PICK A SYSTEM BE CONSISTENT
  37. 37. Naming Formats .modulename .moduleName .module-name .module_name .bem——style .bem_ _style
  38. 38. Naming Patterns How do you identify children? States? Modifiers? .objectChild .object-child .object_child .object_ _child .myObject—childObj .object.is—active .objectModifier .object-modifier .object_modifier .object——modifier .myObj-modClass .object.active
  39. 39. BEM .block__element——modifier http://bem.info
  40. 40. .block .media
  41. 41. .block .media .block__element .media_ _img
  42. 42. .block .media .block__element .media_ _img .block——modifier .media——inline
  43. 43. .block .media .block__element .media_ _img .block——modifier .media——inline .block__element——modifier .media_ _img——right
  44. 44. SEMANTIC VS PRESENTATIONAL NAMING Uh oh…
  45. 45. Presentational Naming Describes how the object looks. .grid_ _col——9 .btn——small .border——all .color——red .float——left .border——thick
  46. 46. Semantic Naming Describes what the object is. .bookmark .article .callToAction .error .article_ _title .article——flagged
  47. 47. Fewer Semantic Classes DRY HTML VS DRY CSSMany Presentational Classes
  48. 48. NO ONE KNOWS WHAT THEY’RE DOING.
  49. 49. Questions?
  50. 50. 2 Principles of OOCSS
  51. 51. Separation of STRUCTURE from SKIN 1ST PRINCIPLE
  52. 52. Structure Vs. Skin
  53. 53. Structure Vs. Skin Define repeating “invisible” patterns as reusable structures. What makes a button look like a button?
  54. 54. Structure Vs. Skin Define repeating “invisible” patterns as reusable structures. What makes a button look like a button? Define repeating visual patterns as reusable skins. What makes these buttons look different?
  55. 55. Structure Repeating “invisible” patterns. What makes a button look like a button?
  56. 56. Structure Repeating “invisible” patterns. What makes a button look like a button?
  57. 57. Skin Repeating visible patterns. What makes these buttons look different?
  58. 58. Skin Repeating visible patterns. What makes these buttons look different?
  59. 59. Structure + Skin
  60. 60. Structure + Skin .btn .btn—-primary .btn—-small .btn—-block .btn—-inverse
  61. 61. 1. Download and unzip package 2. Open entire folder in your text editor 3. Open index.html in browser Let’s Do This. http://bit.ly/oocss_ex
  62. 62. Structure, Skins, States, & Modifiers Button Exercise
  63. 63. Button Structure Exercise 1 Hints: use class .btn, make sure there are no hover or focus styles
  64. 64. Button Skins Exercise 2 Hints: use classes .btn—-primary, .btn—-secondary, .btn—-tertiary only three CSS properties need to be modified
  65. 65. Button States Exercise 3 Hint: style each variation for :hover only three CSS properties need to be adjusted for each variation
  66. 66. Button Modifiers Exercise 4 Hints: use classes .btn—-medium, .btn—-small, .btn—-block BONUS: .btn—-inverse
  67. 67. Questions?
  68. 68. Break Time
  69. 69. Separation of CONTAINER from CONTENT 2ND PRINCIPLE
  70. 70. Container Vs. Content Objects should look the same no matter where you put them.
  71. 71. Location Dependent Styles
  72. 72. Location Dependent Styles
  73. 73. Location Dependent Styles
  74. 74. Better?
  75. 75. Separation Of Container & Content What is the container?
  76. 76. Separation Of Container & Content What is the container?
  77. 77. Separation Of Container & Content What is the content?
  78. 78. Separation Of Container & Content Abstract reusable styles into a new object.
  79. 79. With OOCSS, we’re encouraged to give more forethought to what is common among different elements, then separate those common features into modules, or objects, that can be reused anywhere. Louis Lazaris — Smashing Magazine
  80. 80. Open index.html in browser Let’s Do This.
  81. 81. Containers & Contents Sidebar ~> Object Exercise
  82. 82. Separate - Setup the same styles in the footer Exercise 1 Hints: Assume heading and paragraph styles are site defaults; lists are everything.
  83. 83. Modify - Create styles for the Right Sidebar Exercise 2 Hints: abstract float styles, add an alignment modifier We only need 3 new classes!
  84. 84. Uber Classitis OOCSS http://appendto.com/2014/04/oocss/ Bonus Demo
  85. 85. Questions?
  86. 86. OOCSS Structure vs. Skin Container vs. Content
  87. 87. CLASSITIS
  88. 88. HTML <3 CSS
  89. 89. HTML <3 CSSCSS STYLE
  90. 90. The Semantics Debate • Do classes actually have “semantic” value?
  91. 91. The Semantics Debate • Do classes actually have “semantic” value? • To whom are classes semantic to?
  92. 92. The Semantics Debate • Do classes actually have “semantic” value? • To whom are classes semantic to? • Should we stick with one way or the other?
  93. 93. Presentational Arguments • Classes have NO meaning to the browser.
  94. 94. Presentational Arguments • Classes have NO meaning to the browser. • Classes ARE semantic to developers.
  95. 95. Presentational Arguments • Classes have NO meaning to the browser. • Classes ARE semantic to developers. • Content describes itself, classes don’t need to.
  96. 96. Semantic DRY HTML VS DRY CSSPresentational
  97. 97. WHAT NOW?
  98. 98. Closing Don’ts • Avoid styling ID selectors • Avoid styling descendent selectors, ie. .sidebar ul li • Avoid attaching classes to element selectors, ie. h1.title • Avoid !important
  99. 99. Closing Do’s • Always look for UI patterns • Always be abstracting • Establish and be consistent with your naming system • Use a preprocessor like Sass for even more modularity and organization • Look into other modular systems like SMACSS or Atomic
  100. 100. Resources • https://github.com/stubbornella/oocss/wiki • http://www.smashingmagazine.com/2011/12/12/an- introduction-to-object-oriented-css-oocss/ • http://appendto.com/2014/04/oocss/ • http://nicolasgallagher.com/about-html-semantics- front-end-architecture/ • Decoupling the Frontend with Modular CSS @ SEM.js https://youtu.be/HoQ-QEusyS0
  101. 101. Questions? Slides http://bit.ly/oocss_wks Exercises http://bit.ly/oocss_ex Julie Cameron @jewlofthelotus

×