Apa Kerangka CSS terbaik dan apakah itu sepadan dengan usahanya?

Membaca di forum lain saya telah menemukan dunia CSS Frameworks. Yang saya lihat secara khusus adalah BluePrint . Saya bertanya-tanya apakah ada orang lain yang telah menemukan kerangka kerja CSS, menyarankan mana yang terbaik dan apakah itu sepadan dengan usaha?

'Kerangka kerja' CSS benar-benar kehilangan intinya.

CSS tidak seperti JavaScript, di mana Anda dapat menyertakan pustaka / kerangka kerja dasar dan kemudian memanggil fungsi dan objek darinya untuk melakukan pekerjaan tingkat yang lebih tinggi. Semua kerangka kerja CSS dapat memberi Anda aturan deklaratif: beberapa hal default browser-rule-reset, beberapa gaya kelas yang harus dipaksa untuk membuat halaman Anda, dan aturan tata letak menggunakan 'float' dan 'clear'. Anda dapat menulisnya sendiri dalam beberapa baris CSS daripada menarik ratusan aturan kerangka kerja.

Hal-hal 'tata letak kisi' khususnya kembali ke masa lalu yang buruk dalam mencampur presentasi Anda ke dalam markup Anda. 'div class = "span-24"' tidak lebih baik dari tabel, Anda harus kembali ke sana dan mengubah markup untuk memengaruhi tata letak. Dan semua kerangka kerja yang pernah saya lihat berbasis di sekitar kotak mengambang piksel tetap, sehingga tidak mungkin membuat tata letak cair yang dapat diakses pada berbagai ukuran jendela.

Ini penulisan mundur, hanya digunakan untuk seseorang yang terlalu takut untuk menulis aturan CSS.

Jadi, belum ada yang menanggapi pertanyaan ini (meskipun saya telah melihat beberapa suara positif), jadi Saya akan setidaknya mencoba untuk menjawab pertanyaan kedua dalam prompt ini.

Kerangka kerja CSS sangat bagus; seperti kerangka kerja lainnya, kerangka kerja ini mengurangi waktu pengembangan dan memungkinkan Anda segera bekerja pada desain dan CSS khusus situs. Mereka memikirkan keputusan sulit jadi Anda tidak perlu melakukannya.

Sayangnya, ada dua kelemahan menggunakan kerangka kerja (secara umum):

1. Kerangka kerja menentukan keseluruhan struktur dan mekanisme kode CSS Anda. Sekarang, saya tidak berbicara tentang pengaturan ulang CSS (ini berguna dalam hak mereka sendiri, tetapi mereka bukan kerangka kerja yang sebenarnya); Saya berbicara tentang kerangka kerja yang jujur ​​dan baik, yang telah membuat keputusan tentang tag semantik apa yang akan Anda gunakan dalam dokumen Anda, dll. Dengan demikian, Anda dibuat bergantung pada kerangka kerja, dan ketika ada bug dalam kerangka kerja, Anda biasanya harus memperbaikinya sendiri.

2. Kerangka kerja bukanlah alasan untuk tidak menyadari masalah CSS lintas-browser / lanjutan. Anda akan selalu menemukannya, sama seperti Anda bekerja dengan kerangka kerja PHP atau JavaScript. Dan Anda perlu tahu bagaimana menghadapinya. Ada pepatah umum bahwa Anda harus menulis kerangka kerja Anda sendiri terlebih dahulu, sebelum menggunakan kerangka orang lain.

Melihat sekilas Blueprint, saya tidak akan menyebutnya sebagai kerangka kerja; mungkin reset dengan beberapa barang tambahan di atasnya.

Saya telah melihat BluePrint dan beberapa lainnya dan satu-satunya 'kerangka kerja' CSS yang saya rekomendasikan adalah YUI Grids

Kelebihan:

