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

Modern CSS: architecture, future specs and build flow

Modern CSS: architecture, future specs and build flow

at DevFest Tokyo 2016.

Masaaki Morishita

October 09, 2016
Tweet

More Decks by Masaaki Morishita

Other Decks in Technology

Transcript

  1. ࣗݾ঺հ .about-me { name: Masaaki Morishita; twitter: @morishitter_; github: morishitter;

    qiita: morishitter; works-at: 'Increments, inc.'; specializing-in: CSS; }
  2. CSS: It was twenty years ago today — an interview

    with Håkon Wium Lie ʮCSS͸500೥ޙ΋ಡΉ͜ͱ͕ Ͱ͖Δ͸ͣʯ h"ps:/ /dev.opera.com/ar0cles/css-twenty-years- hakon/
  3. ࠷ۙͷCSS animation, @keyframes, box-sizing, border-radius currentColor, color(), Custom Properties, @apply,

    containment, display: flex, display: grid, em, rem, vw, vh, vmin, vmax, @font-face, object-fit, filter, transition, transform, will-change, writing-mode, etc...
  4. ηϨΫλͷৄࡉ౓ • #id > .class, [attr] > Element • ࠷ڧͷढจ

    !important , styleଐੑ h1#title { font-size: 24px; } h1 { font-size: 20px; font-weight: bold; margin-bottom: 1em; }
  5. ίʔσΟϯάن໿ • Google HTML/CSS Style Guide (Google) • idioma8c CSS

    (Nicolas Gallagher) • Code Guide by @mdo (Mark OBo) • CSS Guidelines (Harry Roberts) ໋໊نଇ΍ϑΥʔϚοτ
  6. ෆ٢ͳ೏͍ • ʮCode smells in CSSʯby Harry Roberts • h5p:/

    /csswizardry.com/2012/11/code-smells-in-css/
  7. ελΠϧͷऔΓফ͠ BAD ! h2 { font-size: 2rem; margin-bottom: .5em; padding-bottom:

    .5em; border-bottom: 1px solid #ccc; } .no-boader { padding-bottom: 0; border-bottom: none; }
  8. ελΠϧͷऔΓফ͠ GOOD ! h2 { font-size: 2rem; margin-bottom: .5em; }

    .headline { padding-bottom: .5em; border-bottom: 1px solid #ccc; }
  9. <button class="button button--success">OK</button> <button class="button button--danger">Cancel</button> .button { display: inline-block;

    /* with other properties */ } .button--success { color: #fff; background-color: #2e6da4; } .button--danger { color: #fff; background-color: #d43f3a; }
  10. ίϯςϯπͱίϯςφͷ෼཭ • CSSͷηϨΫλ͸HTMLͷߏ଄ʹґଘ͢΂͖Ͱ͸ͳ͍ .list { padding: 12px; list-style: none; }

    .list-item { display: block; margin-bottom: 8px; font-size: 12px; text-decoration: none; color: #757575; }
  11. <ul class="list"> <li class="list-item">A</li> <li class="list-item">B</li> <li class="list-item">C</li> </ul> or

    <div class="list"> <a class="list-item" href="#">A</a> <a class="list-item" href="#">B</a> <a class="list-item" href="#">C</a> </div>
  12. .Tab { /* Block */ display: flex; align-items: center; }

    .Tab__item { /* Element */ display: flex; align-items: center; justify-content: center; flex: 0 0 calc(100% / 3); height: 50px; color: #444; background-color: #eee; } .Tab__item--active { /* Modifier */ color: #fff; background-color: #444; }
  13. BEMͷ໋໊نଇ • MindBEMding • Block__Element • Block--Modifier • Block__Element--Modifier h"p:/

    /csswizardry.com/2013/01/mindbemding-ge;ng-your-head-round-bem-syntax/
  14. ITCSSͷελΠϧ෼ׂ • Se$ngs: શମͷઃఆ΍ΧϥʔύϨοτ΍ϑΥϯταΠζΛSass ͳͲͷม਺Λ࢖ͬͯఆٛ • Tools: Mixin ΍ Func4on

    • Generics: ελΠϧͷϦηοτ (e.g. normalize.css) • Base: ཁૉηϨΫλΛ࢖ͬͨϧʔϧηοτΛఆٛ
  15. FlexίϯςφͱFlexΞΠςϜ <div style="display: flex;"> <div>FlexΞΠςϜ</div> <div>FlexΞΠςϜ</div> <div>FlexΞΠςϜ</div> </div><!-- Flexίϯςφ -->

    • display: flex Λࢦఆ͢Δͱͦͷཁૉ͸FlexίϯςφʹͳΔ • Flexίϯςφͷࢠཁૉ͕FlexΞΠςϜ
  16. 2. CSS Custom Proper/es for Cascading Variables • ҎԼ Custom

    Proper-es • ϓϩύςΟͷ஋Λม਺ͱͯ͠؅ཧ͢Δ͘͠Έ • CSSͷʮந৅ԽͰ͖ͳ͍໰୊ʯͷͻͱͭͷղܾࡦ
  17. Custom Proper,esͷఆٛͱ࢖༻ :root { --thumbnailSize: 40px; --mainColor: #55acee; } .logo

    { fill: var(--mainColor); } .thumbnail { width: var(--thumbnailSize, 32px); height: var(--thumbnailSize, 32px); border-radius: 100%; }
  18. Custom Proper,esͷΧεέʔσΟϯά <section> <h1 id="title">λΠτϧ</h1> </section> :root { --textColor: red;

    } #title { --textColor: green; } h1 { --textColor: blue; } h1 { color: var(--textColor); /* green */ }
  19. var()ؔ਺ͷ࣮ߦͷλΠϛϯά <section> <h1 id="title">λΠτϧ</h1> </section> :root { --textColor: red; }

    #title { --textColor: blue; } section { color: var(--textColor); } h1 { color: inherit; /* red */ } var()ؔ਺ͷධՁ͸ܧঝΑΓ΋ઌʹߦΘΕΔ
  20. 3. tabatkins / specs • by Tab Atkins Jr. •

    in CSSWG, Google • Flexboxͱ͔CustomProper?esͷΤ σΟλ • ࣗ෼ͷϦϙδτϦʹCSSͷ࢓༷ΛఏҊ
  21. 3. CSSͷ৽͍͠࢓༷ʢ·ͱΊʣ • Flexbox • ॊೈͳϨΠΞ΢τͷͨΊͷ࢓༷ • Custom Proper1es •

    CSSͰม਺Λ࢖͏ͨΊͷػߏ • tabatkins / specs • GoogleΤϯδχΞͷఏҊ
  22. 4. CSSϞμϯϏϧυϑϩʔ • ϓϦϓϩηοαʔͷར༻͕౰ͨΓલͷ࣌୅ʢҟ࿦͸ೝΊΔʣ • Sass, Less, Stylus, etc •

    ʮந৅Խɾߏ଄Խ͕Ͱ͖ͳ͍໰୊ʯͷղܾࡦ • ࠷దԽ • minify, Ϋϩεϒϥ΢βରԠ, ϓϩύςΟͷιʔτ, etc • ϦϯλʔͱϑΥʔϚολʔ
  23. PostCSS ͱ͸ • by Andrey Sitnik • Transforming styles with

    JS plugins • PostCSSࣗମ͸CSSύʔαʔ • ASTΛૢ࡞͢ΔAPIΛఏڙ • ASTͷૢ࡞͸શͯϓϥάΠϯ͕୲౰
  24. Custom Proper,es input: :root { --fontSize-m: 18px; } p {

    font-size: var(--fontSize-m); } output: p { font-size: 18px; }
  25. Custom media queries input: @custom-media --small-viewport (max-width: 600px); @media (--small-viewport)

    { /* styles for small viewport */ } output: @media (max-width: 600px) { /* styles for small viewport */ }
  26. Custom selectors input: @custom-selector :--heading h1, h2, h3; article :--heading

    { margin-bottom: 2em; } output: article h1, article h2, article h3 { margin-bottom: 2em; }
  27. @apply input: :root { --truncate: { white-space: nowrap; overflow: hidden;

    text-overflow: ellipsis; } } p { @apply --truncate; } output: p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  28. @extend input: .error { color: red; } .serious-error { @extend

    .error; } output: .error, .serious-error { color: red; }
  29. ύϑΥʔϚϯε PostCSS: 42 ms Rework: 68 ms (1.6 times slower)

    libsass: 77 ms (1.9 times slower) Less: 142 ms (3.4 times slower) Stylus: 200 ms (4.8 times slower) Stylecow: 259 ms (6.2 times slower) Ruby Sass: 877 ms (21.0 times slower) h"ps:/ /github.com/postcss/benchmark