Nơi đặt các truy vấn phương tiện CSS3?

Question

Tôi đang có một cuộc tranh luận triết học với bản thân mình về nơi tốt nhất để đặt các truy vấn phương tiện trong các tờ định kiểu. Tôi đang cố gắng để cấu trúc CSS của tôi modularly (như OOCSS hoặc SMACSS, vv). Với bối cảnh đó, tôi thấy hai lựa chọn:

1. Đặt tất cả các truy vấn phương tiện cùng nhau trong một biểu định kiểu chính hoặc một phần của biểu định kiểu chính.
2. Đặt truy vấn phương tiện bên dưới các đối tác cơ sở của chúng. Ví dụ: nếu tôi có một mô-đun được gọi là "tin tức-mục", tôi có thể đặt bất kỳ kiểu truy vấn phương tiện cần thiết nào ngay bên dưới định nghĩa của mô-đun đó.

Tôi nghiêng về phía sau, nhưng điều đó có nghĩa là tôi có nhiều truy vấn phương tiện riêng biệt hơn (truy vấn riêng cho mỗi khối logic của CSS yêu cầu điều chỉnh đáp ứng).

Bất kỳ suy nghĩ nào về điều này?

Answer 1

Làm thế nào về việc sử dụng các truy vấn phương tiện truyền thông chỉ để tải thiết bị stylesheets cụ

như:

@import url(mydevice.css) this and (that); 

hay:

<link rel="stylesheet" media="only this and (that)" href="mydevice.css" /> 

... nếu bạn đang xem xét việc điều chỉnh thiết bị cụ thể như một loại "subthemes" để bố trí chính (chỉ cần ghi đè lên một số thuộc tính), điều này sẽ có ý nghĩa với tôi, quá.

Answer 2

Với Sass dễ dàng hơn khi sử dụng truy vấn phương tiện ngay bên dưới các đối tác. Nhưng nếu CSS của bạn cũng được nhận xét trong các mô-đun của bạn, tôi không thấy một vấn đề để đặt các truy vấn dưới đây vì điều đó sẽ dễ tìm.

Bạn sẽ kết thúc viết thêm một chút mã để trả lại các truy vấn, nhưng không phải là một vấn đề lớn.

Answer 3

Phương pháp tiếp cận # 2 hoạt động tốt hơn cho tôi.

Khi tôi là người mới, tôi đang sử dụng Phương pháp tiếp cận # 1 - Tôi đã viết các truy vấn phương tiện của mình cùng nhau (ở cuối biểu định kiểu của tôi hoặc trong một tệp khác).

.header { ... } 
.news-item { ... } 
.footer { ... } 

/** 
* ... 
* 
* bla bla, imagine a huge amount of styles here 
* 
* ... 
*/ 

/** All style tweaks for screens < 1024px */ 
@media screen and (max-width: 1024px) { 
    .header { ... } 
    .news-item { ... } 
} 

Phương pháp này có một vài nhược điểm. Dựa trên kinh nghiệm của tôi, điều đáng chú ý nhất là khả năng bảo trì là một khó khăn. Lý do chính: .news-item logic được trải rộng trên nhiều dòng CSS không liên quan.

Sau đó, tự nhiên, tôi quyết định giữ các phong cách liên quan lại với nhau. Cách tiếp cận # 2:

/** Header's styles and media queries */ 
.header { 
    ... 
} 
@media screen and (max-width: 1024px) { 
    .header { ... } 
} 
@media screen and (max-width: 720px) { 
    .header { ... } 
} 

/** News-item's styles and media queries */ 
.news-item { 
    ... 
} 
@media screen and (max-width: 1024px) { 
    .news-item { ... } 
} 
@media screen and (max-width: 720px) { 
    .news-item { ... } 
} 

/** ... and so on */ 

Tuy nhiên, trong phương pháp này, lặp đi lặp lại phương tiện truyền thông truy vấn max-width giá trị tất cả các xung quanh không nhìn đủ duy trì. Tôi đã giải quyết vấn đề này bằng cách sử dụng bộ xử lý trước CSS (như SASS) cho phép tôi thay thế tất cả chúng bằng các biến và xác định chúng một lần.

Để tăng cường khả năng bảo trì và làm cho các định nghĩa này trở nên thanh lịch hơn nhiều, tôi bắt đầu sử dụng sự trừu tượng trên các Truy vấn phương tiện.

Nếu bạn quan tâm biết thêm chi tiết, xin vui lòng read on my blog post :-)

Answer 4

Có thể bạn có thể thử css variables, đó là nguồn gốc hỗ trợ tái sử dụng css của bạn!

:root { 
 
    --main-color: #F06D06; 
 
} 
 

 
.main-header { 
 
    color: var(--main-color); 
 
} 
 
.main-footer { 
 
    background-color: var(--main-color); 
 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care

https://css-tricks.com/difference-between-types-of-css-variables/