• Ditulis oleh salah satu insinyur frontend terbaik di luar sana (IMO) (Nate Koechley)
• Sangat kecil. 4KB
• Sangat fleksibel (1000 tata letak berbeda)
• Mendukung tata letak fluid-width (100%) serta tata letak lebar tetap preset pada 750px, 950px, dan 974px, dan kemampuan untuk menyesuaikan dengan mudah ke nomor apa pun.
• Mendukung penyesuaian lebar yang mudah untuk tata letak lebar tetap.
• Kolom template tidak bergantung pada urutan sumber, sehingga Anda dapat menempatkan konten terpenting Anda terlebih dahulu di lapisan markup untuk meningkatkan aksesibilitas dan pengoptimalan mesin telusur (SEO).
• Footer yang dapat dibersihkan sendiri. Tidak peduli kolom mana yang lebih panjang, footer tetap berada di bawah.
• Tata letak kurang dari 100% secara otomatis berada di tengah.
• Nama kelas semantik agak (lebih baik dari atas, kiri, kanan, dll)

Kekurangan:

• Banyak markup ekstra dibandingkan dengan HTML dan CSS yang ditulis tangan
• Membutuhkan beberapa pembelajaran untuk mengetahui bagaimana melakukan tata letak yang kompleks

Seperti yang telah diposting orang lain, tidak ada 'kerangka' nyata untuk CSS. Reset stylesheet juga banyak membantu tata letak. Saya biasanya tetap menggunakan lembar gaya reset dan pergi dari sana. Tetapi jika Anda tidak memiliki banyak pengalaman CSS, YUI Grids dapat menghemat waktu Anda.

Kompas adalah kerangka kerja CSS sebenarnya dalam arti memberi Anda tidak hanya templat (baik YUI dan cetak biru), tetapi juga konstruksi yang dapat digunakan kembali dan deklarasi tingkat yang lebih tinggi sambil tetap memberi Anda sintaks CSS yang sudah dikenal.

Luangkan waktu untuk mempelajari dan memahami (benar-benar mengerti!) Beberapa kerangka css seperti BluePrint dan YUI, dan css reset seperti Eric Meyer. Kemudian, luangkan waktu untuk menyusun pengaturan ulang dan / atau kerangka kerja Anda sendiri berdasarkan metode kerja Anda dan jenis situs yang Anda buat.

Secara pribadi, saya menggunakan sebagian besar reset Eric Meyer dengan beberapa kelas dan reset saya sendiri, ditambah beberapa ide dari BluePrint dan YUI.

Saya baru-baru ini menyaksikan Eric Meyer memberikan presentasi tentang CSS Frameworks di mana dia mengajukan pertanyaan: "jadi mana yang tepat untuk saya?" Dia kemudian menjawab pertanyaan tersebut dengan menunjukkan slide kosong. Maksudnya adalah, bahwa pasti ada beberapa konsep berguna yang dibangun di sebagian besar penyetelan ulang dan kerangka kerja, tetapi yang paling cocok untuk Anda adalah yang Anda tulis untuk diri Anda sendiri (itu sepadan dengan usaha).

Mengapa menggunakan 'framework' css?

• Jika Anda ditekan untuk waktu.

• Jika Anda tidak tahu css, dan tidak tahu seseorang yang bisa menuliskannya untuk Anda.

• Jika Anda tidak terlalu menghargai standar, dll.

Saya tahu programmer yang sangat senang menggunakan cetak biru atau 960, karena memungkinkan mereka menyusun tata letak sendiri, tanpa beralih ke pengembang front-end. Ini sangat ideal untuk proyek pribadi, atau startup dengan sumber daya terbatas.

Jika Anda sudah memiliki pengetahuan yang layak tentang CSS, maka mungkin Anda sudah memiliki perpustakaan tata letak stok yang layak, jadi Anda jelas tidak memerlukan kerangka kerja.

Namun, jika Anda seorang pemula dan hanya perlu menyiapkan dan menjalankan sesuatu, Anda dapat beralih ke kerangka kerja, karena itu membuat tata letak dasar lebih sederhana, dan menangani kompatibilitas browser juga.

Karena itu, banyak kerangka kerja di luar kotak yang menggunakan beberapa nama kelas yang mengerikan dll. Saya tahu beberapa situs web yang telah menggunakan kerangka kerja sebagai titik awal dan kemudian menyesuaikannya dengan kelas dan tag id mereka sendiri. Tapi jelas ada sedikit pekerjaan yang terlibat dalam penulisan ulang itu juga. Menggunakan sesuatu seperti Kompas, seperti yang disebutkan di atas, memang membantu untuk menyiasatinya.

