Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Block__Element--Magic: CSS Modularity for the M...

Block__Element--Magic: CSS Modularity for the Masses!

CodeMash 2017 & Detroit.Code() 2017 talk.

Chris DeMars

January 11, 2017
Tweet

More Decks by Chris DeMars

Other Decks in Technology

Transcript

  1. @saltnburnem | Chris DeMars “…also the problems with how we

    devalue things like CSS…” - Ivana Michael @ CSSConf AU
  2. @saltnburnem | Chris DeMars Instructor, assistant, and speaker for Girl

    Develop It Ann Arbor Microsoft Community Contributor About Me!
  3. @saltnburnem | Chris DeMars Instructor, assistant, and speaker for Girl

    Develop It Ann Arbor Co-organizer for the Ann Arbor Accessibility Group Microsoft Community Contributor About Me!
  4. @saltnburnem | Chris DeMars Instructor, assistant, and speaker for Girl

    Develop It Ann Arbor Co-organizer for the Ann Arbor Accessibility Group Microsoft Community Contributor Open Source Contributor (a11y of rxjs docs) About Me!
  5. @saltnburnem | Chris DeMars Instructor, assistant, and speaker for Girl

    Develop It Ann Arbor I love horror! Co-organizer for the Ann Arbor Accessibility Group Microsoft Community Contributor Open Source Contributor (a11y of rxjs docs) About Me!
  6. @saltnburnem | Chris DeMars Instructor, assistant, and speaker for Girl

    Develop It Ann Arbor I love tattoos! I love horror! Co-organizer for the Ann Arbor Accessibility Group Microsoft Community Contributor Open Source Contributor (a11y of rxjs docs) About Me!
  7. @saltnburnem | Chris DeMars Instructor, assistant, and speaker for Girl

    Develop It Ann Arbor I love tattoos! I love horror! Co-organizer for the Ann Arbor Accessibility Group Microsoft Community Contributor I live in Detroit! Open Source Contributor (a11y of rxjs docs) About Me!
  8. @saltnburnem | Chris DeMars BEM, SMACSS, OOCSS, XP, HTML, HTML5,

    DHTML not really, XHTML, XML, PHP, MySQL, YourSQL, NoSQL, CSS, CSS3, CSS4 maybe, WCM, AWS, TDD, BDD, Sass, ES5, JSON, ES6, ESPN, and last but not least ESPN2.
  9. @saltnburnem | Chris DeMars Semantics Developer semantics vs. HTML/CSS semantics

    Is there really such a thing as CSS semantics?? When creating classes, stick with developer semantics!
  10. @saltnburnem | Chris DeMars Methodology "a set of methods, rules,

    or ideas that are important in a science or art : a particular procedure or set of procedures" *Merriam-Webster
  11. @saltnburnem | Chris DeMars Use flex box to center the

    contents. Decide on consistent margins for components.
  12. @saltnburnem | Chris DeMars Use flex box to center the

    contents. Decide on consistent margins for components. Establish consistent helper classes in incremental values, 5, 10, 15, etc.
  13. @saltnburnem | Chris DeMars Element (image, heading, sub-heading, copy, etc.)

    Element is a child of block. Welcome to the party! Speaker Bio Chris DeMars is a Senior UI Developer at United Shore in Troy, Michigan. He is an instructor and teacher assistant for the…
  14. @saltnburnem | Chris DeMars Element (image, heading, sub-heading, copy, etc.)

    Element is a child of block. Welcome to the party! Speaker Bio Chris DeMars is a Senior UI Developer at United Shore in Troy, Michigan. He is an instructor and teacher assistant for the…
  15. @saltnburnem | Chris DeMars Modifier (color, size, weight, etc.) Represents

    a different state or look of either block or element. Welcome to the party! Speaker Bio Chris DeMars is a Senior UI Developer at United Shore in Troy, Michigan. He is an instructor and teacher assistant for the…
  16. @saltnburnem | Chris DeMars Modifier (color, size, weight, etc.) Represents

    a different state or look of either block or element. Welcome to the party! Speaker Bio Chris DeMars is a Senior UI Developer at United Shore in Troy, Michigan. He is an instructor and teacher assistant for the…
  17. @saltnburnem | Chris DeMars “ We’re not designing pages, we’re

    designing systems of components. ” - Stephen Hay | @stephenhay
  18. @saltnburnem | Chris DeMars Style Naming Remember developer semantics? Be

    specific about what the class is supposed to style.
  19. @saltnburnem | Chris DeMars Chained Classes === Acceptable Bloat But

    it is very specific without the hassle of specificity. Causes bloat
  20. @saltnburnem | Chris DeMars Atomic Design Brad Frost Atoms Pages

    Templates Organisms Molecules @brad_frost
  21. @saltnburnem | Chris DeMars Atomic Design Brad Frost Atoms Pages

    Templates Organisms Molecules http://bradfrost.com/blog/post/atomic-web-design/ @brad_frost
  22. @saltnburnem | Chris DeMars SMACSS Jonathan Snook Scalable and Modular

    Architecture for CSS https://smacss.com/book/categorizing @snookca
  23. @saltnburnem | Chris DeMars SMACSS Jonathan Snook Base Scalable and

    Modular Architecture for CSS https://smacss.com/book/categorizing @snookca
  24. @saltnburnem | Chris DeMars SMACSS Jonathan Snook Base Layout Scalable

    and Modular Architecture for CSS https://smacss.com/book/categorizing @snookca
  25. @saltnburnem | Chris DeMars SMACSS Jonathan Snook Base Modules Layout

    Scalable and Modular Architecture for CSS https://smacss.com/book/categorizing @snookca
  26. @saltnburnem | Chris DeMars SMACSS Jonathan Snook Base State Modules

    Layout Scalable and Modular Architecture for CSS https://smacss.com/book/categorizing @snookca
  27. @saltnburnem | Chris DeMars OOCSS Nicole Sullivan Object oriented framework

    for repeating patterns in CSS. https://github.com/stubbornella/oocss/wiki @stubbornella
  28. @saltnburnem | Chris DeMars OOCSS Nicole Sullivan Separate skin &

    structure Object oriented framework for repeating patterns in CSS. https://github.com/stubbornella/oocss/wiki @stubbornella
  29. @saltnburnem | Chris DeMars OOCSS Nicole Sullivan Separate skin &

    structure Separate container & content Object oriented framework for repeating patterns in CSS. https://github.com/stubbornella/oocss/wiki @stubbornella