Hogyan írjunk fenntartható CSS-t?

64629f8ab63e46514ab21ea647f9d8af?s=47 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

64629f8ab63e46514ab21ea647f9d8af?s=128

Tamás Hajas

November 07, 2014
Tweet

Transcript

  1. 5.
  2. 16.

    /** * Grid container * Must only contain '.cell' children.

    */ .grid { height: 100%; ! font-size: 0; ! white-space: nowrap; }
  3. 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; }
  4. 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 */ }
  5. 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 & {} } }
  6. 22.

    ”Qualified ”selectors” div.block .title a:link { #sidebar-first & { .node-19

    & {} } } CSS problémák a HTML struktúra követése
  7. 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
  8. 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
  9. 28.
  10. 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
  11. 36.

    • Base • Layout • Module • State SMACSS CSS

    fájl-struktúra .is-open :hover @media
  12. 37.
  13. 38.

    • Base • Layout • Module • State • Theme

    SMACSS-szerű CSS fájl-struktúra
  14. 39.

    • Base • Layout • Component Module • State •

    Theme SMACSS-szerű CSS fájl-struktúra
  15. 40.

    • Base • Layout • Component Module • State •

    Theme SMACSS-szerű CSS fájl-struktúra
  16. 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
  17. 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
  18. 46.

    BEM

  19. 47.

    • Base • Layout • Component • Block • Element

    • Modifier • State • Theme John Albin: Managing complex projects with design components
  20. 48.

    <div class="flower__bed"> <div class="flower"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div

    class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components Component • Block
  21. 49.

    <div class="flower__bed"> <div class="flower"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div

    class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components Component • Element
  22. 50.

    <div class="flower__bed"> <div class="flower flower--tulip"> <div class="flower__petals"> <div class="flower__face"></div> </div>

    <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components Component • Modifier
  23. 51.

    <div class="flower__bed"> <div class="flower is-pollinating"> <div class="flower__petals"> <div class="flower__face"></div> </div>

    <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components Component • State
  24. 53.

    @media "print" { .flover {} } John Albin: Managing complex

    projects with design components Component • State
  25. 55.

    CSS architecture (for Drupal 8) Progress bar component <div class="progress

    progress--small"> <label class="label label--small">Uploading sunset.jpg</label> <div class="progress__track"> <div class="progress__bar" style="width: 29%"></div> </div> <div class="progress__description"> <div class="layout-pull">Uploaded 221 of 762KB</div> <strong class="layout-push">29%</strong> </div> <a class="progress__cancel" href="#" title="cancel"> <span class="visually-hidden">cancel</span> </a> </div>
  26. 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 {}
  27. 58.

    <div class="media attribution"> <a href="http://twitter.com/stubbornella" class="img"> <img src="http://stubbornella.com/profile_image.jpg" alt="me" />

    </a> <div class="bd"> @Stubbornella 14 minutes ago </div> </div> /* ====== 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/
  28. 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