5 Alat CSS Teratas untuk Pengembang dan Desainer Web

CSS telah berjalan jauh, tetapi tooling di sekitarnya belum sampai sekarang.


Jika Anda merasa bahwa menulis CSS seperti melawan monster di tar tar, Anda tidak sendirian. Meskipun CSS adalah salah satu teknologi paling mendasar yang mendukung Web, itu bukan bahasa pemrograman atau kerangka kerja yang tepat. Akibatnya, segera setelah proyek Anda mulai tumbuh lebih menonjol, demikian juga kekacauan – aturan pemilih tampaknya ada di semua tempat, dan sulit untuk menemukan di mana; saat Anda memasukkan font, CSS eksternal, JS, dan aset lainnya di halaman Anda, ukuran akhir bundel tampaknya tumbuh di luar kendali, dan Anda bertanya-tanya di mana cita-cita front-end yang cepat dan mudah digunakan hilang.

Tetapi tidak harus seperti itu. Saat ini tooling di sekitar CSS telah berevolusi ke tingkat yang alur kerjanya tidak bisa dijinakkan tetapi juga dinikmati. Dalam artikel ini, saya akan berbicara tentang lima alat CSS yang saya temukan sangat berharga dalam pekerjaan saya. Saya secara sadar menghindari, termasuk alat “mainan” seperti generator CSS, generator menu, dll., Karena mereka menciptakan lebih banyak masalah daripada yang mereka pecahkan.

Kereta CSS akan datang! Ayo pergi! �� ��

PostCSS

Jika Anda menyukai JavaScript, Anda menyukai ide yang sekarang dapat kita tambahkan dan kontrol CSS melalui JavaScript. Dan memang itulah kemampuannya PostCSS menyediakan.

Namun, itu bukan hanya sintaksis berbasis JavaScript di atas CSS. PostCSS merangkum beberapa paket / fitur hebat secara bersamaan, menghasilkan alur kerja yang jauh lebih menyenangkan dan lebih mudah ketika berhadapan dengan CSS. Contohnya:

  • Awalan vendor dapat ditambahkan secara otomatis berdasarkan properti yang Anda gunakan.
  • Kemampuan untuk mendeteksi fitur CSS mana yang dapat digunakan pada browser saat ini.
  • Menggunakan pembaruan sintaks yang akan datang, belum dirilis, tetapi sangat kuat untuk CSS.
  • Kisi responsif yang sefleksibel mungkin.

Saya pikir saya tidak akan melakukan keadilan kepada PostCSS jika saya tidak memasukkan contoh grid. Jadi di sini kita mulai. Sesuatu yang sederhana seperti ini:

div {
kolom hilang: 1/3
}

akan dikonversi menjadi sistem CSS full-blown dengan hampir semua kasus tepi diurus:

div {
lebar: calc (99,9% * 1/3 –
(30px – 30px * 1/3));
}
div: nth-child (1n) {
mengapung: kiri;
margin-right: 30px;
jelas: tidak ada;
}
div: last-child {
margin-right: 0;
}
div: nth-child (3n) {
margin-right: 0;
mengapung: benar;
}
div: nth-child (3n +1) {
jelas: keduanya;
}

Karena ini adalah hal yang digerakkan oleh JS, PostCSS tidak mudah diatur, terutama jika Anda seorang perancang dan belum banyak berhubungan dengan modul, bundler, dan dunia npm pada umumnya. Karena itu, potensi PostCSS dalam pekerjaan Anda sangat besar dan tidak boleh diabaikan.

PurgeCSS

Apakah Anda menyukai alur kerja berbasis frontend modern namun frustrasi karena membawa terlalu banyak barang? Jika ya, PurgeCSS adalah teman Anda, setidaknya sejauh yang dipertimbangkan CSS.

