Bagaimana cara menyusun kueri media di SASS

Sep 16, 2025

Bagaimana caranya

Praktis setiap situs sekarang dibangun dengan setidaknya anggukan untuk desain web responsif. Cara kita menyusun gaya responsif ini memiliki hubungan langsung dengan seberapa kompleks proyek akan mempertahankan dan mengedit di masa depan karena pembaruan dibuat dan proyek tumbuh dalam ukuran.

Meskipun demikian, tampaknya seolah-olah pendekatan yang diterima secara luas untuk bagaimana dan di mana menyusun gaya responsif ini belum diadopsi secara konsisten oleh pengembang. Meskipun tidak sama buruknya dengan 'masa lalu' CSS, sebelum preprosesor dan metodologi penamaan, ini menyebabkan pendekatan yang tidak konsisten dan sering berantakan untuk menyusun gaya responsif untuk elemen.

Baru memulai dengan situs Anda? Pilih top Pembangun Situs Web dan hosting web. layanan. Bekerja dengan tim besar? Pastikan Anda penyimpanan awan Simpan semua orang up to date dengan sistem desain Anda.

Apa itu SASS?

Css di masa lalu

Untuk memahami masalah yang kita hadapi, mari kita kembali ke awal. Salah satu alasan mengapa preprosesor CSS seperti SASS atau kurang diciptakan sejak awal adalah karena CSS bisa menjadi sangat berantakan dan terkenal sulit untuk dipelihara. Kami dulu menemukan bahwa setelah beberapa saat, bahkan situs web kecil memiliki garis pada baris gaya CSS yang ditinggalkan hanya karena pengembang tidak yakin apakah diperlukan atau sisa-sisa fitur yang dihapus atau elemen usang yang dapat dihapus.