Jadi, kerangka kerja CSS - mereka dapat menghemat waktu Anda, dengan biaya semantik. Mereka mungkin juga merusak pengetahuan Anda tentang CSS, tetapi itu lebih tergantung pada seberapa banyak Anda berinvestasi dalam mempelajari subjek secara umum. Apakah Anda memanfaatkannya terserah Anda.

Anda harus bertanya pada diri sendiri seberapa efektif kerangka kerja yang tersedia dalam memecahkan masalah Anda. Apakah mereka memenuhi kebutuhan Anda?

Dengan menggunakan kerangka kerja, Anda dapat menetapkan beberapa aturan atau detail pada tingkat piksel dan mencurahkan sisa waktu Anda untuk mengimplementasikan dan memproduksi. Ini adalah peningkatan produktivitas yang sangat besar. Jika Anda menemukan diri Anda menghabiskan waktu untuk menyesuaikan hal-hal dengan beberapa piksel di akhir proyek (mengelola desain mikro), itu adalah tanda bahwa kerangka kerja dapat berguna.

Tip # 17 di The Pragmatic Programmer mengatakan: "Program dekat dengan domain masalah". Menggunakan lapisan abstraksi dapat membuat Anda lebih dekat untuk memecahkan masalah tata letak yang sebenarnya. Misalnya: Anda mungkin dapat berkonsentrasi untuk meningkatkan pengalaman pengguna dengan waktu ekstra yang Anda miliki daripada melakukan sedikit penyesuaian piksel.

Ini tidak berarti Anda harus mengorbankan kualitas demi kuantitas. Ini tentang efisiensi.

Pada proyek baru-baru ini, saya membuat kerangka kerja saya sendiri karena kami memiliki sumber daya yang sangat terbatas dan kerangka kerja populer tidak melakukan apa yang saya inginkan. Kemudian, saya menyiapkan PSD tim desain agar sesuai dengan grid yang sama yang saya terapkan.

Kerangka kerja tidak harus berupa implementasi CSS tertentu. Tidak harus sesuatu yang membengkak yang Anda unduh dari interweb atau sesuatu yang menerapkan ide-ide usang. Itu hanya teknik untuk menyelesaikan pekerjaan. Saya tidak akan terkejut jika beberapa pembuat kode sudah memiliki kerangka kerja mereka sendiri dan bahkan tidak mengetahuinya. Faktanya, jika Anda menganggap DOM sebagai sekumpulan elemen default yang Anda kembangkan dengan CSS, maka itu adalah kerangka kerja menurut definisi.

Sebenarnya saya menghabiskan sebagian besar dari 24 jam terakhir untuk menyelidiki ini sendiri, heh. Kesimpulan saya adalah bahwa reset yang bagus (saya menggunakan YUI Reset ), dan mungkin sesuatu yang lain untuk mengatur hal-hal dasar ( font YUI bermanfaat dalam kasus saya; mungkin "barang ekstra" dari BluePrint akan menjadi milik Anda) adalah ide yang bagus. Tapi, "kerangka kerja" --- yang umumnya mirip dengan kisi YUI --- terlalu membatasi, memaksa Anda untuk menggunakan nama kelas, id, dll. Dan jarang menyesuaikan dengan situs Anda seperti CSS buatan tangan.

Singkatnya: pengaturan ulang tampaknya cukup bagus; ada baiknya untuk menghilangkan semua variasi misalnya margin-vs-padding untuk daftar, atau spasi paragraf, atau apa pun. Tapi sejauh itu yang saya mau.

Saya belum pernah menggunakannya ya, tapi menurut saya emastik mungkin merupakan alternatif yang layak untuk dicoba. itu mirip dengan cetak biru dalam cakupan, tetapi juga mendukung tata letak elastis (karena itulah namanya) dan Anda dapat menentukan nilai dalam px, em atau%, dan bahkan mencampurnya.

Kompas menurut saya luar biasa. Pastikan Anda melihat screencast .