Bagi mereka yang mungkin tidak tahu apa masalahnya: inilah jadwal singkatnya. Saat Anda membangun aplikasi satu halaman menggunakan kerangka front-end seperti React, Angular, Vue, dll., Anda melewati apa yang disebut sebagai “proses pembangunan.” Pada dasarnya, Anda mengkode semua CSS, JS, SASS, dll., Dalam file terpisah (mengorganisasikannya sebagai yang menurut Anda paling intuitif), tetapi begitu selesai, Anda memberi tahu bundler untuk “membangun” benda itu. Apa yang dilakukan adalah membaca semua kode sumber yang telah Anda tulis, menerapkan berbagai filter untuk itu (minifikasi, kebingungan / uglifikasi, dll.), Dan memuntahkan output ke dalam file tunggal, biasanya “app.js” untuk semua JavaScript, dan “App.css” untuk semua CSS. File-file ini, bersama dengan “index.html,” kurus adalah semua yang Anda butuhkan untuk menjalankan front-end aplikasi. Kelemahannya adalah karena semuanya dimasukkan dalam file akhir ini, ukurannya sering melampaui apa yang diizinkan untuk waktu respons cepat; misalnya, tidak jarang melihat “app.js” yang lebih dari 500 KB!

PurgeCSS ditambahkan sebagai bagian dari alur kerja build Anda dan mencegah CSS yang tidak digunakan untuk digabungkan ke dalam hasil akhir. Kasing penggunaan yang umum adalah Bootstrap: ini adalah pustaka berukuran sedang dengan beberapa kelas UI untuk berbagai komponen. Jika aplikasi Anda menggunakan, katakanlah, 10% dari kelas Bootstrap, sisanya 90% adalah satu-satunya mengasapi file CSS akhir Anda. Namun berkat PurgeCSS, file CSS yang tidak digunakan tersebut dapat diidentifikasi dan dicegah dari proses build, menghasilkan file CSS final yang jauh lebih kecil (pengurangan ukuran 5-6 kali cukup normal).

Jadi, silakan, “bersihkan” dengan CSS yang tidak perlu PurgeCSS! ��

Penarik

Penarik adalah kerangka kerja CSS, tetapi sangat bertentangan dengan yang saya pikir saya akan memasukkannya di sini di antara alat CSS. Jika Anda membenci CSS sebaris (siapa yang tidak ?!), Tailwind kemungkinan besar akan menyebabkan Anda mundur dengan ngeri saat pertama kali menjumpainya. Mari kita cicipi terlebih dahulu dengan melihat bagaimana Anda bisa membuat kode bentuk khas menggunakan Tailwind CSS:

Nama pengguna

Kata sandi

Silakan pilih kata sandi.

Masuk


Tidak ingat kata sandi?

© 2019 Acme Corp. Semua hak dilindungi undang-undang.

“Apakah ini lelucon atau apa ?! Apa semua kelas kecil yang menjengkelkan itu? Setelah diperiksa lebih dekat, mengapa saya mengatur margin, padding, dan warna langsung bersama dengan HTML? Apakah ini 2019 atau apa? “

Pikiran seperti ini diharapkan. Saya tahu karena saya merasakan hal yang sama dan segera menutup tutupnya di Tailwind. Hanya sampai kemudian saya menemukan podcast di mana tamu telah membangun kembali sebuah situs web trendi yang berukuran sedang di Tailwind, saya mulai memperhatikan..

Sebelum kita melangkah lebih jauh, pertimbangkan pertanyaan-pertanyaan ini:

  • Apakah Anda bosan menghafal kelas kerangka standar dan fungsinya sehingga Anda dapat menyesuaikan desain sesuai keinginan Anda? Contoh yang baik adalah mengubah tampilan dan perilaku bilah navigasi Bootstrap.
  • Menurut Anda apakah kerangka kerja populer seperti Bootstrap berlebihan dan mencoba melakukan lebih dari yang seharusnya?
  • Apakah Anda menemukan diri Anda mencampur kerangka kerja karena Anda menginginkan yang terbaik dari semua dunia?
  • Apakah Anda ingin memiliki kontrol lebih besar atas desain Anda dan belum menemukan pengalaman CSS vanilla yang luar biasa?