Ambil skenario berikut sebagai contoh:

 .Heading {latar belakang: # 000000; };
.title {ukuran font: 16px; };
.title_small {font-size: 14px; }
.title_alt {Font-Family: Sans-Serif; }

Meskipun Anda mungkin berpikir bahwa aman untuk mengasumsikan elemen .title adalah judul untuk elemen .Heading dalam konteks ini, sebenarnya Anda tidak dapat benar-benar yakin bahwa itu tidak digunakan untuk menata elemen judul lain di situs tersebut . Juga, di mana .title_alt kelas digunakan dan apakah masih diperlukan atau digunakan? Anda dapat melihat bagaimana bahkan dengan contoh sederhana itu dapat menjadi latihan yang memakan waktu untuk memeriksa semua ini sebelum melakukan perubahan.

Karena itu, banyak pengembang akan menghemat waktu dengan menambahkan kelas baru ke elemen atau menggunakan pemilih CSS yang lebih kompleks untuk membuat perubahan yang mereka inginkan, yang kemudian pada gilirannya meningkatkan kompleksitas CSS untuk waktu berikutnya diperlukan .

Preprosesor, Konvensi Penamaan dan Modular CSS

Berkat kemampuan untuk bersarang gaya, gunakan variabel, memperpanjang kelas lain dan banyak lagi, preprosesor merevolusi cara kami menciptakan dan memelihara CSS. Sayangnya mereka tidak sepenuhnya menyelesaikan masalah gaya yang berantakan dan ketinggalan zaman yang menyebar ke seluruh proyek seiring dengan infeksi.

Sepanjang datangnya konvensi dan metodologi CSS seperti Bem , yang ketika diterapkan memberikan tingkat konteks yang jauh lebih besar untuk gaya.

Ketika dikombinasikan dengan membuat variasi, modifikasi dan gaya elemen bersarang mandiri dengan menggunakan Modul CSS. , cara yang sangat kuat untuk menyusun gaya Anda lahir.

Di bawah ini Anda dapat melihat bagaimana perbaikan ini dapat memecahkan masalah yang kami temui dengan contoh kode kami:

 .Heading {
Latar belakang: $ Hitam;
}

.Heading__title {
Ukuran font: 16px;

& amp; .Heading__title - kecil {
Ukuran font: 14px;
}
}

.post__title - alt {
Font-Family: Sans-Serif;
}

Ini secara instan jelas bahwa gaya judul di sini secara khusus terkandung dalam elemen heading. Anda dapat dengan aman menghapus / mengedit ini tanpa khawatir mempengaruhi elemen lain. Anda juga dapat melihat bahwa judul kecil itu adalah variasi judul header, tetapi gaya alt judul adalah untuk elemen lain.

Menurut pendapat saya, ketika mengikuti kombinasi struktur dan metodologi penamaan ini, cukup mudah untuk membuat gaya CSS yang bersih dan mudah terawat. Konteks dapat dengan cepat diperoleh dan modul CSS yang mandiri dapat disalin dan disisipkan dalam proyek lain, atau diubah dan dihilangkan dengan mudah.

Ini mungkin tampak seperti masalah kode yang berantakan dan tidak nyaman diselesaikan. Tetapi sebagai desain responsif menjadi semakin relevan, menjadi jelas bahwa kami mengulangi banyak kesalahan kami lagi dan menghasilkan pendekatan yang terstruktur dengan buruk, terlalu kompleks untuk menciptakan situs web yang responsif.

Memecahkan masalah ini adalah di mana Media Query Bubbling akan dimainkan.

Lokasi gaya responsif.

Berkat perbaikan yang disebutkan dalam pendekatan kami untuk menciptakan CSS, setiap kali saya mewarisi atau berkolaborasi pada proyek hari ini, saya jarang mengalami ketakutan atau kepedulian bahwa saya membuka diri untuk jatuh ke dalam api neraka atau disorganisasi struktural yang saya gunakan untuk memiliki dalam situasi itu. Saya sekarang tahu bahwa saya dapat dengan cepat menemukan dan memahami kelas dan gaya yang relevan berkat metodologi penamaan, dan membuat perubahan saya tanpa konsekuensi yang tak terbayangkan dengan elemen lain, berkat modular CSS.

Sayangnya satu penyebab utama frustrasi yang saya temui adalah bahwa gaya responsif masih tidak konsisten berlokasi di seluruh proyek. Mereka mungkin terkandung dalam struktur modular dan dinamai dengan tepat dalam metodologi penamaan, tetapi proyek dengan proyek saya melihat banyak cara yang berbeda memilih untuk memasukkan gaya responsif mereka.

Beberapa membuat sebagian besar SASS sebagian bernama _mobile.scss atau _tablet.scss misalnya. Beberapa place media query di bagian bawah file yang relevan dalam urutan menaik atau turun dan yang lain hanya menempatkannya secara acak di antara gaya untuk elemen lain. Dengan pendekatan ini, saya menemukan diri saya tabting antara file dan menggulir ke bagian atas dan bawah file hanya untuk mendapatkan pemahaman penuh tentang gaya satu elemen di berbagai breakpoints.

Media Query Bubbling.

Seperti yang Anda lihat, ada banyak masalah dengan ini bahwa semua bergabung untuk menyebabkan pengembang menghabiskan lebih banyak waktu bekerja pada perubahan / amandemen daripada yang sebenarnya dibutuhkan.

Ini menduplikasi gaya dan membuat proses memelihara dan menemukan semua gaya yang relevan untuk komponen lebih keras. Anda harus melihat banyak lokasi atau file untuk mendapatkan gambaran lengkap gaya elemen.
Elemennya tidak lagi mandiri. Anda tidak dapat dengan mudah menggunakannya kembali di proyek lain atau dengan percaya diri menghapus / mengubahnya tanpa pengaruh yang merugikan atau sisa kode yang tersisa.
Untuk setiap proyek baru, waktu sia-sia mencari tahu bagaimana proyek itu mendekati gaya responsif.
Beralih antar proyek menjadi lebih sulit karena Anda harus beralih di antara pendekatan di kepala Anda. Ini dapat menyebabkan proyek secara tidak sengaja memiliki perpaduan pendekatan, yang lagi mengarah pada CSS yang berantakan.

Solusi yang saya suka implementasikan untuk memperbaiki ini disebut Media Query Bubbling. Cara paling sederhana untuk menjelaskannya adalah dengan mempertimbangkan kueri media untuk menjadi seperti variasi elemen modular Anda lainnya. Sama seperti kelas variasi BEM .Heading__title adalah. Variasi-variasi__title, misalnya. Ini berarti bahwa kueri media harus bersarang di dalam, sama seperti kelas pemodifikasi Anda. Lihat kode berikut sebagai contoh dari ini:

 .Header {
Latar belakang: $ Hitam;

@Media hanya layar dan (Lebar Min-Lebar: 640px) {
latar belakang: $ putih;
}
}

Dalam contoh ini, Anda dapat dengan jelas melihat di satu lokasi yang latar belakang untuk header berubah menjadi putih pada 640px atau lebih tinggi. Dengan memandikan diri media kueri bersama dengan gaya elemen, Anda sekali lagi membuat modul sepenuhnya mandiri yang dapat digunakan kembali atau diedit dengan percaya diri. Tidak perlu menyeberang file _mobile.scss atau mencari proyek untuk menyebutkan kelas lain untuk memastikan Anda telah membahas semua breakpoints.

Permintaan media bersarang menggelegak

Sekali lagi, saya telah melihat banyak variasi tentang bagaimana pengembang memilih untuk menyusun gaya responsif elemen mereka. Ini harus dianggap tidak berbeda dari menata elemen induk dan semua kueri media dan gaya harus mandiri. Lihat contoh berikut:

 .Heading__title {
Ukuran font: 16px;

@Media hanya layar dan (Lebar Min-Lebar: 640px) {
Ukuran font: 18px;
}

& amp; .Heading__title - kecil {
Ukuran font: 14px;

@Media hanya layar dan (Lebar Min-Lebar: 640px) {
Ukuran font: 16px;
}
}
}

Anda dapat melihat bahwa ukuran font untuk heading__title menjadi lebih besar ketika viewport adalah 640px atau lebih besar dan bagaimana variasi yang lebih kecil dari judul judul juga memperbesar tetapi didefinisikan lebih kecil dari standar. Dengan menggunakan teknik ini, sangat penting untuk menerapkan metodologi BEM dengan kuat untuk memastikan Anda tidak berakhir bersarang beberapa level. Misalnya, pastikan bahwa elemen .Heading__title adalah modul CSS mandiri yang tidak perlu disinari dalam elemen.

Gaya responsif yang lebih bersih

Dengan mengambil apa yang kami pelajari dari manfaat yang disediakan oleh BEM dan modular CSS dan menerapkannya pada permintaan media dalam struktur yang sama, kami menghentikan diri kami dari mengulangi kesalahan masa lalu kami.

Dengan bekerja dengan kueri media dengan cara ini, Anda tidak perlu mempelajari metodologi atau struktur yang sama sekali baru untuk gaya Anda. Kami pada dasarnya mengambil pendekatan CSS modular dan menerapkannya pada kueri media kami, yang seharusnya terasa alami.

Kami juga membuat CSS CHATER dengan lebih sedikit duplikasi kelas CSS di seluruh file dan menghemat waktu pengembangan dengan menghapus kebutuhan untuk memeriksa beberapa lokasi saat membuat kesalahan.

Artikel ini awalnya diterbitkan di bersih , majalah untuk desainer dan pengembang web profesional. Berlangganan bersih di sini .

Artikel terkait:

Buat animasi CSS UI keren dengan SASS
10 hal yang Anda tidak pernah tahu Anda bisa lakukan dengan SASS
Alat desain web untuk membantu Anda bekerja lebih pintar

Bagaimana cara menyusun kueri media di SASS

Css di masa lalu

Preprosesor, Konvensi Penamaan dan Modular CSS

Lokasi gaya responsif.

Media Query Bubbling.

Permintaan media bersarang menggelegak

Gaya responsif yang lebih bersih

Bagaimana caranya - Artikel Terpopuler

Cara mempercepat retopologi di Maya

Cara Membuat Simulasi Air

Buat Teks 3D di Photoshop: Panduan Langkah-demi-Langkah

Cara mengecat kastil dengan Sketchup

Buat dan menghidupkan poligon SVG

Putar foto ke dalam animasi 3D dengan Photoshop

Bangun UI berbasis kartu dengan Yayasan

Cara Membuat Kain CG Realistis

Kategori