Rangka kerja CSS yang didorong oleh komponen

mata teras

Komponen web menjadi semakin popular, dan terdapat juga permintaan yang semakin meningkat untuk kerangka CSS yang dapat mengendalikan jenis pembangunan ini. Rangka kerja CSS tradisional seperti bootstrap atau yayasan boleh menyekat pemaju daripada menggunakan komponen web kerana gaya dan kod terbina dalamnya yang luas.
rangka kerja CSS yang didorong oleh komponen seperti makmal corak, saman CSS, InuitCSS, dan CSS tulen direka sebagai titik permulaan untuk reka bentuk dan menyediakan rangka kerja untuk membangunkan komponen web tanpa mengenakan sekatan atau gaya yang tidak perlu. Mereka membolehkan pemaju memberi tumpuan kepada gaya dan kod mereka sendiri, yang meningkatkan kebolehgunaan, konsistensi, dan kerjasama.
Walaupun rangka kerja CSS yang didorong oleh komponen memberikan banyak faedah, mereka boleh meningkatkan kerumitan projek dan memerlukan pemahaman yang baik tentang tatabahasa dan konvensyen rangka kerja. Mereka kebanyakannya direka untuk teknologi berasaskan JavaScript, tetapi boleh digunakan untuk mana-mana bahasa pengaturcaraan yang menyokong pengaturcaraan modular.

"Pada tahun 2015, semua orang akan melepaskan kerangka itu."

Saya tidak pasti. Saya hanya mahu menarik perhatian anda. Tidak kira berapa banyak yang anda bergurau, adakah anda melihat perubahan halus dalam bidang depan, iaitu, semua orang secara beransur-ansur menyerahkan kerangka itu? Sebagai contoh, kerangka mesh Sass Susy menyerahkan pergantungannya terhadap kompas, dan pemaju telah digalakkan untuk memikirkan sama ada jQuery diperlukan.

Komponen web sangat popular pada hari -hari ini. Ketika kami memasuki dunia di mana komponen menjadi warga kelas pertama aplikasi web, kami memerlukan rangka kerja yang dapat mengendalikan jenis pembangunan baru ini.

Batasan bootstrap dan asas

Jika anda seorang pemaju front-end, anda mungkin tahu bootstrap atau asas dengan baik. Rangka kerja CSS yang popular seperti ini mungkin mengehadkan kita apabila membangun dengan komponen web. Bukan kerana mereka tidak baik. Mereka hanya datang dengan terlalu banyak gaya terbina dalam. Memandangkan fungsi Shadow Dom, ini mungkin bukan apa yang anda mahukan. Rangka kerja ini dikenali kerana cuba memenuhi keperluan semua. Sebaliknya, rangka kerja CSS yang didorong oleh komponen berfungsi sebagai titik permulaan untuk reka bentuk dan menyediakan rangka kerja untuk membangunkan komponen web. Itu semua matlamat mereka.

Bootstrap telah merevolusikan cara kita menulis kod front-end sedikit sebanyak. Ia memberikan kami komponen dan struktur UI yang sangat baik untuk gaya gaya yang boleh diperpanjang dan boleh dipelihara. Ia sesuai untuk pasukan besar untuk bekerjasama dengan format CSS yang diterima. Masalahnya, ia mengandungi banyak kod. Ia sempurna jika anda tidak mahu membina apa -apa dari awal. Walau bagaimanapun, menyesuaikannya tidak berkesan. Bolehkah anda menyesuaikannya? pasti. Adakah mudah? Ia dipersoalkan.

"Anda bekerja di bawah halangan rangka kerja sekarang, bukan kerana rangka kerja." - Harry Roberts

Yayasan berkesan menyelesaikan masalah ini. Ia direka untuk disesuaikan dari awal. Malah, pasukan itu bertekad untuk membuat tema lalai yang sangat asas untuk memastikan semua laman web yang dibina dengan itu kelihatan berbeza pada akhirnya. Tetapi beberapa komponen asas ditambah dengan penanda, yang membatasi penanda yang boleh anda gunakan, jadi ia lebih daripada sekadar kerangka CSS. Mereka aktif bekerja untuk memperbaiki ini.

toolkit dan bingkai ui

Harry Roberts memberikan persembahan awal tahun ini (lihat tayangan slaid) membincangkan nuansa antara toolkit UI dan kerangka CSS. Dalam ucapan ini, beliau berkata bahawa rangka kerja CSS tidak akan mendapat jalan anda. Ia tidak mengandungi gaya apa pun. Ia tidak mempunyai sekatan pada tag, struktur HTML, atau kelas.

