Karena saya lebih suka metodologi BEM, ketika saya mulai bekerja dengan OpenCart, saya langsung menemui hal-hal buruk bagi saya, ini adalah penyeleksi yang bersarang. Mereka ada di mana-mana! Mulai dari template default, diakhiri dengan hampir semua modul dan template hak cipta. Kenapa begitu Saya pikir ada sejumlah alasan:
- Opencart dibangun secara default pada penyeleksi yang bersarang, baik templat maupun panel admin.
- Sebagian besar pengembang yang bekerja dengan opencart adalah pengembang back-end, mereka hanya mengambil pendekatan ini
- Ada sejumlah kelas yang diperlukan dan id yang melampirkan fungsionalitas pembuka standar dan modul penulis, dan semua pengembang back-end yang sama, dan pengikut mereka, karena berbagai alasan, sama sekali tidak ingin mengubah apa pun dan mengikuti arus.
Tidak berarti saya ingin mengatakan hal buruk kepada pengembang back-end, tetapi banyak dari mereka benar-benar lemah di front-end dan bahkan dalam tata letak. Pendapat ini dibentuk atas dasar komunikasi dengan mereka, kolaborasi dan, secara umum, aktivitas mereka di forum-forum pembuka tematik. Saya menekankan bahwa yang saya maksudkan adalah niche dari pengembang OpenCart.
Saya membuat template dari awal sesuai dengan metodologi BEM (sejauh mungkin dalam kerangka opencart) dan saya dapat mengatakan dengan yakin bahwa modul apa pun dimulai dengan setengah tendangan terlepas dari markup. Modul yang akan didiskusikan di bawah ini tidak memerlukan koreksi sama sekali, semua yang diperlukan adalah menyederhanakan bekerja dengannya dan menyadari kemungkinan menggunakannya kembali dalam proyek lain. Saya mengambil modul ini sebagai contoh, karena sangat sederhana dan tidak perlu terganggu oleh banyak kode tambahan, tetapi pada saat yang sama berisi semua masalah yang diselesaikan BEM. Ini adalah modul nyata yang ada dan ada banyak modul seperti itu, dan hanya ada template. Saya percaya bahwa satu contoh pertempuran lebih baik daripada ratusan contoh abstrak.
Untuk memulai, saya akan menjelaskan
esensi masalah . Di salah satu rakitan opencart domestik, modul stiker terintegrasi. Ini menampilkan stiker yang dipilih di sudut yang ditentukan:
Kiri atas / kanan atas / kiri bawah / kanan bawahTidak ada opsi untuk stiker, tetapi ada maksimal 4 posisi:
Sekarang mari kita lihat markup dan gaya:
Apa yang kita lihat:
- Semua stiker tertanam di blok gambar .
- Terlepas dari kenyataan bahwa blok gambar dirancang secara logis untuk menyimpan gambar produk, semua gaya stiker terikat padanya, dan sekarang lihat seluruh css dan terutama pada sarang di baris terakhir:
.image { position: relative; } .image .corner_0, .image .corner_1, .image .corner_2, .image .corner_3 { height: 57px; width: 58px; position: absolute; z-index: 998; } .image .corner_0 { left: 0px; top: 0px; } .image .corner_1 { right: 0px; top: 0px; } .image .corner_2 { left: 0px; bottom: 0px; } .image .corner_3 { right: 0px; bottom: 0px; } .box-product .image .corner_0 img, .box-product .image .corner_1 img, .box-product .image .corner_2 img, .box-product .image .corner_3 img { border: none; padding: 0px; } .box .box-product .image .corner_0 img, .box .box-product .image .corner_1 img, .box .box-product .image .corner_2 img, .box .box-product .image .corner_3 img { width: 60%; }
Jika
.image .corner_2 terlihat semakin tidak dapat diterima, maka
.box .box-product .image .corner_2 img sudah tidak terlihat begitu optimis ... Secara umum, kita dapat menebak bahwa di suatu tempat kita akan memiliki
.box-produk tanpa orangtua
.box dan beberapa gaya digunakan, tetapi di suatu tempat dengan orang tua yang lain, tetapi di sini kita menghadapi sejumlah masalah:
- Jika stiker dipindahkan di luar gambar. , Semua gaya akan jatuh, dan jika kita membawa gambar. Dengan kami dan menempatkannya di tempat lain, kemudian menerapkan gaya gambar. Di mana mereka tidak diperlukan.
- Jika Anda tiba-tiba mengganti nama gambar, yang secara logis bukan repositori untuk stiker atau .box atau .box-produk, yang bahkan lebih tinggi dan tentu saja tidak mengatakan bahwa stiker melekat padanya, dalam kasus-kasus ini kami tidak akan mendapatkan hasil yang diharapkan .
- Bagaimana jika kita ingin menempatkan .image setara dengan .box-produk ? Sekali lagi, ada yang salah ...
- Ada banyak penyeleksi berulang yang hanya .corner_ # berubah dan jika kita tiba-tiba mengubah sarang ini atau ingin mentransfer kode ke templat lain, kita harus mengubahnya di mana-mana, dan mungkin masih ada pertanyaan media, itu hanya buang-buang waktu saja.
- Peningkatan spesifisitas. Masalah ini selalu menjadi nyata setelah beberapa saat dan seringkali berada di pundak mereka yang tidak membuatnya ...
Mereka yang akrab dengan metodologi BEM telah lama menyadari hal ini, dan mereka yang tidak terbiasa, saya pikir saya telah menemukan lebih dari sekali. Mari kita coba selesaikan masalah ini.
Karena salah satu tugas utama adalah kemampuan untuk menggunakan kembali kode, kita tidak dapat memberi nama sudut stiker kita, seperti sebelumnya, karena mungkin dalam proyek lain kita ingin mereka tidak berada di sudut, tetapi di tengah-tengah setiap sisi atau bahkan berbaris, oleh karena itu akan logis untuk menyebutkan, masing-masing, hanya sebuah stiker, tetapi agar tidak bergantung pada blok eksternal, letakkan tongkat kami di wadah
stiker , yang dapat berupa blok independen atau campuran untuk setiap blok di kartu produk. Hasil:
Secara eksternal, kami mendapat hasil yang sama, tetapi markup dan gaya sekarang berbeda:
.stickers { position: relative; } .sticker { } .sticker_position_0 { position: absolute; left: 0px; top: 0px; } .sticker_position_1 { position: absolute; right: 0px; top: 0px; } .sticker_position_2 { position: absolute; left: 0px; bottom: 0px; } .sticker_position_3 { position: absolute; right: 0px; bottom: 0px; } .sticker__img { border: none; padding: 0; }
Seperti yang saya katakan sebelumnya, wadah
.stickers dapat berupa unit independen atau campuran untuk setiap unit dalam kartu produk. Dalam kasus ini, kami mencampurkannya ke blok
.image dengan membagi tugas mereka.
Setiap stiker memiliki
.sticker kelas, yang berisi gaya yang umum untuk semua batang, misalnya ukuran. Tapi kami mengambil gaya yang bertanggung jawab untuk posisi di
pengubah dengan kunci posisi :
Catatan:.sticker dapat sebagai elemen
.stickers :
<div class="stickers"> <div class="stickers__sticker sticker sticker_position_2"> <img class="sticker__img " src="#"> </div> </div>
serta blok independen untuk penempatan titik tanpa
stiker konteks.
Sekarang dengan mengibaskan pergelangan tangan, Anda dapat menempatkan stiker di mana saja. Misalnya, Anda dapat mengambil stik dari gambar dan menerapkan ke seluruh kartu produk dalam wadah produk:
Poin utama adalah bahwa manipulasi lebih lanjut akan jauh lebih mudah, dan kode ini, hanya menyalinnya ke proyek lain, akan segera mulai bekerja, tetap hanya untuk memodifikasinya dengan properti yang diperlukan.
Masih ada masalah yang belum terselesaikan dengan penyeleksi ini, yang sebelumnya mata kapalan:
.box-product .image .corner_3 img {....} .box .box-product .image .corner_2 img {....}
Secara umum, saya tidak menemukan produk kotak untuk melihat konteks masalah, jadi saya tidak bisa mengatakan dengan pasti apakah pemilih seperti itu diperlukan atau tidak, tetapi metodologi BEM tidak melarang bersarang, jika Anda tidak dapat melakukannya tanpa itu. Dengan markup yang dihasilkan, setidaknya Anda dapat mengurangi pemilih menjadi 2 kelas, yang akan memungkinkan interaksi yang lebih tepat dengan elemen dan tanpa meningkatkan spesifisitas, Anda dapat mendefinisikan ulang atau menambahkan gaya hanya dengan mengaturnya dalam urutan yang benar:
.box-product .sticker__img {...} .box .sticker__img {...}
Kesimpulan
Ini adalah bagian kecil dari kode yang sangat masuk akal.
Cukup merapikan satu blok untuk membuatnya lebih mudah untuk bekerja. Dimungkinkan untuk mencapai pekerjaan yang lebih stabil sepotong demi sepotong, bahkan pada proyek yang diluncurkan sepenuhnya, dan bahkan lebih sehingga Anda dapat menulis ulang satu modul sekali dan membuat hidup lebih mudah untuk semua orang.
Terima kasih kepada semua orang yang membaca sampai akhir dan saya harap artikel saya bermanfaat.