Kiedy buduję strony, czy chcę mieć indywidualne arkusze stylów dla każdej strony lub jednego dużego arkusza stylów dla całej witryny? Do celów ładowania, czy nie chciałbyś mieć mniejszego arkusza stylów, dlatego tworzenie indywidualnych jest lepszą praktyką?Jeden plik CSS lub poszczególne pliki CSS dla każdej strony?
Użyj jednego pliku, pliki CSS są buforowane, a zatem zmniejszają potrzebę pobierania nowego pliku dla każdej odwiedzanej strony.
Aby pomóc, zazwyczaj uderzam swoim CSS o numer CSS cleaner, aby zmniejszyć jego rozmiar, dodatkowo można również GZip CSS using .htaccess, dzięki czemu jest on jeszcze mniejszy.
Wreszcie umieszczenie wszystkich CSS w jednym pliku sprawi, że wprowadzenie w całym systemie zmian w prezentacji będzie łatwiejsze w przyszłości (cały powód, dla którego używamy CSS w pierwszej kolejności), ułatwi także debugowanie.
Edycja maja 2017
wiele się zmieniło w 7+ lat i każdy, patrząc na to odpowiedź powinna rozważyć badanie nowszych metod dostarczania aktywów, szczególnie teraz korzystać z HTTP2 i Preprocesory są bardziej powszechne.
Głównym celem arkusza stylów jest umożliwienie zmiany projektu na wszystkich stronach. Jeśli masz h1 {color:red;} na każdej stronie, a później chcesz ją zmienić na niebieską, musisz edytować arkusz stylów każdej strony. Za pomocą jednego arkusza stylów można zmienić kolor i odzwierciedlić go w całej witrynie.
Ponadto arkusz stylów będzie przechowywany w pamięci podręcznej na komputerze użytkownika, a nie pobierany z każdej strony.
Jeśli chcesz mieć spójny styl na wszystkich stronach witryny, użyj jednego arkusza stylów dla wszystkich popularnych stylów. W przeciwnym razie może być trudno utrzymać wiele arkuszy stylów. Zmiany będą musiały zostać dodane do każdego z wielu arkuszy stylów.
Arkusze stylów, które są używane tylko na jednej stronie, mogą być umieszczane w oddzielnych arkuszach stylów. Może to być najbardziej przydatne w przypadku dużych jednostronicowych arkuszy stylów i/lub arkuszy stylów dla rzadko odwiedzanych stron internetowych.
Twoje arkusze stylów nie zostaną ponownie załadowane na każdym odświeżeniu strony. Jeśli odwołasz się do dużego arkusza stylów ogólnego zastosowania na stronie głównej, zostanie on pobrany tylko raz i będzie przechowywany w pamięci podręcznej do wykorzystania w przyszłości.
Ponieważ jestem rzeczywiście rzeczywiste programista web (web programowania Java rzeczy, a nie skryptów takich jak PHP) muszę dać opinię Nigdy nie widziałem żadnej rzeczywistej web projektantowi podać:
proszę śmiało podziel swoje pliki CSS na wiele partycji logicznych, gdzie tylko to możliwe! Jeśli masz bardzo stylizowany stół, zbieraj jego pliki CSS do jednego pliku, zbieraj podstawowe style rzeczywistej strony do innego pliku, dodaj te menu nawigacji CSS: s do trzeciego itd. I tak dalej. Możesz oczywiście ponownie użyć poszczególnych CSS: s tam, gdzie są one istotne, ale DO NOT po prostu wpakuj wszystko do jednego dużego pliku!
Mogę się z tobą zgodzić, ale redukcja żądań HTTP jest cenna, więc nadal chcesz połączyć wszystkie te pliki css, zanim dostarczysz je klientowi – Jiaaro
Inna propozycja, używaj wielu arkuszy stylów podczas tworzenia i posiadasz mechanizm, który połączy wszystkie arkusze stylów w jeden plik CSS do wdrożenia produkcyjnego. Może to wymagać trochę dodatkowego kodowania i dodatkowych skryptów, które należy uruchomić przed wdrożeniem produkcyjnym, ale byłoby idealne zarówno do zastosowań programistycznych, jak i produkcyjnych. Jeśli proces jest właściwie zautomatyzowany (co nie jest trudne do osiągnięcia), nie spowoduje to również żadnych błędów.
"Czy do celów załadunkowych nie chciałbyś mieć mniejszego arkusza stylów, a zatem tworzenie indywidualnych jest lepszą praktyką?"
Może to mieć efekt odwrotny, ponieważ za pomocą 1 arkusza stylów można go buforować, a następnie ładować z łatwością, podczas gdy stale ładuje nowy plik CSS dla każdej strony za pomocą tej metody.
Większość witryn nie musi zawierać więcej niż jednego arkusza stylów dla jednego rodzaju nośnika. Jeśli jednak witryna drastycznie różni się pod względem projektu, sugerowałbym posiadanie podstawowego arkusza stylów, który ma wszystkie wspólne właściwości, a następnie pomocniczego arkusza stylów dla każdej strony, która zawiera różnice.
Należy używać tylko wtedy, gdy zmiany CSS są wystarczająco duże, aby zagwarantować użycie oddzielnych arkuszy stylów.
natknąłem tego wątku poszukuje samo pytanie .. Moje myśli było zorganizować tak ..
layout.css < --- dla struktury witryny, linki, nagłówki itp, które są wspólne dla wszystkich teren. form.css < - generyczne style forma reset.css < - resetuje wszystkie dokumenty, jeśli używasz ich
i obecnie używam pages.css dla wszystkich stylów stronie ..
lub
homepage.css about.css gallery.css
aby uniknąć konieczności używania zbyt wielu unikalnych identyfikatorów i klas do osiągnięcia arkusza stylów, który zawiera wszystkie teh style witryny jest to również dobry pomysł, aby dodać klasę do ciała każdej strony i Ustalenie, która strona to jest, np.
umożliwi ci używanie tych samych klas i identyfikatorów na każdej stronie. np. używając powyższej techniki możesz nadać obszarowi treści na stronie inny styl za pomocą .productPage #contentArea, więc nie będziesz musiał umieszczać nowego id #productPage_contentArea w html strony. – wheresrhysCo powiesz na ogromne pliki CSS i wykorzystanie pamięci na urządzeniach mobilnych? Czy myślisz, że nadal masz rację w przypadku urządzeń mobilnych? Ogromne spowolnienie działania CSS na urządzeniach mobilnych? Co sądzisz o plikach JavaScript, czy lepiej je mieć? –
Redukcja żądań HTTP jest najważniejszą rzeczą do zrobienia, gdy chce poprawić wydajność witryny. Duży plik CSS nie zajmie zbyt wiele czasu, aby przeglądarka mobilna mogła parsować/renderować, jednak pobranie większego pliku będzie oczywiście trwało dłużej (jednak ogólnie rzecz biorąc), o wiele ważniejsze jest posiadanie jednego dużego pliku, niż wiele mniejszych plików. Ponieważ żądania HTTP są powolne. Wyszukaj anatomię żądania HTTP i segmentację TCP. –