FAQ CSS berorientasi objek

Teks asli: http://wiki.github.com/stubbornella/oocss/faq (versi 28 jika diterjemahkan)
Terjemahan: ytzong

Bagaimana cara mendefinisikan "objek" di OOCSS?

Objek mirip dengan kelas di JAVA dan mempertahankan karakteristik OO.

Objek CSS terdiri dari 4 bagian:

1. Mungkin HTML dari satu atau lebih node DOM
2. Deklarasi gaya CSS dimulai dari nama kelas node pembungkus
3. Mirip dengan gambar latar belakang dan komponen sprite untuk tampilan dan
4. Perilaku JavaScript, pendengar, atau metode yang terkait dengan suatu objek

Hal ini dapat membingungkan karena setiap kelas CSS belum tentu merupakan objek tersendiri, namun dapat menjadi komponen kelas pembungkus. Misalnya:

<div kelas="mod">
<div class="batin">
<div class="hd">Blokir Kepala</div>
<div class="bd">Blokir Badan</div>
<div class="ft">Blokir Kaki</div>
</div>
</div>

Objeknya adalah modul dengan kelas mod. Termasuk 4 node komponen (tidak dapat independen dari modul, termasuk 2 blok, bagian dalam dan badan, dan dua blok opsional, kepala dan kaki)

Bagaimana OOCSS meningkatkan kinerja?

OOCSS memiliki manfaat kinerja dua kali lipat:

1. Kode CSS yang sangat dapat digunakan kembali, hanya membutuhkan sedikit kode CSS, artinya:
   • File lebih kecil, menghasilkan transfer lebih cepat
   • Seiring dengan meningkatnya proporsi kode CSS yang dipanggil di halaman situs, kode tersebut diharapkan dapat digunakan kembali atau di-cache oleh browser.
2. Lebih sedikit gambar ulang dan penghitungan tata letak sejauh menyangkut browser
   • Pada satu halaman, semakin banyak aturan CSS yang digunakan kembali, semakin sedikit waktu yang dihabiskan mesin rendering pada "nilai yang dihitung".
   • Kelas "memperluas" yang ditambahkan secara manual akan mengesampingkan aturan yang lebih sedikit, yang berarti mesin tidak melakukan banyak hal dalam menerapkan aturan

Apakah Anda ingin menggunakan ID untuk menata konten?

Ini adalah kinerja "gratis" ketika Anda menggunakan kembali suatu objek di halaman yang sama (atau di situs yang sama pada waktu yang sama karena objek tersebut disimpan dengan baik). Menggunakan ID untuk menulis gaya hanya dapat digunakan sekali pada halaman yang sama. @cgriego (twitter) Dibandingkan dengan lajang dan menurut saya ini sangat akurat. Mungkin ada situasi ketika Anda ingin menggunakan ID untuk menentukan gaya, seperti menu header yang sangat spesifik. Dalam hal ini, Anda dapat menggunakan ID untuk meng-sandbox elemen khusus dan memastikan bahwa kode di sini tidak memengaruhi bagian lain situs. Berpikirlah dua kali sebelum memilih ID dibandingkan kelas. Seiring berkembangnya situs Anda, sangat sulit untuk memprediksi apa yang akan dilakukan orang lain dengan HTML yang dibuat dari CSS Anda. Jika Anda punya pilihan, pertimbangkan skalabilitas sebanyak mungkin.

Saya sedang berpikir untuk menghapus ID dari template kepala, badan, dan kaki. Beberapa orang mungkin memiliki beberapa area rumah. Beberapa header dan footer untuk sebuah situs lebih sulit ditebak, tapi saya yakin ada desainer di luar sana yang berpendapat demikian, sehingga ID kemungkinan besar akan hilang (tidak begitu mulus, baca artikel aslinya: Seseorang dapat memiliki beberapa area konten utama. Banyak header dan footer situs lebih sulit dibayangkan, tapi saya yakin ada desainer yang bisa memimpikan hal seperti itu, jadi kemungkinan besar ID-nya akan hilang.).

Di sisi lain, kait ID sangat bagus untuk menghubungkan. Masukkan ke dalam HTML, tetapi jangan gunakan untuk menulis gaya.

Sumber: 99css