Resep Rahasia CSS Custom Properties

Resep Rahasia CSS Custom Properties

Mengatur strategi dalam menerapkan CSS Variable agar lebih dinamis

C7c32e8f54ba5677ea14f80a76efe0a4?s=128

Yudhi Satrio

June 21, 2020
Tweet

Transcript

  1. https://app.sli.do/event/46fzj4qa

  2. Resep Rahasia CSS Custom Properties Oleh isatrio - CC-by-SA 4.0

    license
  3. Selamat datang developer LEMAH yang kalau bikin situs web pakai

    Bootstrap -- Pinjem Coki Anwar
  4. CSS itu mudah!

  5. Siapa yang bilang?

  6. CSS itu “TRICKY”!

  7. Saya adalah tim “CSS adalah bahasa pemrograman”

  8. 1. CSS enggak punya variabel 2. CSS itu bahasa komputer

    untuk menginstruksikan komputer untuk merender gaya
  9. Saya adalah orang pertama yang skeptis dengan variabel css, karena

    saya adalah pengguna css-preprocessor
  10. Variabel dari CSS Preprocessor

  11. Assign variabel

  12. https://codepen.io/isatrio/pen/yLeMLPg Hasil kompilasi

  13. CSS Custom Properties Variabel

  14. Assign variabel Nilai bawaan bila nilai variabel kosong Deklarasi nilai

    variabel
  15. Implementasi Variabel

  16. None
  17. None
  18. Tidak valid

  19. Invalid Invalid

  20. Valid

  21. None
  22. Preprocessor variabel itu statis

  23. None
  24. Variabel CSS itu dinamis

  25. None
  26. Global dan Lokal

  27. None
  28. Terkadang variabel lokal juga masih perlu diimplementasikan

  29. Mengaduk ramuan variabel statis dengan variabel dinamis

  30. Variabel sass statis Variabel css dinamis Implementasi nilai variabel

  31. “Jangan lakukan pada saat runtime, lakukanlah pada saat mendesain” --

    Bill Sourour
  32. None
  33. None
  34. Pisahkan antara desain dan logika

  35. None
  36. None
  37. Jangan mengubah tema warna secara langsung

  38. None
  39. Memperbarui nilai menggunakan JS

  40. None
  41. None
  42. Komponen VueJS https://codepen.io/isatrio/pen/MWKpjar

  43. Referensi 1. Smashing Book 6: New Frontiers In Web Design

    Bab “A Strategy Guide to CSS Custom Properties” oleh MIKE RIETHMULLER 2. Using CSS custom properties MDN 3. Don’t do it at runtime. Do it at design time oleh Bill Sourour