Saya menggunakan 960.gs untuk beberapa situs web dan merasa sangat sederhana dan mudah serta sepadan dengan usaha. Menghemat banyak pekerjaan tata letak. Pastikan untuk memeriksa generator CSS khusus yang memiliki lebar tetap 960 piksel.

Saya rasa presentasi video oleh CEO Site Point Kevin Yank ini akan menjawab pertanyaan Anda. Saya sangat merekomendasikan untuk menontonnya.

Kompas memungkinkan Anda mengganti nama kelas dan id kerangka kerja Anda dengan nama semantik Anda sendiri, jadi Anda mungkin ingin memeriksanya. Ini juga menyediakan akses ke hal-hal yang tidak Anda dapatkan dengan CSS biasa-biasa saja seperti mixin.

Saya terkejut dengan apa yang disebut "ahli CSS" yang mengkritik alat ini tanpa benar-benar menggali dan menggunakannya. Apakah itu penting? Tidak. Jika Anda menyukai kerangka kerja Anda sendiri (Anda memiliki kerangka sendiri, bukan? Kerangka CSS hanyalah pustaka yang didefinisikan dengan cermat - setiap orang harus menggunakannya) maka dengan segala cara, teruslah menggunakannya. Tidak ada yang memaksa Anda untuk menggunakan kerangka kerja lain dan saya tidak melihat orang-orang yang menggunakan kerangka kerja memberi tahu pengguna CSS bahwa mereka "salah melakukannya".

Kerangka kritik dari sudut pandang seperti itu hanya mengungkapkan ketidakamanan serta ketidaktahuan. Misalnya, anggapan yang menggelikan bahwa seseorang akan menggunakan alat seperti Compass tanpa mengetahui CSS. Anda menyadari, bukan, bahwa kerangka kerja umumnya tidak menulis semua CSS Anda untuk Anda? Anda masih dapat keluar dan menulis CSS Anda sendiri dalam konteks sebagian besar kerangka kerja. Faktanya, jika Anda tidak tahu CSS Anda mungkin akan cepat frustrasi.

Bagi saya sendiri, saya menghargai kerangka kerja karena sudah didokumentasikan, diuji oleh ratusan pengguna lain, dan saya dapat menerapkan kelas dan id saya sendiri melalui Kompas. Jika saya membutuhkan sesuatu yang kerangka kerjanya tidak cocok, maka saya akan membuat kode sendiri.

Matt Raible dari AppFuse yang terkenal mengadakan kontes CSS Framework beberapa waktu lalu untuk mengembangkan CSS Frameworks untuk AppFuse. Hasilnya dipublikasikan di sini . Ada beberapa variasi dan saya telah menggunakannya sendiri karena saya menggunakan AppFuse dan menurut saya sangat bagus.

Saya harus menambahkan bahwa Kerangka CSS ini berfungsi dengan baik karena digunakan dalam aplikasi bertema. Artinya, jika Anda tetap berpegang pada aturan, beralih dari satu ke berikutnya semudah mengubah satu nilai dalam file properti.

Saya telah menggunakan BluePrint dengan banyak keberhasilan di sebuah situs (saya dapat menyebutkan situs tersebut di sini tetapi saya yakin kiriman tersebut akan ditandai sebagai spam!). Saya tidak yakin apakah saya akan menggunakannya di masa mendatang karena salah satu ide CSS yang saya pikir adalah tidak memiliki logika tata letak yang dikodekan secara keras. Anda tidak boleh memiliki elemen css yang disebut span-24 dan span-12 untuk menentukan tata letak, tetapi sesuatu seperti searchBox dan mainContent. Setidaknya begitulah cara saya melihatnya.

Tautan bagus yang saya temukan: 12 Kerangka Kerja CSS Teratas dan Cara Memahami Mereka

Berikut adalah posting blog saya tentang CSS Frameworks Kapan menggunakan kerangka CSS?

Satu-satunya cara yang saya tahu tentang menggunakan kerangka CSS dan mempertahankan markup semantik adalah dengan menggunakan abstraksi tingkat yang lebih tinggi. Saat ini, Kompas adalah satu-satunya yang saya sadari cukup dewasa untuk digunakan, tetapi Nicole Sullivan tampaknya melakukan beberapa hal menarik dengan proyek "Object-Oriented CSS" -nya.