Jika jawaban untuk semua ini adalah “ya,” Anda sangat membutuhkan Tailwind. Sekarang mari kita lihat apa itu Tailwind dan apa fungsinya.

Tailwind adalah apa yang disebut CSS utilitas-pertama, yang berbeda dari apa yang kita lakukan dalam alur kerja sehari-hari: CSS semantik. Perbedaan antara CSS semantik dan CSS utilitas adalah bahwa yang pertama mencoba mengelompokkan elemen gaya dengan nama bagian visual yang muncul pada halaman. Jadi, jika Anda memiliki menu navigasi, kartu, korsel, dll., Pada halaman, cara semantik melakukan sesuatu adalah dengan mengelompokkan aturan gaya CSS di bawah kelas seperti .nav, .card, .carousel, dll., Yang sub-bagiannya diberi label yang sesuai (misalnya, .card-body, .card-footer, dll.). Sejauh ini, ini adalah pendekatan yang paling umum untuk CSS, dan kita semua akrab dengannya melalui kerangka kerja seperti Bootstrap, Foundation, Bulma, Kit UI, dll..

Di sisi lain, “utilitas” gaya penulisan kelas nama CSS tepat sesuai dengan fungsinya: kelas yang mengontrol margin untuk sisi atas dan bawah akan dinamai .margin-y-medium dan dapat diterapkan di mana saja dalam HTML markup di mana margin ini dibutuhkan. Meskipun ini sedikit memperkenalkan nama kelas creep (lihat sekilas kode yang saya bagikan sebelumnya atau di tangkapan layar – begitu banyak kelas!), Maksud CSS sangat jelas: Anda tidak perlu melompat bolak-balik di antara dokumentasi, CSS Anda dan HTML Anda untuk mencari tahu nama yang tepat dan efek yang tepat.

Ini adalah cara kerja yang sangat membebaskan, tetapi ada juga yang menarik: Anda harus memiliki dasar-dasar CSS Anda dengan baik (termasuk konsep modern seperti Flexbox). Itu karena Tailwind tidak menawarkan gaya out-of-the-box untuk setiap komponen di halaman Anda, dan terserah Anda untuk membangun gaya dari blok bangunan yang diberikan. Masalah lain adalah pengaturan: Tailwind memungkinkan Anda untuk mengelompokkan beberapa kelas CSS bersama menjadi apa yang disebut komponen, tetapi itu dilakukan melalui JavaScript dan membutuhkan pemuat modul dan bundler seperti Webpack.

Semua yang dikatakan dan dilakukan, Tailwind adalah cara baru untuk melakukan penataan gaya, dan akan menarik bagi mereka yang mendambakan kesederhanaan dan kontrol yang lebih besar.

Saas

Meskipun Kelancangan sudah ada sejak lama, saya sudah memasukkannya di sini karena pengembang masih tidak tahu seberapa berguna itu. Stylistically Awesome Style Sheets (atau SASS) adalah superset dari CSS yang dikembangkan untuk menjinakkan kegilaan yang merayap ke dalam proyek begitu CSS tumbuh melampaui beberapa baris.

Bayangkan ini: Anda telah banyak menulis CSS untuk proyek Anda. Anda menggunakan beberapa warna, telah menemukan beberapa margin yang masuk akal untuk berbagai div, gaya font, dan sebagainya. Kecuali bahwa sekarang Anda menyadari itu tidak semua bertahan dengan baik. Mungkin Anda ingin mencoba margin yang lebih besar untuk semua bagian, kartu, dan tombol. Nah, sekarang bagaimana? Bahkan gagasan harus mencari-ganti melalui file CSS raksasa Anda sudah cukup untuk memberikan satu sakit kepala. Kita semua telah melakukan itu, dan kita semua tahu betapa rawannya kesalahan itu. Sass memecahkan masalah ini dengan memperkenalkan variabel:

