Czy powinienem podzielić duży plik zapytań o media CSS na osobne pliki dla każdego rozmiaru ekranu?

Pracuję nad responsywną witryną projektową, aby dostarczać treści dla wszystkich rozmiarów ekranu. Mam zapytania o media dla 5 różnych „kroków”, a plik CSS ma około 30 Kb.

Czy lepiej byłoby podzielić to na osobne pliki i uczynić je podobnymi do tego:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

czy powinienem przechowywać je w jednym pliku CSS?

Aktualizacja: Chciałem tylko dodać, że moim głównym zmartwieniem była szybkość otwierania / renderowania stron w różnych przeglądarkach / urządzeniach, a nie łatwość programowania.

Myślę, że to naprawdę zależy od tego, co uważasz za najłatwiejsze w rozwoju i co pomaga utrzymać porządek w arkuszu stylów.

Jedynym prawdziwym minusem, który mogę wymyślić podczas dzielenia, jest to, że jeśli atrybut elementu pojawi się we wszystkich arkuszach stylów, musisz zaktualizować 5 oddzielnych plików, aby go zmienić (zamiast pojawiać się obok siebie w jednym miejscu).

Zgodnie z odpowiedzią na ten post, przeglądarki niezależnie od tego pobiorą wszystkie arkusze stylów, więc dzielenie rozdzielczości nie oznacza oszczędności pasma: /programming/16657159/when-using-media-queries-does-a -phone-load-non-relevent-queries-and-images

Zależy to nieco od tego, co chcesz osiągnąć: czy starasz się przyspieszyć ładowanie strony, czy też ułatwiasz rozwój?

Jeśli celujesz w to drugie, możesz użyć wielu arkuszy, ale to wszystko jest kwestią preferencji. Najłatwiej jest mi użyć jednego dużego pliku, ponieważ daje to przegląd wszystkich zadeklarowanych stylów.

Jeśli chcesz szybciej ładować stronę, najlepszym rozwiązaniem byłoby zminimalizowanie liczby żądań, ponieważ narzut jest dość duży. Ponadto możesz zachować wersję programistyczną dla siebie i podawać zminimalizowane css w sieci (uważam YUI za dobrą metodę: http://www.refresh-sf.com/yui/ ).

Ponadto postaram się zoptymalizować sam css. Możesz spróbować połączyć klasy, które są bardzo podobne, na przykład:

.bold-and-italic { font-weight: bold; text-style: italic; }

Można przekształcić w:

.bold { font-weight: bold; }
.italic { text-style: italic; }

Trzeba tylko nieznacznie zmienić HTML z <span class="bold-and-italic">foo bar</span>na<span class="bold italic">foo bar</span>

Mogę zdecydowanie zasugerować, aby spojrzeć na Bootstrap ( http://getbootstrap.com ), ci faceci wykonali świetną robotę, dzieląc klasy na wiele „podklas”.

Mam nadzieję, że to pomoże.

Prawdopodobnie najlepiej jest mieć tylko jeden plik CSS, ale aby go zminimalizować i zgzipować. Zakładając, że twoje 30KB są przed tym, prawdopodobnie zmniejszysz rozmiar pliku do około 5 KB z minimalizacją (usuwanie białych znaków) i gzippingiem.

Rozdzielenie prawdopodobnie przyspieszy, ale tylko pod pewnymi warunkami.

• Musisz upewnić się, że za każdym razem ładowany jest tylko jeden arkusz stylów - w przeciwnym razie potrzebujesz dwóch lub więcej żądań HTTP, które same mają narzut, co przynajmniej częściowo zniweczy zysk z mniejszego rozmiaru pliku. Aby to zrobić, nie wystarczy po prostu podzielić arkusz stylów i wstawić wiele <link>tagów z różnymi atrybutami multimediów, przeglądarki wydają się ładować wszystkie <link>edytowane arkusze stylów niezależnie od zapytań o media (dzięki @cimmanon za te informacje, nie wiedziałem o tym) .
• Liczba reguł CSS współużytkowanych przez arkusze stylów musi być mała - w przeciwnym razie każdy z wielu arkuszy stylów musiałby zawierać wszystkie wspólne reguły, a zatem miałby prawie rozmiar oryginału.
• Używasz preprocesora CSS (lub czegoś podobnego), więc można zarządzać takimi samymi fragmentami kodu w 5 arkuszach stylów.

Ponadto: nie optymalizuj przedwcześnie. Rób to tylko, jeśli masz problemy z wydajnością.

Powinieneś podzielić swoje pliki CSS na podstawie zapytań o media, ponieważ pliki CSS blokują wyświetlanie.

Gdy przeglądarka konstruuje DOM, musi najpierw poczekać i załadować wszystkie pliki CSS. Skrócisz czas ładowania strony, jeśli niektóre pliki CSS są ładowane tylko na podstawie określonych zapytań o media.

Dotyczy to również dodawania asynchronizacji do znacznika skryptu JavaScript; np <script src='myfile.js' async></script>.:

DOM nie musi czekać na załadowanie pliku JS. Dodaj asynchronizację tylko wtedy, gdy konstrukcja twojego DOM nie potrzebuje żadnego z tych skryptów JavaScript przy obciążeniu.

Byłbym skłonny to powiedzieć.

Do produkcji zawsze przechowuj je w jednym pliku; powodem jest to, że jest bardziej wydajna dla przeglądarki, i to powinno być twoim głównym zainteresowaniem (IMO) podczas przechodzenia od rozwoju do produkcji.

Rozwój to inny czajnik ryb. Mam tendencję do dzielenia zapytań o media, tak aby były według dowolnego elementu, np .:

.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
    .foo { // .. some differentcss }
}

Jak zwykle, jeśli zmieniam element, nie chcę rozglądać się po całym CSS (chociaż możesz użyć czegoś takiego jak grep ...).

Ale jedno powiedziałbym, że warto wziąć pod uwagę samą stronę, proces rozwoju i soforth. Jeśli naprawdę uważasz, że warto je rozdzielić na pliki o rozmiarze ekranu, spróbuj. Zrób kopię strony (jeśli to możliwe), baw się z nią - jeśli to ułatwi, skorzystaj z niej. Nie musisz przestrzegać jednego uniwersalnego paradygmatu tworzenia witryny.

Proste: użyj 1 arkusza stylów i po prostu dodaj do nich komentarze, aby łatwiej znaleźć i zmienić style CSS, np .:

//sheet 1 (mobile device 800 px)
code

//sheet 2 (mobile device 768 px)
code

//sheet 3 (mobile device 480 px)
code

//sheet 4 (desktop size 1024 px)
code

Jeśli chcesz, możesz użyć wielu arkuszy stylów i wywołać je dla każdego określonego rozmiaru.

Wolałbym spojrzeć na Bootstrap . Jest to 1 plik CSS, który zawiera cały CSS. Działa na prawie 99% przeglądarek i bardzo szybko reaguje.

Kliknij prezentację na żywo, aby powiększyć ( Ctrl += powiększyć, Ctrl -= pomniejszyć, Ctrl 0= normalny) lub otworzyć ją na telefonie komórkowym, aby zobaczyć, jak się renderuje.