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

utility first css

26a00012c475c2380cd98cfe5e2e70ef?s=47 ozaki25
January 22, 2021

utility first css

26a00012c475c2380cd98cfe5e2e70ef?s=128

ozaki25

January 22, 2021
Tweet

Transcript

  1. 6UJMJUZ'JSTU$44 

  2. ೥ͷ$44ͷτϨϯυ w ೥͸5BJMXJOE$44͕ྲྀߦͨ͠ w 5BJMXJOE$44͸6UJMJUZ'JSTU$44ͳϥΠϒϥϦͱ͍͏͜ͱͰ஫໨͞Εͨ   4UBUFPG$44Ͱ΋ τοϓϖʔδͰݴٴ͞Ε͍ͯΔ https://2020.stateofcss.com/

  3. 6UJMJUZ'JSTU$44ͱ͸ w 6UJMJUZ'JSTU$44ͱ͸
 ͋ΒΏΔύλʔϯͷ࠷খݶͷϓϩύςΟͷΈΛؚΜͩ$44Λఆٛ͠
 ΠϯϥΠϯͰ$44Λॻ͍͍ͯΔ͔ͷΑ͏ʹ࢖͑Δ$44ͷߟ͑ํ   αϯϓϧ͸࣍ͷϖʔδͰ

  4. 6UJMJUZ'JSTU$44ͷྫ   ˣ͜ͷΑ͏ͳϨΠΞ΢τΛ࡞Δͱ͢Δ ैདྷͷΞϓϩʔνͷ৔߹ 6UJMJUZ'JSTU$44ͷ৔߹ https://tailwindcss.com/docs/utility-first

  5. 6UJMJUZ'JSTU$44ͷྫ   ˣ͜ͷΑ͏ͳϨΠΞ΢τΛ࡞Δͱ͢Δ ैདྷͷΞϓϩʔνͷ৔߹ 6UJMJUZ'JSTU$44ͷ৔߹ ैདྷ͸UJUMF΍DPOUFOUͳͲҙຯͷ ͋Δ໋໊Ͱ$44Λఆ͍ٛͯͨ͠ https://tailwindcss.com/docs/utility-first

  6. 6UJMJUZ'JSTU$44ͷྫ   ˣ͜ͷΑ͏ͳϨΠΞ΢τΛ࡞Δͱ͢Δ ैདྷͷΞϓϩʔνͷ৔߹ 6UJMJUZ'JSTU$44ͷ৔߹ 6UJMJUZ'JSTU$44ͩͱ $44ͷ಺༰Λදݱ͢ΔΫϥε໊Ͱ ఆٛ͞Ε͍ͯΔ https://tailwindcss.com/docs/utility-first

  7. 6UJMJUZ'JSTU$44ͷྫ   ˣ͜ͷΑ͏ͳϨΠΞ΢τΛ࡞Δͱ͢Δ ैདྷͷΞϓϩʔνͷ৔߹ 6UJMJUZ'JSTU$44ͷ৔߹ https://tailwindcss.com/docs/utility-first ΠϯϥΠϯͰ$44Λॻ͍͍ͯΔ͔ͷΑ͏ͳײ֮

  8. 6UJMJUZ'JSTU$44ͷϝϦοτ  ࣗ෼Ͱ৽͍͠$44Λॻ͘ඞཁ͕ͳ͘ͳΔ  Ϋϥε໊Λߟ͑Δඞཁ͕ͳ͘ͳΔ  ελΠϧʹมߋ͕҆શʹͳΔ   ࣍ͷϖʔδ͔Β

    ͦΕͧΕৄ͘͠આ໌͠·͢
  9. ࣗ෼Ͱ৽͍͠$44Λॻ͘ඞཁ͕ͳ͘ͳΔ w ༻ҙ͞ΕͨΫϥεΛ૊Έ߹ΘͤΔ͚ͩͳͷͰ$44Λॻ͘ඞཁ͕ͳ͍ w ϨΠΞ΢τΛ࡞Δࡍʹ)5.-ϑΝΠϧ͔Β཭ΕΔ͜ͱͳ͘
 ίʔσΟϯά͢Δ͜ͱ͕Ͱ͖Δ w $44Λॻ͔ͳ͍ͷͰ$44Λϝϯς͢Δඞཁ΋ͳ͘ͳΔ  

    ϨΠΞ΢τมߋ͸)5.-͚ͩͰ׬݁
  10. Ϋϥε໊Λߟ͑Δඞཁ͕ͳ͘ͳΔ w ༻ҙ͞Εͨ$44Λ࢖͏͚ͩͳͷͰΫϥε໊Λߟ͑Δඞཁ͕ͳ͘ͳΔ   ϨΠΞ΢τͷ౎߹Ͱλά͕ଟஈʹͳΔ࣌ʹແཧ ΍ΓΫϥε໊Λ͚ͭͨΓͯ͠·ͤΜ͔ʁ Ϋϥε໊ͷωʔϛϯάϧʔϧΛߟ͑ͨΓ ͦΕΛνʔϜʹਁಁͤͨ͞Γ
 कΒΕͯΔ͔νΣοΫͨ͠Γ͢Δͷ΋େมͩΑͶ


  11. ελΠϧʹมߋ͕҆શʹͳΔ w $44͸ن໛͕େ͖͘ͳΔʹͭΕͯӨڹൣғ͕େ͖͘ͳΓ
 มߋ࡟আͷϋʔυϧ͕ߴ͘ͳΔ   ͍Ζ͍Ζͳͱ͜ΖͰ࢖ΘΕ͍ͯͦ͏ͳఆٛʹ खΛՃ͑ͨ͘ͳͬͨ࣌ʹؾܰʹͰ͖ͳ͍ ාͯ͘୭΋͞ΘΕͳ͍ڊେͳ$44ʹ ૺ۰ͨ͜͠ͱ͕͋Δਓ΋ଟ͍ͷͰ͸ͳ͍Ͱ͠ΐ͏͔

  12. 6UJMJUZ'JSTU$44ʹର͢Δٙ໰  ಉ͡ϨΠΞ΢τΛ࢖͍·Θ͍ͨ࣌͠͸Ͳ͏͢Δͷʁ  େྔͷ$44ؚ·ΕΔ͔ΒϑΝΠϧαΠζ͕େ͖͘ͳΒͳ͍ʁ  ΠϯϥΠϯελΠϧ͡Όμϝͳͷʁ   ࣍ͷϖʔδ͔Β

    ͦΕͧΕৄ͘͠આ໌͠·͢
  13. ಉ͡ϨΠΞ΢τΛ࢖͍·Θ͍ͨ࣌͠͸Ͳ͏͢Δͷʁ w 2ྫ͑͹ಉ͡ϨΠΞ΢τͷϘλϯΛԿ౓΋࢖͏࣌͸
 ຖճˣΛίϐϖ͢Δͷʁʁ
   w "ڞ௨Խ͍ͨ͠ͱ͖͸ίϯϙʔωϯτԽ͢Δ
 ɹͭ·Γ3FBDU΍7VF΍8FC$PNQPOFOUTͱ߹Θͤͯ࢖͏ͷ͕ྑ͍ 

    
  14. େྔͷ$44ؚ·ΕΔ͔ΒϑΝΠϧαΠζ͕େ͖͘ͳΒͳ͍ʁ w 2࢖ΘΕͳ͍ఆٛ΋େྔʹؚΜͩڊେͳ$44ΛಡΈࠐΉඞཁʹͳ Δ͔ΒύϑΥʔϚϯεʹ໰୊͕ͰΔͷͰ͸ʁ w "Ϗϧυ͢Δ͜ͱͰΞϓϦ಺Ͱ࢖ΘΕͯΔ෦෼͚ͩΛநग़ͨ͠ $44Λ࡞੒͢Δ͜ͱ͕Ͱ͖Δ   5BJMXJOE͸1PTU$44Λ͔ͭ͏͜ͱͰ

    ͜ͷ࢓૊ΈΛ࣮ݱ͍ͯ͠·͢
  15. ΠϯϥΠϯελΠϧ͡Όμϝͳͷʁ w 2)5.-ʹ௚઀ελΠϧΛॻ͘ͷͱԿ͕ҧ͏ͷʁ
 ˣ͜Μͳײ͡ w "ΠϯϥΠϯελΠϧͩͱ࣮ݱͰ͖ͳ͍͜ͱ͕͋Δ  ٙࣅΫϥε͕࢖͑ͳ͍  ϝσΟΞΫΤϦ͕࢖͑ͳ͍

     αΠζͳͲͷ਺஋͕
 ϚδοΫφϯόʔʹͳͬͯ͠·͏   IPWFS΍GPDVTͳͲͷελΠϧఆٛ ʹ͸ٖࣅΫϥεΛ࢖͏ඞཁ͕͋Δ ϝσΟΞΫΤϦΛ࢖͏ͱ ΢Οϯυ΢αΠζʹԠͨ͡ $44ͷ࢖͍෼͚ͳͲ͕Ͱ͖Δ
  16. 6UJMJUZ'JSTU$44ద༻৔໘ w 6UJMJUZ'JSTU$44ͷޮՌ͕ߴ͍έʔε w ࣗલͰ࣮૷͢Δ$44͕ଟ͍ΞϓϦ w ϖʔδ਺͕ଟ͘ϨΠΞ΢τͷมߋ͕ଟ͍ΞϓϦ w 3FBDU΍7VFΛ࢖ͬͨΞϓϦ w

    6UJMJUZ'JSTU$44ͷޮՌ͕௿͍έʔε w ϖʔδ਺͕গͳ͍খن໛ͳΞϓϦ΍ݟͨ໨ʹͩ͜ΘΒͳ͍ϓϩτλΠϓͷ։ൃ w 6*ϑϨʔϜϫʔΫʹ·Δ͝ͱ৐͔ͬΕΔΞϓϦ w ΫϥΠΞϯταΠυͷίʔυΛϏϧυ͠ͳ͍ΞϓϦ  
  17. ݸਓతͳײ૝ w ຊ൪ΞϓϦͰͷͭΒΈ͸Α͘෼͔Δ w ୭΋͞ΘΕͳ͍ڊେͳ$44ΛԿ౓΋ݟ͖ͯͨ w Ϋϥε໊ͷϧʔϧΛͲͷߟ͑ํͰ͍͔ܾ͘ΊΔͷ΋໘౗ͩ͠
 ͦΕΛνʔϜʹਁಁͤ͞Δίετ΋ߴ͍ w ࠷ۙ͸ϓϩτλΠϓΛ࡞Δ͜ͱ͕ଟ͍͕ͦ͜Ͱ͸UPPNVDI

    w $44͸ॻ͖ͨ͘ͳ͍͕6*ϥΠϒϥϦʹؙ৐ΓͰ͖Δͦ͠ͷํָ͕ w ࣮ࡍ࢖ͬͯΈ͍ͨͱࢥ͏͔ w ࣗ෼͕࢖͍͜ͳͤͯ΋ΈΜͳʹ࢖͍͜ͳͤͯ΋Β͑Δ͔ෆ҆ w ͱ͸͍͑ैདྷͷ΍ΓํͰ΋՝୊͸͋ΔͷͰࢼͯ͠ݟΔՁ஋͸͋Γͦ͏  
  18. ͋Γ͕ͱ͏͍͟͝·ͨ͠  

  19. ࠓ೔ͷεϥΠυΧϥʔ͸
 5BJMXJOEͷϒϥϯυΧϥʔͰͨ͠