Gdzie umieścić zapytania o media CSS3?

Question

Mam filozoficzną debatę ze sobą nad najlepszym miejscem do umieszczania zapytań o media w arkuszach stylów. Próbuję modularyzować mój CSS w sposób modułowy (jak OOCSS lub SMACSS, itp.). Biorąc pod uwagę ten kontekst, widzę dwie możliwości:

1. Umieść wszystkie zapytania o media w osobny arkusz stylów lub sekcję głównego arkusza stylów.
2. Umieść zapytania o media pod swoimi odpowiednikami. Na przykład, jeśli mam moduł o nazwie "news-item", mogę umieścić wszelkie niezbędne style zapytań o media tuż poniżej definicji tego modułu.

Pochylam się do tego drugiego, ale oznaczałoby to, że będę miał znacznie więcej oddzielnych zapytań o media (osobne dla każdego logicznego bloku CSS wymagającego elastycznego dopasowania).

Jakieś przemyślenia na ten temat?

Answer 1

Jak o użyciu zapytań o media po prostu załadować Device Specific stylów

jak:

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

czyli

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

... jeśli szukasz w szczególnych regulacji urządzeń jako rodzaj "podtematów" do głównego layoutu (tylko nadpisywanie niektórych właściwości), to też miałoby dla mnie sens.

Answer 2

Dzięki Sass łatwiejsze jest korzystanie z zapytań o media bezpośrednio pod odpowiednikami. Ale jeśli twój CSS jest dobrze skomentowany w twoich modułach, nie widzę problemu z postawieniem tych zapytań poniżej, ponieważ będzie to łatwe do znalezienia.

Skończy się na pisaniu trochę więcej kodu, przepisując zapytania, ale nie jest to wielka sprawa.

Answer 3

Podejście nr 2 działa lepiej dla mnie.

Kiedy byłem nowicjuszem, używałem Podejście nr 1 - Piszę razem moje zapytania o media (na dole mojego arkusza stylów lub w innym pliku).

.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 { ... } 
} 

Takie podejście ma kilka wad. Bazując na moim doświadczeniu, najbardziej godnym uwagi jest to, że konserwacja jest trudna. łatwość konserwacji jest trudna. Główny powód: logika .news-item jest rozłożona na wiele niepowiązanych linii CSS.

Później, naturalnie, postanowiłem zachować powiązane style. Podejście nr 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 */ 

Jednakże w tym podejściu, powtarzając mediów odpytuje max-width wartości wszystko wokół nie wygląda na tyle utrzymaniu. Rozwiązałem ten problem za pomocą wstępnego procesora CSS (takiego jak SASS), który pozwala mi zastąpić wszystkie zmienne i zdefiniować je raz.

Aby zwiększyć łatwość obsługi i sprawić, aby te definicje były o wiele bardziej eleganckie, zacząłem używać abstrakcji w górnej części zapytań o media.

Jeśli jesteś zainteresowany więcej informacji, proszę read on my blog post :-)

Answer 4

Może można spróbować css variables, które jest natywne wsparcie ponownie użyć CSS!

: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/