Sebaliknya, Toolkit UI adalah produk lengkap yang menawarkan pakej lengkap dari kotak: reka bentuk, struktur, piawaian, corak dan plugin JavaScript semuanya termasuk dalam pakej yang kemas. Alat ini digunakan untuk prototaip cepat dan permulaan yang cepat. Kebanyakan masa, jika anda mahu mereka kelihatan berbeza dari cara mereka dibina, anda akhirnya menimpa peraturan dan mengelakkan definisi rangka kerja.

Dari perspektif ini, seperti Addy Osmani baru -baru ini dibincangkan, satu halaman dalam projek sampel yang dibina dengan bootstrap mungkin mempunyai sehingga 91% CSS yang tidak digunakan.

Jadi persoalannya ialah: Rangka kerja mana yang akan mengelakkan jalan anda dan membiarkan anda menulis kod anda dan bukannya menulis kod anda untuk anda?

1. Makmal corak

   Makmal corak dicipta oleh Brad Frost dan Dave Olsen dan berdasarkan falsafah reka bentuk atom. Ini adalah pendekatan yang fleksibel untuk merancang laman web dari asas -asas dan kemudian membinanya langkah demi langkah. Ia bukan rangka kerja, ia adalah cara untuk membina laman web dan aplikasi.

   Makmal corak menggalakkan laman web reka bentuk yang memberi tumpuan kepada komponen. Mulakan dengan tag asas dan membina komponen yang lebih kompleks langkah demi langkah. Rangka kerja ini tidak mempunyai andaian mengenai gaya. Ia tidak akan menghalang anda dan membolehkan anda mengendalikan CSS anda.

   Ia juga menyediakan panduan struktur kreatif CSS dan satu set alat yang menyumbang kepada keseluruhan proses kreatif. Sebagai contoh, alat yang secara rawak mengubah saiz skrin untuk melihat bagaimana reka bentuk anda berfungsi pada saiz skrin yang berbeza, dan alat anotasi untuk kerjasama cepat.

   tetapi bahagian yang terbaik adalah bahawa ia adalah preprocessor-free. Tidak seperti penyelesaian lain, ia tidak mengatakan apa yang digunakan oleh preprocessor; Ia juga dilengkapi dengan gaya sifar dan membolehkan anda membina panduan gaya dan bukannya mengenakan panduan gaya kepada anda.

2. Suit CSS

   saman Nicolas Gallagher CSS, dengan definisi, adalah kaedah pembangunan UI berasaskan komponen. Ia menyediakan satu set garis panduan yang membolehkan pelaksanaan dan gabungan unit bebas yang ditambah dengan longgar.

   Komponen adalah teras rangka kerja ini. Ia direka untuk membangunkan sistem front-end di mana komponen boleh dikomposisikan dan boleh dikonfigurasikan. Ia menyediakan panduan untuk membina komponen yang terkandung dengan baik dan boleh diubah melalui antara muka.

   Suit CSS adalah rangka kerja matang yang dibina di atas asas yang kukuh. Dokumentasi adalah tempat yang bagus untuk mengetahui lebih lanjut mengenainya, tetapi juga mengetahui lebih lanjut mengenai prinsip-prinsip front-end.

   Ia juga dilengkapi dengan satu set pakej yang boleh ditambah ke aliran kerja. Ia berfungsi dengan baik dengan NPM (Pengurus Pakej Node) dan termasuk keupayaan awalan automatik, ujian enkapsulasi, dan preprocessor yang disesuaikan dan berskala. Cubalah, atau duduk dan baca beberapa prinsip yang berdasarkan, yang dapat memberi anda gambaran yang besar walaupun anda memutuskan untuk tidak menggunakannya.

