CSS Architecture

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. (^(エ)^)