Saat kami menulis HTML, kami menempatkan elemen di dalam elemen lain. Tetapi ketika menulis CSS, kita harus menulis hirarki aturan yang datar, yang membuatnya sulit untuk secara mental “menyesuaikan” CSS ke dalam HTML. Dengan Sass, Anda dapat meniru struktur halaman di dalam file gaya Anda:

Semua ini bahkan tidak mulai menggores permukaan barang yang ditawarkan Sass: desain modular, termasuk file, mixin, warisan. . . daftar berjalan dan terus. Tentu, Anda harus mempelajari alur kerja penyusun Sass dan memasukkannya ke dalam milik Anda, tetapi menurut pendapat saya, beberapa jam yang dihabiskan adalah investasi yang akan membayar Anda berulang kali!

CSS Linters

Karena perancang web (dan pengembang UI – meskipun saya ingin tahu bagaimana kedua istilah ini berbeda ��) menggunakan editor teks sederhana – atau seperti yang terjadi saat ini, kode langsung dari alat dev Chrome – mereka jarang mendapat kabar tentang atau mendapat manfaat dari linter. Di sisi lain, pemrogram yang menggunakan editor teks yang baik seperti VS Code, Sublime Text, atau IDE lainnya mengenal alat ini dengan sangat baik karena merupakan sifat kedua bagi mereka. Pokoknya, intinya adalah, jika Anda salah satu dari pengembang CSS yang tenggelam dalam CSS yang berantakan, Anda bisa mendapat manfaat dari linter.

Sederhananya, linter adalah program yang memeriksa kode Anda untuk kesalahan dan ketidakkonsistenan. Itu melakukan ini dengan bantuan seperangkat aturan yang dimilikinya untuk mencari tahu apa yang salah dan apa yang tidak konsisten. Linter yang baik berintegrasi dengan IDE dan editor kode dan dapat dikonfigurasi untuk dijalankan setiap kali Anda menyimpan file sumber. Mereka juga membantu Anda dengan pratinjau warna, kesalahan, dan penyelesaian otomatis saat Anda membuat file CSS Anda:

Tapi inilah bagian terbaiknya – jika Anda mengikuti style dan format CSS tertentu, Anda dapat menyesuaikannya dengan kepuasan Anda. Ini memastikan bahwa CSS dalam suatu proyek mengikuti panduan gaya yang sama (linter juga dapat dikonfigurasi untuk memformat file secara otomatis setiap menyimpan / mengkomit kode sumber). Jadi, apakah Anda bekerja dalam tim atau sendirian, linter selalu merupakan tambahan yang bagus untuk alur kerja proyek Anda.

Kesimpulan

Saya yakin sekarang, Anda yakin bahwa pengembangan CSS modern jauh dari pendekatan menggembalakan kucing masa lalu. ��

Yang mengatakan, saya akan mengakui sesuatu lagi, bahkan jika saya terdengar seperti rekaman rusak: beberapa alat yang saya bahas dalam artikel ini tidak mudah untuk diatur, terutama jika Anda tidak ramah dengan ekosistem npm . Tetapi sebelum Anda merasa jijik dan memalingkan muka, ceritakan ini: mudah saja CSS ketika Anda pertama kali belajar Itu? Apakah mudah untuk belajar memusatkan div, untuk menguasai perubahan suasana hati mengapung, dan sebagainya? Demikian pula, alat yang saya jelaskan di sini memiliki beberapa kurva pembelajaran, tetapi mereka sangat berharga.

Jujur, begitu Anda mulai mengalami hasilnya, Anda akan menendang diri sendiri karena tidak melakukan ini lebih cepat. Dan jangan mengecilkan pentingnya CSS yang modular, ramping, dan terorganisir dengan baik!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map