Mengenai mengapa saya memilih untuk tidak menggunakan elm-css

..., Modul CSS, CSS-in-JS dan Tailwind apabila saya tidak dikekang untuk berbuat demikian.

Saya telah memikirkan perkara ini agak lama tetapi tidak dapat menyatakannya dengan jelas sehingga saya menonton ceramah Josh W. Comeau "Cara Mengajar CSS".

Mari kita ambil masalah yang Josh memulakan bicaranya. Kami mempunyai imej yang diletakkan di dalam bekas dan ternyata terdapat jurang pelik di bawah imej itu.

Perkara yang menarik untuk diperhatikan ialah masalah itu berterusan walaupun kita menulisnya menggunakan JSX atau elm-html. Jadi pada asasnya ia adalah masalah HTML/CSS.

Kami boleh membetulkannya menggunakan penyelesaian pertama yang Josh temui, khususnya, dengan menggunakan ketinggian garis: 0 pada elemen bahagian. Dan, adalah mudah untuk menterjemahkan penyelesaian itu kepada penyelesaian yang sepadan dalam elm-css, Modul CSS, CSS-in-JS dan Tailwind.

Untuk cth. dengan elm-css:

import Css
import Html.Styled as H
import Html.Styled.Attributes as HA

main =
    H.toUnstyled <|
        H.section
            [ HA.css [ Css.lineHeight (Css.px 0) ] ]
            [ H.img [ ... ] [] ]

Untuk cth. dengan Tailwind:

<bahagian>



<p>Bagus, masalah selesai. Bergerak ke seterusnya. Tetapi tunggu. Seperti yang Josh nyatakan dengan betul, apabila anda memahami masalah itu dengan mendalam, anda menyedari bahawa itu bukan cara terbaik untuk menyelesaikannya. Dan ini membawa saya kepada cerapan utama.</p>

<h2>
  
  
  Wawasan utama
</h2>

<p>Semua abstraksi ini, elm-css, Modul CSS, CSS-in-JS, Tailwind, dll, yang cuba mengabstrakkan CSS, gagal berbuat demikian kerana <strong>mereka TIDAK mengubah model mental</strong> yang anda perlu menggunakan alasan tentang masalah penggayaan. Mereka pastinya memudahkan penggunaan CSS tetapi apabila masalah penggayaan timbul, orang yang tidak memahami dengan mendalam cara CSS berfungsi akan bergelut untuk mencari penyelesaian.</p>

<p>Undur selangkah dan fikirkan tentangnya. Anda menulis dalam teknologi tersebut tetapi anda berfikir dalam CSS. Anda perlu. Teknologi-teknologi tersebut tidak menawarkan nilai apabila ia datang untuk menyelesaikan masalah penggayaan asas. Bagaimana anda memutuskan apabila satu penyelesaian penggayaan lebih baik daripada yang lain. Anda perlu memahami falsafah web, falsafah HTML, falsafah CSS. Ia bukan semua teknikal. Terdapat cara untuk melakukan sesuatu dan sebabnya.</p>

<p>Fikirkan dengan cara ini. Katakan pembangun menyertai pasukan anda yang tidak memahami CSS tetapi pakar dalam Elm, anda tahu, lebih baik daripada Richard Feldman. Anda memberi mereka pandangan Elm yang digayakan menggunakan elm-css dan mempunyai imej dalam masalah bekas. Bolehkah pemikiran dalam jenis membantu mereka mencari penyelesaian yang baik untuk masalah itu? Line-height: 0 penyelesaian yang kami tulis dalam elm-css di atas melepasi pemeriksa jenis. elm-css tidak membawa kami kepada penyelesaian yang lebih baik kerana ia selamat jenis. Tidak, ia memikirkan tentang mod susun atur yang sampai kepada punca masalah dan akhirnya membawa kepada penyelesaian yang lebih baik. Satu-satunya cara untuk sampai ke sana ialah berfikir dalam CSS, bukan dalam Elm. Ini pada asasnya masalah CSS.</p>

<p>Walaupun kami ingin mengetepikan CSS, kami masih perlu mempelajarinya. Tetapi bagaimana dengan elm-ui?</p><h2>
  
  
  elm-ui
