CSS Architecture

Transcript

1. 1.

   CSS Architecture Robust, flexible and scalable CSS for enterprise @fatasuir9

2. 2.

   CSS Architecture Robust, flexible and scalable CSS for enterprise @fatasuir9

3. 3.

   –Unknown “Architecture is a systematic arrangement of components”

4. 4.

   Harry Roberts Jonathan Snook SMACSS CSSWizardry Nicole Sullivan OOCSS

5. 5.

   CSS architects do mistakes… • Insufficient documentations • Lack of

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

   SMACSS Jonathan Snook introduced the concept of structuring CSS into

   various categories. They are called CSS Layers
7. 7.

   Understanding the purpose of CSS layers adds a lot of

   meaning to the styles you write;
8. 8.

   Default layers

9. 9.

   • Generic • Elements • Objects • Components • Utilities

   • Tools • Settings • Javascript hooks
10. 10.

    Let’s break it down

11. 11.

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

    _generic.normalize • _generic.reset • _generic.shared
12. 12.

    html { box-sizing: border-box; }

13. 13.

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

    _elements.images • _elements.page • _elements.tables
14. 14.

    img { max-width: 100%; vertical-align: middle; }

15. 15.

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

    OOCSS • _objects.block • _objects.box • _objects.layout • _objects.media • _objects.wrapper
16. 16.

    .o-media { @include clearfix(); display: block; }

17. 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. 18.

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

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

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

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

    .c-btn--primary { background: $brand-color; &:hover, &:focus { background: $brand-hover-color; }

    }
21. 21.

    Utilities Helper classes that has the ability to override css

    • _utilities.clearfix • _utilities.headings • _utilities.hide • _utilities.spacing • _utilities.widths
22. 22.

    .u-clearfix { @include clearfix(); } .u-hidden-visually { @include invisible(); }

23. 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. 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. 25.

    Tools Pre-defined mixins and functions • _tools.functions • _tools.mixins •

    _tools.responsive • _tools.widths
26. 26.

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

27. 27.

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

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

    Settings Handled with preprocessors • _settings.config • _settings.core • _settings.global

    • _settings.responsive
29. 29.

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

30. 30.

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

31. 31.

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

    • .js-button-blink • .js-form-validate
32. 32.

    I forgot to mention…

33. 33.

    CSS architecture is NOT a framework

34. 34.

    styleguide ≠ framework

35. 35.

    So, what are the benefits?

36. 36.

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

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

    Existing styleguides

38. 38.

    itcss.io

39. 39.

    inuitcss.com

40. 40.

    aleutcss.github.io

41. 41.

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

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

    (^(エ)^)

43. 43.

    Ghis Senior Product Designer | UX Consultant fatasuir9.com