Menurut saya, penggunaan Sass mixin yang cerdik oleh Kompas menjadi brilian, dan langkah besar menuju Holy Grail dari markup semantik yang dapat dipertahankan. Saya tidak berpikir saya ingin menggunakan kerangka kerja seperti Blueprint atau YUI tanpa abstraksi seperti Kompas untuk menjaga kelas presentasi keluar dari markup.

BTW, ada kerangka CSS yang tampak bagus yang disebut Elastis yang terlihat cukup bagus sehingga saya mempertimbangkan untuk menambahkannya ke Kompas.

Saya percaya CSS adalah tentang kesederhanaan. Tujuannya adalah memiliki satu atau dua tempat untuk diperiksa saat Anda mereferensikan antara HTML dan stylesheet Anda. Menambahkan lebih banyak baris, dan terutama baris yang tidak Anda tulis dan mungkin tidak begitu Anda kenal, akan secara eksponensial meningkatkan kompleksitas sehingga menyebabkan volatilitas kode CSS.

Saya akan menyarankan layout Anda saat Anda menulisnya dan mengembangkan sistem template generik dari situ. Sementara saya suka membuat CSS lebih modular, seringkali dan tergantung pada desainnya, CSS Anda mungkin sangat spesifik dan tidak modular sama sekali.

Saya telah menggunakan Blueprint di beberapa situs satu kali dan itu pasti menghemat waktu, terutama dalam pengujian lintas-browser.

Ini pasti menyebalkan menambahkan kode presentasi ke markup Anda, meskipun sisi baiknya itu dapat dibaca. Meskipun saya menyukai konsep "Anda dapat mendesain ulang tanpa menyentuh markup", jika Anda membuat situs yang sebenarnya tidak akan terjadi dan Anda hanya perlu melakukannya kemarin, Blueprint adalah sesuatu yang harus dilihat.

Ada juga pengorbanan dalam jenis tata letak apa yang layak dibuat. Jika Anda membuat wireframe situs dari awal dengan grid yang ketat, akan lebih mudah untuk mentransposisi ke dalam kerangka dengan sedikit keributan.

Saya telah menggunakan BluePrint dan YUI tetapi saya selalu merasa frustrasi dengan beberapa nama yang mereka berikan pada id dan kelas mereka.

Untuk masing-masing milik mereka sendiri, tetapi saya lebih suka melakukan sesuatu dari awal, tetapi setelah beberapa saat Anda mengembangkan proses di mana Anda akan menggunakan pekerjaan sebelumnya dan menerapkannya ke proyek baru dan hanya membuat beberapa penyesuaian untuk membuat situs web terlihat seperti yang Anda inginkan. suka.

Pastikan untuk menggunakan konvensi penamaan yang baik, untuk berjaga-jaga jika ada orang lain yang datang untuk mengedit css, maka mereka akan memiliki ide bagus untuk apa masing-masing nama gaya tersebut.

Craig,

Kompas adalah apa yang Anda cari: ini memungkinkan Anda untuk mengganti nama kelas Blueprint CSS Anda seperti "span-24" dengan nama Anda sendiri. Ini juga memperluas fungsionalitas CSS dengan variabel dan mixin. Sungguh, mereka yang menilai kerangka kerja sebelum waktunya tanpa memeriksa Kompas "melewatkan intinya". Ini seperti orang-orang yang memberi tahu kami bertahun-tahun yang lalu bahwa kami kehilangan intinya dengan menggunakan CSS alih-alih tabel HTML untuk tata letak kami.

-Matt

lihat http://www.ez-css.org/ . salah satu framework css termudah dan teringan untuk dikerjakan. :)

Lihat demo ini: http://www.richstyle.org/demo-web.php Kerangka kerja ini didasarkan pada gagasan bahwa "tag HTML harus cukup". Saya pikir kegunaan kembali adalah faktor terpenting untuk memilih komponen perangkat lunak, termasuk kerangka kerja web. Untuk pengembang kerangka kerja web, semakin Anda berkomitmen pada standar, semakin Anda menjamin kegunaan kembali.