</h2>

<p>elm-ui mengubah model mental anda kerana anda tidak perlu berfikir dari segi HTML dan CSS apabila menggunakannya. Itu novel. Itu mengagumkan. Tiada satu pun daripada teknologi lain yang saya nyatakan mendekati untuk melakukannya. Daftar saya, saya sudah dijual. Walau bagaimanapun, ia tidak sesuai dengan web. Ia bertentangan dengan kehendak web.</p>

<p>Dua isu utama yang saya ada dengan elm-ui mempunyai kaitan dengan ketegaran dan divitis. Ia kembali kepada memahami falsafah domain yang anda sedang usahakan dan perkara yang cuba dicapai oleh komuniti itu secara keseluruhan. Untuk cth. elm-ui mungkin bagus untuk aplikasi desktop asli. Tetapi, di web, kecairan dan kebolehaksesan terlalu dihargai.</p>

<p>Memandangkan konteks itu, bolehkah anda melihat bagaimana seseorang boleh menilai butang ini sebagai cara yang mengerikan untuk melaksanakan butang untuk web? Sila cuba fahami apa yang saya katakan. Ia bukan isu teknologi, ia adalah isu falsafah. Butang itu tidak fleksibel dan tidak boleh diakses.</p>

<h2>
  
  
  Jadi mengapa saya memilih untuk tidak menggunakan elm-css et al.?
</h2>

<p>Mudah. Mereka memberi anda lebih banyak abstraksi untuk keuntungan yang sangat sedikit. Saya meluangkan masa untuk belajar CSS lama dahulu. Saya bukan pakar tetapi saya berjaya dengan BEM dan sebilangan kecil kelas utiliti.</p>

<p>Inilah perkaranya. Saya boleh mengambil mana-mana teknologi lain itu dalam sekelip mata jika projek memerlukannya kerana saya tahu cara berfikir dalam CSS. Teknologi lain itu hanya membantu anda menulis CSS dengan cara yang berbeza. Ya, saya tahu masalah yang mereka selesaikan adalah masalah sebenar, tetapi, terutamanya dalam beberapa tahun kebelakangan ini, terdapat penyelesaian CSS tulen alternatif yang sangat baik.</p>

<p>CSS tidak akan ke mana-mana. Jika anda bercadang untuk membina tapak web dan aplikasi web untuk masa yang lama, maka meluangkan masa untuk memahami CSS dengan mendalam adalah pelaburan yang hebat.</p>

<h2>
  
  
  Kesimpulan
</h2>

<p>elm-css, Modul CSS, CSS-in-JS, Tailwind, dll. ialah teknologi yang hebat. Malangnya, mereka tidak membebaskan anda daripada keperluan untuk belajar dan memahami CSS dengan mendalam. Jika anda sudah mahir menggunakan CSS maka teruskan dan gunakan teknologi tersebut kerana ia boleh menjadi mudah pada masa-masa tertentu, terutamanya Tailwind, yang memudahkan untuk membuat prototaip UI. Tetapi, jika anda bergelut untuk menggunakan CSS dan anda diam-diam tidak menyukainya, ketahuilah bahawa anda mungkin menulis gaya anda yang digabungkan dengan kod anda dan mengelakkan kekhususan tetapi CSS akan tetap berada di fikiran anda. Kecuali model mental CSS anda akan menjadi sangat lemah sehingga setiap masalah penggayaan asas yang anda hadapi hanya akan membuatkan anda semakin membenci CSS. Jangan terperangkap dalam lingkaran itu. Sebaliknya, pelajari CSS.</p>

<h2>
  
  
  Langgan surat berita saya
</h2>

<p>Jika anda berminat untuk meningkatkan kemahiran anda dengan Elm maka saya menjemput anda untuk melanggan surat berita saya, Elm with Dwayne. Untuk mengetahui lebih lanjut mengenainya, sila baca pengumuman ini.</p>


          

            
        

Atas ialah kandungan terperinci Mengenai mengapa saya memilih untuk tidak menggunakan elm-css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!