Jika Anda ingin menjadi ahli CSS, mahir menggunakan selector CSS saja tidak cukup. Hal ini juga terletak pada perencanaan pekerjaan secara keseluruhan, penguasaan alur kerja dan peningkatan pemeliharaan dan efisiensi style sheet. Dalam artikel ini, Jina Bolton memilih 10 teknik penerapan CSS dari 12 desainer papan atas dan merekomendasikannya kepada semua orang.
Akhir-akhir ini, saya mencari cara untuk membuat stylesheet yang lebih menarik. Dengan menggunakan css kita dapat membuat situs web indah yang kita inginkan, dan menulis css adalah suatu kesenangan tersendiri.
Bagaimana cara membuat style sheet yang lebih menarik? Fitur apa saja yang harus dimiliki stylesheet Anda?
Beberapa bulan yang lalu, saya merasa senang menghadiri Konferensi Visi Web 2007 di Portland, Oregon, AS. Untuk acara ini, saya meneliti 12 desainer yang telah memberikan kontribusi luar biasa pada desain dan pengembangan web. Hasil penelitian ini, dikombinasikan dengan pengalaman kerja saya sendiri, membantu saya merangkum serangkaian metode yang baik untuk membuat style sheet yang indah.
01. Jangan biarkan css memiliki terlalu banyak tag
Menautkan atau mengimpor style sheet mungkin terdengar seperti tugas yang membingungkan. Namun saya ingin menekankan mengapa hal ini sangat penting. Saya telah melihat banyak pengembang situs web memiliki dokumen CSS yang rapi dan terorganisir dengan baik, tetapi lambat, karena mereka mungkin tidak dapat memperbarui dengan cepat dalam waktu singkat, atau mereka terlalu malas untuk mengelolanya, style sheet indah yang dibuat sebelumnya hilang. Menjadi sampah.
Bayangkan Anda sedang mengerjakan situs web besar yang perlu mempublikasikan ratusan konten. Karena waktu terbatas, Anda perlu melakukan perubahan atau pembaruan cepat dengan membuat sarang atau mengatur CSS. Tahun demi tahun berlalu, dan kebiasaan ini terus berlanjut, hingga suatu hari Anda diberitahu bahwa situs web akan didesain ulang sepenuhnya (tetapi kontennya akan tetap sama) dan Anda hanya memiliki waktu seminggu untuk membuatnya (termasuk pengujian).
Biasanya, memperbarui style sheet adalah metode yang sangat sederhana. Kecuali jika Anda melakukan perubahan pada area website yang tersebar dalam jangka waktu yang lama. Anda tidak dapat memahami keseluruhan struktur style sheet situs web. Jadi sekarang Anda memiliki dua pilihan: a. Atur semuanya dan desain ulang dalam waktu satu bulan (semoga berhasil); b.
Jangan biarkan pekerjaan Anda menjadi seperti ini. Menautkan atau mengimpor stylesheet Anda bukanlah hal biasa. Buatlah style sheet yang bersih dan rapi dan simpan di sana, dan Anda akan lebih bahagia di tempat kerja.
Catatan: Jangan menambahkan terlalu banyak markup ke stylesheet Anda. Jika Anda mencoba membuat stylesheet baru setiap kali Anda memperbarui atau menambahkan konten baru, Anda pasti mendapat masalah. Terlalu banyak link dan style sheet yang diimpor akan mempersulit penghapusan bug dan membuat style sheet Anda sulit dipelihara. Dapat dimengerti jika situs web yang lebih besar membuat style sheet terpisah untuk bagian yang berbeda. Berhati-hatilah untuk tidak bertindak terlalu ekstrem.
Perlu disebutkan bahwa menambahkan banyak style sheet akan meningkatkan lebih banyak permintaan http, yang juga dapat mempengaruhi pekerjaan selanjutnya. Selain itu, browser Microsoft IE6 memiliki batasan tertentu pada style sheet 32 koneksi. .
02. Semantik bukan sekedar kata industri
Anda tahu, saya harus menyebutkannya, semantik akan menjadi teman baik Anda. Selain memilih elemen yang paling tepat dan bermakna untuk mengekspresikan konten Anda, Anda juga harus memastikan Anda memilih nilai atribut class dan id. Di luar pekerjaan Anda, ini akan membuat hidup Anda lebih sederhana (dan juga akan membuat hidup tim kerja Anda lebih sederhana - jika Anda bekerja dalam tim). Perhatikan definisinya di bawah ini:
.l13k { warna: #369; }
Jika Anda baru saja masuk kerja dan melihat kelas ini di file css ini, apakah Anda akan segera menemukan kelas ini? Itu mungkin tidak mungkin, karena nama kelas ini mungkin merupakan singkatan, jadi tidak ada cara akurat bagi Anda untuk langsung mengetahuinya. Atau mungkin Anda menaruhnya di sana dan Anda tahu apa artinya saat ini, tapi bisakah Anda menjamin bahwa Anda masih tahu apa artinya bertahun-tahun kemudian?
Sekarang, mari kita lihat definisi ini:
.kiri-biru { warna: #369;
Anda mungkin akan segera mengetahui apa yang dilakukan pemilih kelas ini seperti Anda mengetahui modul biru di kolom kiri ada di sana, jadi itu berarti modul tersebut berfungsi. Saya sebutkan sebelumnya bahwa Anda mungkin perlu mendesain ulang dalam waktu seminggu. Pada saat dilakukan desain ulang, modul ini ditempatkan di sebelah kanan dan masih berwarna merah. Kelas ini tidak lagi memiliki nilai yang ada. Jadi sekarang saya harus memilih, mengubah semua nilai atribut, atau membiarkannya. (Hal ini dapat menyebabkan lebih banyak kebingungan.)
Sebaiknya jangan menambahkan warna atau dimensi panjang dan lebar ke atribut kelas Anda. Anda harus menghindari nilai properti apa pun yang merupakan kata literal. Atribut langsung (seperti kotak) dapat menyebabkan pemisahan konten.
Terakhir, mari kita lihat konvensi penamaan yang lebih tepat:
.deskripsi produk { warna: #369 }
Di sini Anda bisa melihatnya. Deskripsi produk yang didefinisikan dalam gaya ini sangat jelas tidak peduli bagaimana Anda mengubahnya.
03.Manfaat menambahkan komentar
Jika komentar Anda terorganisir dengan baik dan berada dalam cakupan CSS, beri label setiap bagian dengan jelas. Yang terbaik adalah memastikan bahwa komentar menonjol secara visual sehingga dapat dengan cepat ditemukan ketika konten di-scroll dan dilihat sekilas sepuluh baris. Kemudian mengomentari dokumen CSS Anda akan sangat membantu Anda atau orang lain dalam pengembangan di masa mendatang. Sebagian besar komentar mendasar akan memberi petunjuk mengapa aturan ini digunakan di sini.
Tip dan Catatan
Menambahkan komentar dapat membantu Anda atau pengembang di masa depan menghindari kebingungan yang tidak perlu. Pertahankan kebiasaan ini. Lihat contoh:
/* Mematikan batas untuk gambar yang ditautkan */
img { batas: 0 }
Waktu dan tanda tangan
Beberapa desainer dan pengembang suka menunjukkan tanggal dan waktu kapan dokumen CSS terakhir diperbarui, beserta nama dan status awalnya. Informasi ini dapat memberi Anda informasi tentang siapa saja yang terlibat, serta petunjuk tentang dokumentasi terbaru.
/* Gaya Tipografi Sushimonster
Diperbarui: Kam 10.18.07 @ 17:15
Pengarang: Jina Bolton
--------------------------------------------------- --*/
Ini adalah ide yang bagus terutama jika Anda bekerja dalam tim, perlu diingat bahwa beberapa tim perlu menghilangkan informasi ini (beberapa perusahaan lebih suka tidak mencantumkan nama dan tanggal ini di dokumen.) Jadi, ada baiknya untuk mengambil contoh saja. lihat. Apakah informasi ini diperlukan?
Klasifikasi organisasi
Sebaiknya gunakan komentar untuk mendeskripsikan secara singkat berbagai bagian CSS Anda. Misalnya, jika semua jenis judul dikelompokkan, Anda harus melihatnya untuk membedakannya.
/* KEPALA
--------------------------------------------------- --*/
Saya akan menguraikannya nanti ketika saya membahas "membedakan antar tipe".
Penandaan anotasi
Jika dokumen CSS Anda mengatur gaya yang tersebar seperti yang saya katakan di atas, penandaan komentar dapat membantu Anda mempermudah ketika Anda ingin menemukan bagian file tersebut. Anda dapat menggunakan simbol fitur, kata kunci, dan menemukan hasil akhirnya.
/* = KEPALA
--------------------------------------------------- --*/
Ini berguna dalam stylesheet yang panjang dan rumit. Anda dapat membaca tentang ini di Hentikan Desain. .
lihat