Cách cấu trúc các truy vấn phương tiện trong Sass

Sep 11, 2025

Cách

Thực tế mọi trang web hiện được xây dựng với ít nhất một cái gật đầu với thiết kế web đáp ứng. Cách chúng tôi cấu trúc các phong cách đáp ứng này có mối quan hệ trực tiếp về mức độ phức tạp của dự án sẽ duy trì và chỉnh sửa trong tương lai vì các bản cập nhật được thực hiện và dự án sẽ tăng kích thước.

Mặc dù vậy, có vẻ như một cách tiếp cận được chấp nhận rộng rãi về cách thức và nơi để cấu trúc các phong cách đáp ứng này vẫn chưa được thông qua nhất quán bởi các nhà phát triển. Mặc dù không nơi nào tồi tệ như 'ngày xưa' của CSS, trước khi xử lý tiền xử lý và phương pháp đặt tên, điều này gây ra một cách tiếp cận không nhất quán và thường lộn xộn để cấu trúc các phong cách đáp ứng cho các yếu tố.

Chỉ cần bắt đầu với trang web của bạn? Chọn một đỉnh người tạo ra trang web và web hosting dịch vụ. Làm việc với một đội lớn? Hãy chắc chắn của bạn lưu trữ đám mây Giữ cho tất cả mọi người cập nhật với hệ thống thiết kế của bạn.

Sass là gì?

Css trong quá khứ

Để hiểu vấn đề chúng ta đang phải đối mặt, hãy quay lại từ đầu. Một trong những lý do khiến các bộ tiền xử lý CSS như Sass hoặc ít được tạo ra ở nơi đầu tiên là vì CSS có thể cực kỳ lộn xộn và rất khó duy trì. Chúng tôi đã từng thấy rằng sau một thời gian, ngay cả các trang web nhỏ cũng có các dòng theo các kiểu CSS được đặt đúng chỗ chỉ vì nhà phát triển không chắc chắn nếu nó được yêu cầu hoặc tàn dư của một tính năng bị xóa hoặc phần tử lỗi thời có thể bị xóa.