3. inuitcss

   Inuit CSS bukan toolkit UI. Ia tidak mengenakan sebarang reka bentuk, dan tidak mengandungi beribu -ribu komponen atau baris kod CSS. Ia adalah rangka kerja dengan skalabilitas dalam fikiran, yang disediakan sebagai pakej kecil yang anda boleh skala seperti yang diperlukan.

   "Inuitcss menyediakan infrastruktur yang kukuh di mana anda boleh membina laman web atau aplikasi saiz atau gaya."

   Sekali lagi, aspek yang paling penting dalam Inuitcss adalah dengan cepat dapat mengelakkan jalan anda. Ia direka untuk menjadi bebas gaya dan membentuk asas yang baik di mana anda boleh membina CSS anda.
   Sebagai contoh, penomboran dalam Inuitcss hanya mengandungi margin dan padding, bukan komponen yang direka sepenuhnya. Ia membolehkan anda menentukan gaya anda sendiri tanpa perlu menyesuaikan rangka kerja, atau lebih buruk, mengatasinya.
   Inuitcss sedang menjalani pembaikan dan versi seterusnya modul pra-alpha tersedia.
   aspek lain dari apa yang saya suka tentang Inuitcss adalah bahawa ia membolehkan anda untuk komponen ruang nama dengan mudah. Sangat mudah untuk meletakkan rangka kerja ke dalam projek yang sedia ada dan mula refactoring kod sedia ada anda.
   Ini adalah kemenangan besar bagi mana -mana rangka kerja yang sedia ada. Sebaliknya, apabila membuka bootstrap atau asas, baris kod pertama yang paling mungkin akan mempengaruhi segala-galanya (saya melihat anda, kotak saiz!). Rangka kerja ini tidak akan berfungsi dengan gaya yang sedia ada, atau ia boleh menjadi kesakitan untuk meletakkan salah satu daripada mereka menjadi projek dan mengharapkan segala -galanya tetap sama. Inuitcss tidak sama, tetapi ia adalah pilihan dan mudah untuk disable.

4. CSS PURE

   Pada pendapat saya, CSS tulen adalah di antara toolkit dan kerangka UI. Ia menyediakan satu set gaya asas, tetapi membolehkan anda mengambil alih dari sana. Dengan reka bentuk, ia direka untuk mengarahkan cara anda dan membolehkan anda membuat CSS tanpa menimpa peraturan yang ada.

   "Pure mempunyai gaya yang minimum dan menggalakkan anda menulis gaya aplikasi di atasnya. Ia direka untuk mengelakkan jalan anda dan membuat gaya utama mudah."

Kesimpulan

Komponen web merevolusi medan depan. Alat kegemaran kami sekarang mungkin bukan yang terbaik apabila menggunakan ciri -ciri baru ini. Mungkin sudah tiba masanya untuk melampaui kerangka kegemaran anda dan mencuba sesuatu yang baru. Saya harap jawatan ini memberi anda pilihan yang cukup untuk dipertimbangkan.

Terdapat keperluan untuk mempunyai kejelasan yang mencukupi untuk memilih alat yang tepat untuk sebarang masalah yang diberikan. Pilih dengan bijak. Seperti biasa, jangan elakkan melakukannya sendiri.

FAQs (FAQs) mengenai kerangka CSS yang didorong komponen

Apakah faedah utama menggunakan kerangka CSS yang didorong oleh komponen?

rangka kerja CSS yang didorong komponen memberikan banyak faedah. Pertama, mereka meningkatkan kebolehgunaan semula. Komponen boleh digunakan semula di bahagian -bahagian yang berlainan projek, mengurangkan jumlah kod yang ditulis dan menjadikan asas kod lebih mudah diurus. Kedua, mereka meningkatkan konsistensi. Dengan menggunakan komponen yang sama di seluruh projek, antara muka pengguna tetap konsisten, dengan itu memberikan pengalaman pengguna yang lebih baik. Ketiga, mereka memudahkan kerjasama. Ahli pasukan yang berbeza boleh mengendalikan komponen yang berbeza secara serentak, mempercepatkan proses pembangunan. Akhirnya, mereka membuat penyelenggaraan lebih mudah. Kerana komponen adalah bebas, perubahan kepada satu komponen tidak menjejaskan orang lain, membuat pembetulan pepijat dan kemas kini kurang rumit.

Bagaimana pembangunan yang didorong oleh komponen berbeza daripada kaedah pembangunan tradisional?

Kaedah pembangunan tradisional biasanya menggunakan pendekatan atas ke bawah, di mana reka bentuk keseluruhan dipecah menjadi bahagian yang lebih kecil. Sebaliknya, pembangunan yang didorong oleh komponen mengamalkan pendekatan bottom-up di mana komponen individu dibangunkan secara bebas dan kemudian digabungkan menjadi reka bentuk yang lengkap. Pendekatan ini membolehkan fleksibiliti dan skalabiliti yang lebih besar kerana komponen boleh ditambah, dikeluarkan, atau diubah suai tanpa menjejaskan keseluruhan sistem.

Bolehkah rangka kerja CSS yang didorong oleh komponen digunakan dengan mana-mana bahasa pengaturcaraan?

