Parsing tugas dengan tata letak (sass, pug, tegukan, bem)

Saya sudah tahu tentang trik semacam itu untuk waktu yang lama, tetapi hanya untuk pertama kalinya saya menerapkannya pada latihan. Ada batasan dalam tata letak (pembungkus = lebar: 1170px, batas merah). Di sebelah kanan, konten sesuai dengan pembatasan dan berbatasan dengan perbatasan, tetapi di sebelah kiri, gambar merangkak keluar dari perbatasan. Pada awalnya ini bisa menakutkan, tetapi ada baiknya mengetahui lebih banyak tentang operasi margin-letf: -100px dan Anda sudah tahu cara menyelesaikan tugas. Ngomong-ngomong, ini lentur dan berwarna kuning aku menandai batas objek.

Kita terbiasa menggunakan lebar, tinggi 100%, dan ini bisa dimengerti, semuanya untuk adaptif, menggunakan lebar, Anda dapat mencapai hasil yang sama seperti dengan margin negatif. Berikan ukuran pada keturunan yang lebih besar dari orang tua Anda (mis. Lebar: 130%)

Ini mungkin hal yang paling sulit bagi saya.



Gambar ini menunjukkan dengan baik proyek saya, dan memang proyek apa pun. Ketika Anda menulis seratus baris pertama, semuanya tampak sederhana, dan Anda tidak melihat masalah. Jadi, Anda menyelesaikan proyek, dengan panjang 900 baris dan tiba-tiba untuk Anda sendiri, memutuskan untuk menggulir file, atau menambahkan pertanyaan media.



Anda menulis gaya untuk elemen di media, melihat situs dan tidak mengerti mengapa gaya tidak bekerja seperti yang disyaratkan. Mencari masalah yang Anda habiskan 15 menit, Anda memeriksa tugas-tugas dalam tegukan dan membalik-balik file css yang dikompilasi.

Secara kebetulan, secara tidak sengaja ... Anda menemukan masalah dalam lembar gaya kaskade, atau lebih tepatnya, dalam cara gaya diterapkan ke elemen. Pada awal perjalanan saya ke web, saya tentu membaca bahwa penyeleksi memiliki prioritas aplikasi yang berbeda. Singkatnya, kemudian untuk selektor -1 poin, untuk kelas-10, untuk pengidentifikasi 100 (biasa, ul, a, p, dll.).



Dengan hati-hati memeriksa semua sarang, saya masih menemukan kesalahan. Ternyata Anda perlu memantau elemen bersarang, dan memberikan ini bukan arti terakhir.

Ini mungkin termasuk struktur file css (sass). Ada blok "portofolio", ia memiliki banyak elemen dari tipe "portofolio __ *", tetapi dua kelas di sarang ini berlebihan, menurut pendapat saya.

Ini adalah proyek pertama di mana saya mencoba untuk benar-benar mematuhi BEM, tetapi tidak menghabiskan satu menit untuk merancang di awal, tetapi muncul dengan kelas di mana saja, yang mengarah pada fakta bahwa dukungan diberikan dengan susah payah.



Tapi ini, menurut saya, adalah contoh yang baik dari BEM

Saya membaca tentang masalah ini di salah satu artikel di BEM, tetapi saya sendiri pertama kali menemukan ini. Ini sangat mirip dengan masalah dengan bootstrap, juga punya ... ada kelas panjang. Bagaimana saya bisa bertahan dengan jumlah kelas minimum?

Ini adalah btn default.



Dan ini sudah tombol yang dimodifikasi ...

Mengingat saya harus menulis di BEM, beberapa komplikasi dalam proyek ini berasal dari sini. Saya sudah menulis tentang kelas panjang, berikut ini kasus lain.

Ada 6 elemen serupa di halaman. Ketika media bertanya, perlu untuk menyembunyikan sejumlah elemen. Lagi pula, jangan membuat kelas baru untuk setiap objek. Saya harus menggunakan pseudo-class nth-child (). Sebelumnya, itu hanya digunakan dengan cara yang dipotong (anak (1), anak (3), anak (4), dll), sekarang ada kebutuhan untuk menyembunyikan semua elemen kecuali dua yang pertama. Setelah menghabiskan 5 menit membaca dokumentasi, saya menggunakan nth-child (n + 3), sehingga mendapatkan hasil yang saya butuhkan.



Contoh lain tentang bagaimana Anda dapat mengambil elemen yang diinginkan melalui sekelompok penyeleksi, dan tidak menghasilkan kelas khusus untuk elemen ini.



Lihat gambar di bawah ini. Entri entri berikutnya.1> p akan memilih hanya objek dengan kelas "2", div.3> p yang sesuai akan menerima objek dengan kelas "4". Gambar menunjukkan cara kerjanya. Item terdekat dipilih di hierarki.