Thực hiện các kịch bản sau đây như một ví dụ:

 .Heading {Background: # 000000; };
.title {phông chữ-size: 16px; };
.title_small {phông chữ kích thước: 14px; Không thể
.title_alt {font-family: sans-serif; }

Mặc dù bạn có thể nghĩ rằng nó an toàn để giả định yếu tố .title là tiêu đề cho phần tử .hêm trong bối cảnh này, trên thực tế, bạn thực sự không thể chắc chắn rằng nó không được sử dụng để tạo kiểu bất kỳ phần tử tiêu đề nào khác trong trang web . Ngoài ra, lớp .title_alt ở đâu được sử dụng và nó vẫn được yêu cầu hoặc đang sử dụng? Bạn có thể thấy như thế nào ngay cả với một ví dụ đơn giản như vậy, nó có thể trở thành một bài tập tốn thời gian để kiểm tra tất cả những điều này trước khi thực hiện thay đổi.

Bởi vì điều này, rất nhiều nhà phát triển sẽ tiết kiệm thời gian bằng cách thêm một lớp mới vào phần tử hoặc sử dụng bộ chọn CSS phức tạp hơn để thực hiện các thay đổi mà họ muốn, sau đó lần lượt tăng độ phức tạp của CSS cho lần tiếp theo là cần thay đổi .

Bộ tiền xử lý, quy ước đặt tên và CSS mô-đun

Nhờ khả năng tổ yến, sử dụng các biến, mở rộng các lớp khác và nhiều hơn nữa, bộ tiền xử lý đã cách mạng hóa cách chúng ta tạo và duy trì CSS. Thật không may, họ không hoàn toàn giải quyết vấn đề của các phong cách lộn xộn, lỗi thời lan rộng và phát triển trong suốt một dự án khi nó có độ tuổi như một bệnh nhiễm trùng.

Cùng với các quy ước đặt tên và các phương pháp CSS như Bem. , mà khi áp dụng đưa ra một bối cảnh lớn hơn nhiều cho phong cách.

Khi kết hợp với các biến thể, sửa đổi và các kiểu của các phần tử lồng nhau có chứa bằng cách sử dụng Mô-đun css. , một cách thực sự mạnh mẽ để cấu trúc các phong cách của bạn đã được sinh ra.

Dưới đây bạn có thể thấy cách các cải tiến này có thể giải quyết các vấn đề chúng ta gặp phải với ví dụ mã trước đó của chúng tôi:

. Bạn đứng đầu {
Bối cảnh: $ Đen;
Không thể

.heading__title {
Kích thước phông chữ: 16px;

& amp; .heading__title - nhỏ {
Kích thước phông chữ: 14px;
Không thể
Không thể

.post__title - Alt {
Font-Family: Sans-serif;
}

Nó ngay lập tức rõ ràng rằng các kiểu tiêu đề ở đây được chứa cụ thể trong phần tử tiêu đề. Bạn có thể xóa / chỉnh sửa một cách an toàn những điều này mà không phải lo lắng ảnh hưởng đến các yếu tố khác. Bạn cũng có thể thấy rằng tiêu đề nhỏ là một biến thể của tiêu đề, nhưng kiểu Titt ALT là cho một yếu tố khác.

Theo tôi, khi sau sự kết hợp của cấu trúc và phương pháp đặt tên, khá dễ tạo các kiểu CSS sạch sẽ, dễ dàng dễ dàng. Bối cảnh có thể nhanh chóng đạt được và các mô-đun khép kín của CSS có thể được sao chép và dán trong các dự án khác, hoặc sửa đổi và loại bỏ một cách dễ dàng.

Có vẻ như vấn đề của mã lộn xộn và không thể xác định đã được giải quyết. Nhưng như thiết kế đáp ứng ngày càng có liên quan, rõ ràng là chúng tôi đã lặp lại nhiều sai lầm của chúng tôi và tạo ra các phương pháp tiếp cận quá mức, quá phức tạp để tạo ra các trang web đáp ứng.

Giải quyết vấn đề này là nơi bong bóng Truy vấn truyền thông xuất hiện.

Cách đáp ứng vị trí phong cách

Nhờ những cải tiến được đề cập trong cách tiếp cận của chúng tôi để tạo CSS, bất cứ khi nào tôi kế thừa hoặc hợp tác trong một dự án những ngày này, tôi hiếm khi trải nghiệm sự sợ hãi hoặc lo lắng rằng tôi đã mở đầu để rơi vào một ngọn lửa địa ngục hoặc cơ cấu cơ cấu mà tôi đã sử dụng để có trong những tình huống đó. Bây giờ tôi biết rằng tôi có thể nhanh chóng tìm và hiểu các lớp và kiểu dáng có liên quan nhờ đặt tên phương pháp và thực hiện các thay đổi của tôi mà không có hậu quả không thể tưởng tượng đối với các yếu tố khác, nhờ CSS mô-đun.

Thật không may, một nguyên nhân chính của sự thất vọng tôi gặp phải là những phong cách đáp ứng vẫn nằm trong suốt dự án. Chúng có thể được chứa trong một cấu trúc mô-đun và được đặt tên một cách thích hợp trong một phương pháp đặt tên, nhưng dự án theo dự án tôi thấy nhiều cách khác nhau mà các nhà phát triển chọn để bao gồm các phong cách đáp ứng của họ.

Một số tạo một phần Sass riêng biệt có tên _mobile.scss hoặc _tablet.scss chẳng hạn. Một số truy vấn phương tiện đặt ở dưới cùng của tệp có liên quan trong thứ tự tăng dần hoặc giảm dần và những thứ khác chỉ đặt chúng ngẫu nhiên giữa các kiểu cho các yếu tố khác. Với cách tiếp cận này, tôi thấy bản thân mình giữa các tệp và cuộn đến đỉnh và dưới cùng của các tệp chỉ để hiểu đầy đủ về các kiểu của một yếu tố trên các điểm dừng khác nhau.

Truyền thông truy vấn subbling.

Như bạn có thể thấy, có nhiều vấn đề với việc tất cả kết hợp để khiến nhà phát triển dành nhiều thời gian hơn để thực hiện các thay đổi / sửa đổi hơn là thực sự cần thiết.

Nó trùng lặp các kiểu và thực hiện quá trình duy trì và tìm tất cả các kiểu có liên quan cho một thành phần khó hơn. Bạn phải xem trong nhiều vị trí hoặc tệp để có được một hình ảnh hoàn chỉnh về các kiểu của một yếu tố.
Các yếu tố không còn khép kín. Bạn không thể dễ dàng sử dụng lại nó trong một dự án khác hoặc tự tin xóa / sửa đổi nó mà không ảnh hưởng xấu hoặc mã còn lại còn lại.
Đối với mỗi dự án mới, thời gian bị lãng phí để tìm ra cách dự án đó tiếp cận các phong cách đáp ứng.
Chuyển đổi giữa các dự án trở nên khó khăn hơn vì bạn phải chuyển đổi giữa các phương pháp trong đầu. Điều này có thể dẫn đến các dự án vô tình có sự pha trộn giữa các phương pháp, một lần nữa dẫn đến CSS lộn xộn.

Giải pháp mà tôi muốn triển khai để khắc phục điều này được gọi là Media Truy vấn Bubbled. Cách đơn giản nhất để giải thích nó là xem xét các truy vấn phương tiện giống như bất kỳ biến thể nào khác của phần tử mô-đun của bạn. Giống như một lớp biến thể BEM của .heading__title là .heading__title-biến đổi, ví dụ. Điều này có nghĩa là truy vấn phương tiện phải được lồng trong, giống như các lớp sửa đổi của bạn. Xem đoạn mã sau đây là một ví dụ về điều này:

 .header {
Bối cảnh: $ Đen;

@Media chỉ màn hình và (Chiều rộng tối thiểu: 640px) {
Bối cảnh: $ trắng;
Không thể
}

Trong ví dụ này, bạn có thể thấy rõ ở một vị trí mà nền cho tiêu đề thay đổi thành màu trắng ở mức 640px trở lên. Bằng cách tự chứa Truy vấn phương tiện cùng với các kiểu của Element, bạn đã một lần nữa tạo ra một mô-đun hoàn toàn khép kín có thể được sử dụng lại hoặc chỉnh sửa một cách tự tin. Không cần phải kiểm tra chéo tệp _mobile.scss hoặc tìm kiếm dự án cho các đề cập khác của lớp để chắc chắn rằng bạn đã đề cập đến tất cả các điểm dừng.

Truyền thông lồng nhau Bubbled

Một lần nữa, tôi đã thấy nhiều biến thể của cách các nhà phát triển chọn cấu trúc các phong cách đáp ứng của các yếu tố của họ. Điều này nên được coi là không khác gì tạo kiểu cho phần tử cha và tất cả các truy vấn và kiểu phương tiện sẽ được khép kín. Xem ví dụ sau:

 .heading__title {
Kích thước phông chữ: 16px;

@Media chỉ màn hình và (Chiều rộng tối thiểu: 640px) {
Kích thước phông chữ: 18px;
Không thể

& amp; .heading__title - nhỏ {
Kích thước phông chữ: 14px;

@Media chỉ màn hình và (Chiều rộng tối thiểu: 640px) {
Kích thước phông chữ: 16px;
Không thể
Không thể
}

Bạn có thể thấy rằng kích thước phông chữ cho tiêu đề to hơn sẽ lớn hơn khi chế độ xem là 640px hoặc lớn hơn và biến thể nhỏ hơn của tiêu đề cũng mở rộng nhưng được xác định nhỏ hơn tiêu chuẩn. Sử dụng kỹ thuật này, điều rất quan trọng là áp dụng phương pháp BEM mạnh mẽ để đảm bảo bạn không kết thúc việc làm tổ sâu nhiều cấp độ. Ví dụ: Đảm bảo rằng phần tử .Heading__Title là một mô-đun CSS khép kín không cần thiết không cần thiết trong phần tử .heading.

Phong cách đáp ứng sạch hơn

Bằng cách lấy những gì chúng ta học được từ những lợi ích được cung cấp bởi BEM và CSS mô-đun và áp dụng nó vào các truy vấn truyền thông trong cùng một cấu trúc, chúng ta ngăn chặn bản thân lặp lại những sai lầm của quá khứ của chúng ta.

Bằng cách làm việc với các truy vấn truyền thông theo cách này, bạn không cần phải học một phương pháp hoặc cấu trúc hoàn toàn mới cho các kiểu dáng của mình. Về cơ bản chúng ta đang thực hiện cách tiếp cận CSS mô-đun và áp dụng nó vào các truy vấn truyền thông của chúng tôi, điều này sẽ cảm thấy khá tự nhiên.

Chúng tôi cũng đang tạo CSS sạch hơn với sự trùng lặp ít hơn các lớp CSS trên các tệp và tiết kiệm thời gian phát triển bằng cách loại bỏ nhu cầu kiểm tra nhiều vị trí khi sửa đổi.

Bài viết này ban đầu được xuất bản trong mạng lưới , Tạp chí cho các nhà thiết kế và nhà phát triển web chuyên nghiệp. Theo dõi mạng tại đây .

Những bài viết liên quan:

Tạo hình ảnh động CSS Cool UI với Sass
10 điều bạn không bao giờ biết bạn có thể làm với sass
Công cụ thiết kế web để giúp bạn làm việc thông minh hơn

Cách cấu trúc các truy vấn phương tiện trong Sass

Css trong quá khứ

Bộ tiền xử lý, quy ước đặt tên và CSS mô-đun

Cách đáp ứng vị trí phong cách

Truyền thông truy vấn subbling.

Truyền thông lồng nhau Bubbled

Phong cách đáp ứng sạch hơn

Cách - Các bài báo phổ biến nhất

Cách vẽ đầu: Hướng dẫn đầy đủ

Bắt đầu với khuếch tán

Tạo các bộ biểu tượng sản phẩm trong Illustrator

Vẽ một con số trong vòng năm phút

Các quy tắc của kiểu chữ Web đáp ứng

Xây dựng ứng dụng hoạt động ngoại tuyến

Cách tạo nhân vật hoạt hình trong rạp chiếu phim 4D

Kết cấu một droid k-2so bị mòn đích thực

Thể loại