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. 5.

    CSS architects do mistakes… • Insufficient documentations • Lack of

    structure • Project knowledge • Poor handoffs • New styles to the bottom of global stylesheet
  2. 6.

    SMACSS Jonathan Snook introduced the concept of structuring CSS into

    various categories. They are called CSS Layers
  3. 7.
  4. 9.

    • Generic • Elements • Objects • Components • Utilities

    • Tools • Settings • Javascript hooks
  5. 11.

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

    _generic.normalize • _generic.reset • _generic.shared
  6. 13.

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

    _elements.images • _elements.page • _elements.tables
  7. 15.

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

    OOCSS • _objects.block • _objects.box • _objects.layout • _objects.media • _objects.wrapper
  8. 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; } }
  9. 18.

    Components Project-specific UI components that contains objects and elements •

    _components.bullets • _components.buttons • _components.fonts • _components.quotes
  10. 19.

    .c-btn { cursor: pointer; display: inline-block; margin: 0; padding: $global-unit-small

    $global-unit; text-align: center; transition: $global-transition; }
  11. 21.

    Utilities Helper classes that has the ability to override css

    • _utilities.clearfix • _utilities.headings • _utilities.hide • _utilities.spacing • _utilities.widths
  12. 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 */
  13. 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“> * */
  14. 27.

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

    * @include vendor(box-shadow, 0 1px 1px #000) * @include vendor(opacity, .8) * */
  15. 36.

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

    • Smoother project handoffs • Easier collaboration Benefits
  16. 38.
  17. 41.

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

    Gallagher https://github.com/necolas/idiomatic-css Useful reads
  18. 42.