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

もういちどCSS詳細度の話をしよう

Edward Fox
February 07, 2018

 もういちどCSS詳細度の話をしよう

2017/02/07 Repro Media Team LT Session

Edward Fox

February 07, 2018
Tweet

More Decks by Edward Fox

Other Decks in Technology

Transcript

  1. ΋͏Ұ౓
    CSSৄࡉ౓ͷ
    ࿩Λ͠Α͏
    Edward Fox 2018/02/07
    @media-team front-end LT session

    View Slide

  2. @edwardkenfox
    Edward Fox
    ɾΤϯδχΞ@Reproגࣜձࣾ
    ɾ୅ʑ໦ͷํ͔Βདྷ·ͨ͠
    ɾRuby, JavaScript, AWS
    ɾϒϥ΢βٕज़શൠ, PWA, Vue.js

    View Slide

  3. ಥવͰ͕͢Έͳ͞Μ

    View Slide

  4. CSSͷৄࡉ౓ʹ͍ͭͯ

    View Slide

  5. ࣗ৴Λ΋ͬͯ෼͔Δͱ
    ݴ͑·͔͢ʁ

    View Slide

  6. ৄࡉ౓ #ͱ͸

    View Slide

  7. ͲͷϓϩύςΟ஋͕࠷΋
    ͋Δཁૉʹؔ܎͕͋Γ
    ద༻͞ΕΔ͔Λ
    ϒϥ΢β͕ܾఆ͢Δखஈ
    ※MDNΑΓ

    View Slide

  8. Α͏͢Δʹ

    View Slide

  9. View Slide

  10. CSS =
    Cascading
    Style
    Sheets

    View Slide

  11. ϢʔβʔΤʔδΣϯτɺ΢Σ
    ϒαΠτ੍࡞ऀɺϢʔβ͕
    ͦΕͧΕఆٛͨ͠CSSͷ΋
    ͨΒ͢ޮՌΛॏͶ߹ΘͤΔ
    ʢΧεέʔυ͢Δʣ͜ͱ͕
    Ͱ͖Δ

    View Slide

  12. ͭ·Γ

    View Slide

  13. View Slide

  14. OOCSSͱ͔BEMͱ͔
    ͦ͏͍͏ઃܭख๏͸શ෦
    ͜ͷCSSͷ Ϋι࢓༷ ಛੑ
    ΛͲ͏੔ཧ͢Δ͔
    ͱ͍͏࿩ͩͱࢥ͏

    View Slide

  15. ͱ͍͏͜ͱͰ

    View Slide

  16. ৄࡉ౓ΫΠζʙ

    View Slide

  17. View Slide

  18. ໰୊1
    ੍ݶ࣌ؒ10ඵ

    View Slide

  19. // CSS
    #foo { color: red; }
    .bar { color: blue; }
    // HTML
    ࢲͷઓಆྗ͸530000Ͱ͢
    A. ࢲͷઓಆྗ͸530000Ͱ͢
    B. ࢲͷઓಆྗ͸530000Ͱ͢

    View Slide

  20. ਖ਼ղ͸…

    View Slide

  21. A

    View Slide

  22. // CSS
    #foo { color: red; }
    .bar { color: blue; }
    // HTML
    ࢲͷઓಆྗ͸530000Ͱ͢
    ɾclassΑΓ΋idͷํ͕ৄࡉ౓͸্
    ɾ΋͏ͪΐ͍ิ଍ॻ͘

    View Slide

  23. ໰୊2
    ੍ݶ࣌ؒ15ඵ

    View Slide

  24. // CSS
    ul li { color: red; }
    #must-buy { color: blue; }
    // HTML


    ͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔΜ͡Όͳ͍͔Ͷʁ


    A. ͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔ
    Μ͡Όͳ͍͔Ͷʁ
    B. ͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔ
    Μ͡Όͳ͍͔Ͷʁ

    View Slide

  25. ਖ਼ղ͸…

    View Slide

  26. B

    View Slide

  27. // CSS
    ul li { color: red; }
    #must-buy { color: blue; }
    // HTML


    ͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔΜ͡Όͳ͍͔Ͷʁ


    ղઆ

    View Slide

  28. ໰୊3

    View Slide

  29. // CSS
    ul.shopping-list li .highlight { color: red; }
    ul.shopping-list li .highlight:nth-of-type(odd) { color: blue; }
    // HTML

    ͟Θɾɾɾ

    A. ͟Θɾɾɾ
    B. ͟Θɾɾɾ

    View Slide

  30. ਖ਼ղ͸…

    View Slide

  31. B

    View Slide

  32. // CSS
    ul.shopping-list li .highlight { color: red; }
    ul.shopping-list li .highlight:nth-of-type(odd) { color: blue; }
    // HTML

    ͟Θɾɾɾ

    B. ͟Θɾɾɾ
    ղઆ

    View Slide

  33. ͱ͍͏͜ͱͰ

    View Slide

  34. ৄࡉ౓Λ࢖͍͜ͳ͠
    ྑ͍CSSϥΠϑΛ

    View Slide

  35. ͓͠·͍

    View Slide