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

CSS Architecture

158df2ad2d800432b505bb1b0e6308c8?s=47 Ghis
June 28, 2017

CSS Architecture

Robust, flexible and scalable CSS for enterprise

158df2ad2d800432b505bb1b0e6308c8?s=128

Ghis

June 28, 2017
Tweet

Transcript

  1. CSS Architecture Robust, flexible and scalable CSS for enterprise www.fatasuir9.com

  2. CSS Architecture Robust, flexible and scalable CSS for enterprise www.fatasuir9.com

  3. –Unknown “Architecture is a systematic arrangement of components”

  4. Harry Roberts Jonathan Snook SMACSS CSSWizardry Nicole Sullivan OOCSS

  5. CSS architects do mistakes… • Insufficient documentations • Lack of

    structure • Project knowledge • Poor handoffs • New styles to the bottom of global stylesheet
  6. SMACSS Jonathan Snook introduced the concept of structuring CSS into

    various categories. They are called CSS Layers
  7. Understanding the purpose of CSS layers adds a lot of

    meaning to the styles you write;
  8. Default layers

  9. • Generic • Elements • Objects • Components • Utilities

    • Tools • Settings • Javascript hooks
  10. Let’s break it down

  11. Generic The 1st layer that generates css • _generic.box-sizing •

    _generic.normalize • _generic.reset • _generic.shared
  12. html { box-sizing: border-box; }

  13. Elements Redefining the default HTML element styles • _elements.headings •

    _elements.images • _elements.page • _elements.tables
  14. img { max-width: 100%; vertical-align: middle; }

  15. Objects Cosmetic-free design patterns such as media object known from

    OOCSS • _objects.block • _objects.box • _objects.layout • _objects.media • _objects.wrapper
  16. .o-media { @include clearfix(); display: block; }

  17. .o-media__img { float: left; margin-right: $global-unit; > img { display:

    block; } } .o-media__body { display: block; overflow: hidden; > :last-child { margin-bottom: 0; } }
  18. Components Project-specific UI components that contains objects and elements •

    _components.bullets • _components.buttons • _components.fonts • _components.quotes
  19. .c-btn { cursor: pointer; display: inline-block; margin: 0; padding: $global-unit-small

    $global-unit; text-align: center; transition: $global-transition; }
  20. .c-btn--primary { background: $brand-color; &:hover, &:focus { background: $brand-hover-color; }

    }
  21. Utilities Helper classes that has the ability to override css

    • _utilities.clearfix • _utilities.headings • _utilities.hide • _utilities.spacing • _utilities.widths
  22. .u-clearfix { @include clearfix(); } .u-hidden-visually { @include invisible(); }

  23. /** * Utility classes to put spacing values onto elements.

    We can generate * a suite of classes like: * * .u-margin-top * .u-padding-left-large * .u-margin-right-small * .u-padding * .u-padding-right-none */
  24. /** * A series of width helper classes that we

    can use like grid * systems. Classes can take a fraction-like format (e.g. * `.u-2/3`) or a spoken-word format (e.g. `.u-2-of-3`). * * <div class=“u-7/12"> * <div class=“u-4-of-16“> * */
  25. Tools Pre-defined mixins and functions • _tools.functions • _tools.mixins •

    _tools.responsive • _tools.widths
  26. @mixin vendor($property, $value...){ -webkit-#{$property}:$value; -moz-#{$property}:$value; -ms-#{$property}:$value; -o-#{$property}:$value; #{$property}:$value; }

  27. /** * A global mixin to quickly generate prefixes. *

    * @include vendor(box-shadow, 0 1px 1px #000) * @include vendor(opacity, .8) * */
  28. Settings Handled with preprocessors • _settings.config • _settings.core • _settings.global

    • _settings.responsive
  29. $global-font: sans-serif; $global-radius: 3px !default; $global-transition: (1/3) + s;

  30. $brand-color: #f4d23e; $secondary-color: #72be49; $text-color: #000;

  31. Javascript hooks Everything javascript related can be hooked • .js-modal-white

    • .js-button-blink • .js-form-validate
  32. I forgot to mention…

  33. CSS architecture is NOT a framework

  34. styleguide ≠ framework

  35. So, what are the benefits?

  36. • Understandable structure • Scalability at ease • Long-term maintainability

    • Smoother project handoffs • Easier collaboration Benefits
  37. Existing styleguides

  38. itcss.io

  39. inuitcss.com

  40. aleutcss.github.io

  41. CSS Guidelines by Harry Roberts https://cssguidelin.es Idiomatic CSS by Nicolas

    Gallagher https://github.com/necolas/idiomatic-css Useful reads
  42. (^(エ)^)