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

Hogyan írjunk fenntartható CSS-t?

Tamás Hajas
November 07, 2014

Hogyan írjunk fenntartható CSS-t?

#webkonf 2014 előadásom diái.
http://webconf.hu//2014/program?sid=5724#iii2014_05

Tamás Hajas

November 07, 2014
Tweet

More Decks by Tamás Hajas

Other Decks in Technology

Transcript

  1. Hogyan írjunk
    fenntartható CSS-t?
    Hajas Tamás

    View Slide

  2. Hajas Tamás
    Drupal tanácsadó
    Integral Vision Kft

    View Slide

  3. Egyetlen helyes út!

    View Slide

  4. Egyetlen helyes út NINCS!

    View Slide

  5. Csapat

    View Slide

  6. Csapat » Kommunikáció

    View Slide

  7. Coding Standards

    View Slide

  8. Drupal CSS
    Coding Standards
    https://www.drupal.org/
    node/1886770

    View Slide

  9. Harry Roberts
    CSS Guidelines
    http://cssguidelin.es

    View Slide

  10. CSS kód formátum
    CSS kód felépítés
    CSS fájl struktúra

    View Slide

  11. CSS kód formátum
    CSS kód felépítés
    CSS fájl struktúra

    View Slide

  12. Kommentáld a kódodat!

    View Slide

  13. Csapat » Kommunikáció

    View Slide

  14. „Ne törd a fejem!”

    View Slide

  15. „a kód magától értetődő

    „kell legyen”

    View Slide

  16. /**
    * Grid container
    * Must only contain '.cell' children.
    */
    .grid {
    height: 100%;
    !
    font-size: 0;
    !
    white-space: nowrap;
    }

    View Slide

  17. /**
    * Grid container
    * Must only contain '.cell' children.
    */
    .grid {
    height: 100%;
    /* Remove inter-cell whitespace */
    font-size: 0;
    /* Prevent inline-block cells wrapping */
    white-space: nowrap;
    }

    View Slide

  18. /**
    * Grid container
    * Must only contain '.cell' children.
    * 1. Remove inter cell whitespace.
    * 2. Prevent inline-block cells wrapping
    */
    .grid {
    height: 100%;
    font-size: 0; /* 1 */
    white-space: nowrap; /* 2 */
    }

    View Slide

  19. eszközök:
    CSScomb
    .editorconfig

    View Slide

  20. CSS kód formátum
    CSS kód felépítés
    CSS fájl struktúra

    View Slide

  21. Túl
    komplex
    kiválasztó
    CSS problémák
    a HTML struktúra követése
    div.block .title a:link {
    #sidebar-first & {
    .node-19 & {}
    }
    }

    View Slide

  22. ”Qualified
    ”selectors”
    div.block .title a:link {
    #sidebar-first & {
    .node-19 & {}
    }
    }
    CSS problémák
    a HTML struktúra követése

    View Slide

  23. Környezet
    alapú
    kiválasztás
    div.block .title a:link {
    #sidebar-first & {
    .node-19 & {}
    }
    }
    CSS problémák

    View Slide

  24. Gyermek
    kiválasztók
    túl általános
    class névvel
    div.block .title a:link {
    #sidebar-first & {
    .node-19 & {}
    }
    }
    CSS problémák

    View Slide

  25. „A CSS osztály nevek hasznos
    információt kell szolgáltassanak 

    a fejlesztőknek” 

    – Nicolas Gallagher
    About HTML Semantics and Front-End Architecture

    View Slide

  26. .red-box {}
    !
    .message--error {}

    View Slide

  27. Az ID
    kiválasztó
    használata
    stílushoz
    div.block .title a:link {
    #sidebar-first & {
    .node-19 & {}
    }
    }
    CSS problémák

    View Slide

  28. Az
    !important
    „felülíró”
    használata
    div.block .title a:link {
    #sidebar-first & {
    .node-19 & {
    …!important;
    }
    }
    }
    CSS problémák

    View Slide

  29. ”Keep specificity low!”

    View Slide

  30. body #content .data img:hover {}
    !
    !
    !
    !
    #content .data img
    :hover body
    0*1000 + 1*100 + 2*10 + 2*1 = 122
    0 1 2 2 » 122
    Specifikusság példa

    View Slide

  31. CSS kód formátum
    CSS kód felépítés
    CSS fájl struktúra

    View Slide

  32. SMACSS
    See purecss.io for kind of an implementation

    View Slide

  33. • Base
    SMACSS CSS fájl-struktúra
    ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }

    View Slide

  34. • Base
    • Layout
    SMACSS CSS fájl-struktúra

    View Slide

  35. • Base
    • Layout
    • Module
    SMACSS CSS fájl-struktúra

    View Slide

  36. • Base
    • Layout
    • Module
    • State
    SMACSS CSS fájl-struktúra
    .is-open
    :hover
    @media

    View Slide

  37. • Base
    • Layout
    • Module
    • State
    • Theme
    SMACSS CSS fájl-struktúra

    View Slide

  38. • Base
    • Layout
    • Module
    • State
    • Theme
    SMACSS-szerű CSS fájl-struktúra

    View Slide

  39. • Base
    • Layout
    • Component Module
    • State
    • Theme
    SMACSS-szerű CSS fájl-struktúra

    View Slide

  40. • Base
    • Layout
    • Component Module
    • State
    • Theme
    SMACSS-szerű CSS fájl-struktúra

    View Slide

  41. Component
    Atom, Molecule…
    Atomic Design
    Module
    SMACSS
    Object
    OOCSS
    Block
    BEM

    View Slide

  42. base
    • elements.css
    • typography.css
    layout
    • layout.css
    • node-add.css
    • …
    components
    • buttons.css
    • buttons.theme.css
    • …
    theme
    • install-page.css
    • appearance-

    page.css
    SMACSS-szerű CSS fájl-struktúra (Drupal 8)
    Forrás: Drupal 8 Seven theme

    View Slide

  43. base
    layout
    components
    shame.scss
    no-query.scss
    style.scss
    Egy lehetséges Sass fájl struktúra
    config
    • _extendables.scss
    • _functions.scss
    • _mixins.scss
    • _variables.scss

    View Slide

  44. Tipp: Sass Globbing
    @import
    "config/**/*",
    "base/**/*",
    "layout/**/*",
    "components/**/*";
    https://github.com/chriseppstein/sass-globbing

    View Slide

  45. CSS kód formátum
    CSS kód felépítés
    CSS fájl struktúra

    View Slide

  46. BEM

    View Slide

  47. • Base
    • Layout
    • Component
    • Block

    • Element

    • Modifier

    • State

    • Theme
    John Albin: Managing complex projects with design components

    View Slide











  48. John Albin: Managing complex projects with design components
    Component
    • Block

    View Slide











  49. John Albin: Managing complex projects with design components
    Component
    • Element

    View Slide











  50. John Albin: Managing complex projects with design components
    Component
    • Modifier

    View Slide











  51. John Albin: Managing complex projects with design components
    Component
    • State

    View Slide

  52. John Albin: Managing complex projects with design components
    Component
    • State
    .flover:hover {}

    View Slide

  53. @media "print" {
    .flover {}
    }
    John Albin: Managing complex projects with design components
    Component
    • State

    View Slide

  54. Proposal: A Style Guide for Seven
    Progress bar component

    View Slide

  55. CSS architecture (for Drupal 8)
    Progress bar component

    Uploading sunset.jpg




    Uploaded 221 of 762KB
    29%


    cancel


    View Slide

  56. CSS architecture (for Drupal 8)
    Progress bar component
    /**
    * Progress Bar component
    */
    .progress {}
    .progress__track {}
    .progress__bar {}
    .progress__description {}
    .progress__cancel {}
    .progress__cancel:focus,
    .progress__cancel:hover {}
    /**
    * Progress Bar small variant
    */
    .progress--small .progress__track {}
    .progress--small .progress__bar {}
    .progress--small .progress__cancel {}

    View Slide

  57. Classicitis?!

    View Slide



  58. alt="me" />


    @Stubbornella 14 minutes ago


    /* ====== media ====== */
    .media {margin:10px;}
    .media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
    .media .img {float:left; margin-right: 10px;}
    .media .img img{display:block;}
    .media .imgExt{float:right; margin-left: 10px;}
    http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

    View Slide

  59. %media {
    overflow: hidden;
    &:first-child {
    float: left;
    }
    &:last-child {
    overflow: hidden;
    }
    }
    .status {
    @extend %media
    // ...
    }
    !
    .profile {
    @extend %media
    // ...
    }
    http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css

    View Slide

  60. Egyetlen helyes út NINCS!

    View Slide

  61. Tamás Hajas
    Drupal consultant
    Integral Vision Ltd
    integralvision.hu
    about.me/tamashajas

    View Slide