Save 37% off PRO during our Black Friday Sale! »

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

D32564792887e3fb5955021f9804c0a6?s=47 Edward Fox
February 07, 2018

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

2017/02/07 Repro Media Team LT Session

D32564792887e3fb5955021f9804c0a6?s=128

Edward Fox

February 07, 2018
Tweet

Transcript

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

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

    Vue.js
  3. ಥવͰ͕͢Έͳ͞Μ

  4. CSSͷৄࡉ౓ʹ͍ͭͯ

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

  6. ৄࡉ౓ #ͱ͸

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

  8. Α͏͢Δʹ

  9. None
  10. CSS = Cascading Style Sheets

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

  12. ͭ·Γ

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

  15. ͱ͍͏͜ͱͰ

  16. ৄࡉ౓ΫΠζʙ

  17. None
  18. ໰୊1 ੍ݶ࣌ؒ10ඵ

  19. // CSS #foo { color: red; } .bar { color:

    blue; } // HTML <p id="foo" class="bar">ࢲͷઓಆྗ͸530000Ͱ͢</p> A. ࢲͷઓಆྗ͸530000Ͱ͢ B. ࢲͷઓಆྗ͸530000Ͱ͢
  20. ਖ਼ղ͸…

  21. A

  22. // CSS #foo { color: red; } .bar { color:

    blue; } // HTML <p id="foo" class="bar">ࢲͷઓಆྗ͸530000Ͱ͢</p> ɾclassΑΓ΋idͷํ͕ৄࡉ౓͸্ ɾ΋͏ͪΐ͍ิ଍ॻ͘
  23. ໰୊2 ੍ݶ࣌ؒ15ඵ

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

    color: blue; } // HTML <ul> <li id=“must-buy"> <span>͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔΜ͡Όͳ͍͔Ͷʁ</span> </li> </ul> A. ͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔ Μ͡Όͳ͍͔Ͷʁ B. ͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔ Μ͡Όͳ͍͔Ͷʁ
  25. ਖ਼ղ͸…

  26. B

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

    color: blue; } // HTML <ul> <li id=“must-buy"> <span>͓·͑΋͔ͯ͠͠·ͩࣗ෼͕ࢮͳͳ͍ͱͰ΋ࢥͬͯΔΜ͡Όͳ͍͔Ͷʁ</span> </li> </ul> ղઆ
  28. ໰୊3

  29. // CSS ul.shopping-list li .highlight { color: red; } ul.shopping-list

    li .highlight:nth-of-type(odd) { color: blue; } // HTML <ul class="shopping-list"> <li><span class=“highlight">͟Θɾɾɾ</span></li> </ul> A. ͟Θɾɾɾ B. ͟Θɾɾɾ
  30. ਖ਼ղ͸…

  31. B

  32. // CSS ul.shopping-list li .highlight { color: red; } ul.shopping-list

    li .highlight:nth-of-type(odd) { color: blue; } // HTML <ul class="shopping-list"> <li><span class=“highlight">͟Θɾɾɾ</span></li> </ul> B. ͟Θɾɾɾ ղઆ
  33. ͱ͍͏͜ͱͰ

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

  35. ͓͠·͍