rangka kerja CSS yang didorong oleh komponen direka terutamanya untuk teknologi berasaskan JavaScript seperti React, Vue dan Angular. Walau bagaimanapun, prinsip pembangunan yang didorong oleh komponen boleh digunakan untuk mana-mana bahasa pengaturcaraan yang menyokong pengaturcaraan modular. Harus diingat bahawa butiran pelaksanaan tertentu mungkin berbeza -beza bergantung kepada bahasa dan kerangka yang digunakan.

Apakah rangka kerja CSS yang didorong oleh komponen yang popular?

Beberapa rangka kerja CSS yang didorong oleh komponen yang popular termasuk bootstrap, asas, bulma, dan UI semantik. Rangka kerja ini menyediakan komponen pra-direka yang boleh disesuaikan dengan keperluan khusus projek. Mereka juga menyediakan banyak dokumentasi dan sokongan komuniti, menjadikannya sesuai untuk pemula dan pemaju yang berpengalaman.

Bagaimana untuk memulakan pembangunan berasaskan komponen?

Untuk memulakan pembangunan yang didorong oleh komponen, anda perlu memahami prinsip asas pengaturcaraan modular dan seni bina berasaskan komponen. Seterusnya, pilih rangka kerja CSS yang didorong oleh komponen yang sesuai dengan keperluan projek. Dapatkan akrab dengan dokumentasi rangka kerja dan mula cuba membuat dan menggunakan komponen. Tutorial dan kursus dalam talian juga boleh membantu anda mempelajari pengetahuan ini.

Adakah terdapat kelemahan menggunakan kerangka CSS yang didorong oleh komponen?

Walaupun rangka kerja CSS yang didorong komponen menawarkan banyak faedah, mereka juga mempunyai beberapa kelemahan yang berpotensi. Sebagai contoh, mereka boleh meningkatkan kerumitan projek, terutamanya untuk pemula. Mereka juga memerlukan pemahaman yang baik tentang tatabahasa dan konvensyen rangka kerja. Di samping itu, pergantungan yang berlebihan terhadap komponen yang telah direka sebelum ini boleh mengehadkan kreativiti dan membawa kepada reka bentuk yang kelihatan jelas.

Bagaimanakah pembangunan yang didorong oleh komponen meningkatkan kerjasama pasukan?

Pembangunan yang didorong oleh komponen meningkatkan kerjasama pasukan dengan membolehkan ahli pasukan yang berbeza mengendalikan komponen yang berbeza secara serentak. Proses pembangunan selari ini dapat mempercepat garis masa pembangunan. Selain itu, kerana komponennya bebas, perubahan yang dibuat oleh satu pemaju tidak menjejaskan kerja pemaju lain, mengurangkan risiko konflik dan kesilapan.

Bolehkah rangka kerja CSS yang didorong oleh komponen digunakan untuk pembangunan aplikasi mudah alih?

Ya, rangka kerja CSS yang didorong oleh komponen boleh digunakan untuk pembangunan aplikasi mudah alih. Banyak rangka kerja, seperti React Native dan Ionic, menyediakan komponen yang direka khusus untuk antara muka mudah alih. Komponen ini boleh digunakan untuk membuat reka bentuk responsif yang boleh berjalan dengan baik pada pelbagai saiz skrin dan peranti.

Bagaimanakah ujian dan debug sokongan pembangunan yang didorong oleh komponen?

Pembangunan yang didorong oleh komponen menyokong ujian dan penyahpepijatan dengan membenarkan ujian dan debugging bebas bagi setiap komponen. Pendekatan modular ini menjadikannya lebih mudah untuk mengasingkan dan memperbaiki pepijat dan menulis ujian unit untuk komponen individu. Ia juga memudahkan ujian regresi, kerana perubahan kepada satu komponen tidak menjejaskan orang lain.

Bagaimana untuk memastikan kebolehcapaian komponen?

Memastikan kebolehcapaian komponen termasuk amalan terbaik berikut untuk reka bentuk web yang boleh diakses. Ini termasuk penstrukturan menggunakan HTML semantik, menyediakan teks alternatif kepada imej, memastikan kontras warna yang mencukupi, dan menjadikan semua ciri boleh diakses melalui papan kekunci. Banyak rangka kerja CSS yang didorong oleh komponen menyediakan keupayaan akses keluar dari kotak, tetapi masih memerlukan ujian komponen anda menggunakan pelbagai teknologi bantuan untuk memastikan mereka memang boleh diakses.

Atas ialah kandungan terperinci Rangka kerja CSS yang didorong oleh komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!