Najlepszy sposób na włączenie CSS? Dlaczego warto korzystać z @import?

Zasadniczo zastanawiam się, jaka jest zaleta / cel wykorzystania @importdo importowania arkuszy stylów do istniejącego arkusza stylów w porównaniu z dodaniem kolejnego ...

<link rel="stylesheet" type="text/css" href="" />

na czele dokumentu?

Z punktu widzenia szybkości strony @importprawie nigdy nie należy używać pliku CSS, ponieważ może to uniemożliwić jednoczesne pobieranie arkuszy stylów. Na przykład, jeśli arkusz stylów A zawiera tekst:

@import url("stylesheetB.css");

pobieranie drugiego arkusza stylów może się rozpocząć dopiero po pobraniu pierwszego arkusza stylów. Jeśli z drugiej strony oba arkusze stylów są przywoływane w <link>elementach na głównej stronie HTML, oba można pobrać jednocześnie. Jeśli oba arkusze stylów są zawsze ładowane razem, pomocne może być również połączenie ich w jeden plik.

Czasami zdarzają się sytuacje, w których @importjest to właściwe, ale ogólnie są one wyjątkiem, a nie regułą.

Będę grał adwokata diabła, ponieważ nienawidzę tego, gdy ludzie zbytnio się zgadzają.

1. Jeśli potrzebujesz arkusza stylów zależnego od innego, użyj @import. Wykonaj optymalizację w oddzielnym kroku.

Istnieją dwie zmienne, które optymalizujesz w danym momencie - wydajność twojego kodu i wydajność programisty . W wielu, jeśli nie w większości przypadków, ważniejsze jest zwiększenie wydajności programisty, a dopiero potem zwiększenie wydajności kodu .

Jeśli masz jeden arkusz stylów, który zależy od innego, najbardziej logicznym rozwiązaniem jest umieszczenie ich w dwóch osobnych plikach i użycie @import. To będzie najbardziej logiczne dla następnej osoby, która spojrzy na kod.

(Kiedy taka zależność miałaby wystąpić? Moim zdaniem jest to dość rzadkie - zwykle wystarczy jeden arkusz stylów. Istnieją jednak logiczne miejsca, w których można umieszczać różne elementy w różnych plikach CSS :)

• Temat: jeśli masz różne schematy kolorów lub motywy dla tej samej strony, mogą one udostępniać niektóre, ale nie wszystkie elementy.
• Podskładniki: wymyślony przykład - powiedzmy, że masz stronę restauracji, która zawiera menu. Jeśli menu różni się bardzo od reszty strony, łatwiej będzie utrzymać go, jeśli będzie w swoim własnym pliku.

Zwykle arkusze stylów są niezależne, więc rozsądne jest ich uwzględnienie przy użyciu <link href>. Jeśli jednak są one zależną hierarchią, powinieneś zrobić coś, co ma najbardziej logiczny sens.

Python używa importu; Zastosowania C obejmują; JavaScript wymaga. CSS ma import; kiedy go potrzebujesz, użyj go!

2. Po przejściu do punktu, w którym strona musi być skalowana, połącz cały CSS.

Wiele żądań CSS dowolnego rodzaju - czy to za pośrednictwem linków, czy @importów - stanowi złą praktykę w przypadku witryn o wysokiej wydajności. Gdy znajdziesz się w punkcie, w którym liczy się optymalizacja, cały Twój CSS powinien przepływać przez minifier. Cssmin łączy instrukcje importu; Jak wskazuje @Brandon, chrząstka ma wiele opcji, aby to zrobić. ( Zobacz także to pytanie ).

Gdy jesteś na etapie zminimalizowanym, <link>jest to szybsze, jak zauważyli ludzie, więc co najwyżej link do kilku arkuszy stylów i nie importuj @, jeśli to w ogóle możliwe.

Zanim jednak strona osiągnie skalę produkcyjną, ważniejsze jest, aby kod był zorganizowany i logiczny, niż by działał nieco szybciej.

Ze @importwzględu na szybkość najlepiej NIE używać do umieszczania CSS na stronie. Zobacz ten doskonały artykuł, aby dowiedzieć się, dlaczego nie: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Ponadto często trudniej jest zminimalizować i połączyć pliki css, które są obsługiwane za pomocą znacznika @import, ponieważ skrypty minify nie mogą „oderwać” linii @import z innych plików css. Gdy dodasz je jako znaczniki <link, możesz użyć istniejących modułów minify php / dotnet / java do przeprowadzenia minimalizacji.

Więc: użyj <link />zamiast @import.

przy użyciu metody link arkusze stylów są ładowane równolegle (szybciej i lepiej), a prawie wszystkie przeglądarki obsługują link

import ładuje wszystkie dodatkowe pliki css jeden po drugim (wolniej) i może dać ci Flash of Unstyled Content

@Nebo Iznad Mišo Grgur

Poniżej podano wszystkie poprawne sposoby korzystania z @import

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

źródło: https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Nie ma tak naprawdę dużej różnicy w dodawaniu arkusza stylów css w głowie w porównaniu do korzystania z funkcji importowania. Używanie @importjest zwykle używane do łączenia arkuszy stylów, dzięki czemu można je łatwo rozszerzyć. Można go użyć do łatwej zamiany różnych układów kolorów, na przykład w połączeniu z niektórymi ogólnymi definicjami css. Powiedziałbym, że główną zaletą / celem jest rozszerzalność.

Zgadzam się również z komentarzem xbonez, że przenośność i łatwość konserwacji to dodatkowe korzyści.

Są bardzo podobne. Niektórzy twierdzą, że @import jest łatwiejszy w utrzymaniu. Jednak każdy @import będzie Cię kosztował nowe żądanie HTTP w taki sam sposób, jak przy użyciu metody „link”. Zatem w kontekście prędkości nie jest szybsza. I jak powiedział „zmierzch”, nie ładuje się jednocześnie, co jest upadkiem.

Jednym z miejsc, w których korzystam z @import, są dwie wersje strony, angielska i francuska. Zbuduję swoją stronę w języku angielskim, używając main.css. Kiedy skompiluję wersję francuską, połączę się z francuskim arkuszem stylów (main_fr.css). Na górze francuskiego arkusza stylów zaimportuję plik main.css, a następnie ponownie zdefiniuję szczegółowe reguły tylko dla części, których potrzebuję inaczej w wersji francuskiej.

Cytat z http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

Głównym celem metody @import jest użycie wielu arkuszy stylów na stronie, ale tylko jednego linku w <head>. Na przykład korporacja może mieć globalny arkusz stylów dla każdej strony w witrynie, a podsekcje mają dodatkowe style, które dotyczą tylko tej podsekcji. Łącząc się z arkuszem stylów podsekcji i importując style globalne u góry tego arkusza stylów, nie musisz utrzymywać gigantycznego arkusza stylów ze wszystkimi stylami witryny i każdej podsekcji. Jedynym wymaganiem jest to, że wszelkie reguły @import muszą znajdować się przed pozostałymi regułami stylu. I pamiętaj, że dziedziczenie może nadal stanowić problem.

Czasami musisz użyć @import zamiast inline. Jeśli pracujesz nad złożoną aplikacją, która ma 32 lub więcej plików css i musisz obsługiwać IE9, nie ma wyboru. IE9 ignoruje dowolny plik css po pierwszych 31 i obejmuje to i wbudowany css. Jednak każdy arkusz może importować 31 innych.

Istnieje wiele DOBRYCH powodów, aby używać @import.

Jednym z ważnych powodów korzystania z @import jest projektowanie w różnych przeglądarkach. Zaimportowane arkusze są na ogół ukryte przed wieloma starszymi przeglądarkami, co pozwala zastosować określone formatowanie w bardzo starych przeglądarkach, takich jak Netscape 4 lub starsze serie, Internet Explorer 5.2 dla komputerów Mac, Opera 6 i starsze oraz IE 3 i 4 dla komputerów PC.

Aby to zrobić, w pliku base.css możesz mieć:

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

W importowanym arkuszu niestandardowym (newerbrowsers.css) po prostu zastosuj nowszy styl kaskadowy:

html body {
  font-size:1em;
}

Używanie jednostek „em” jest lepsze niż jednostek „px”, ponieważ pozwala na rozciąganie czcionek i projektu w zależności od ustawień użytkownika, podczas gdy starsze przeglądarki radzą sobie lepiej z pikselami (które są sztywne i nie można ich zmienić w ustawieniach użytkownika przeglądarki) . Zaimportowany arkusz nie będzie widoczny w większości starszych przeglądarek.

Możecie tak, kogo to obchodzi! Spróbuj przejść do większych, przestarzałych systemów rządowych lub korporacyjnych, a nadal zobaczysz używane starsze przeglądarki. Ale to naprawdę po prostu dobry projekt, ponieważ przeglądarka, którą dzisiaj kochasz, również będzie kiedyś przestarzała i przestarzała. A użycie CSS w ograniczony sposób oznacza, że ​​masz teraz jeszcze większą i rosnącą grupę klientów, które nie działają dobrze z twoją witryną.

Korzystając z @import, twoja kompatybilność z wieloma przeglądarkami osiągnie teraz 99,9% nasycenia po prostu dlatego, że tak wiele starszych przeglądarek nie będzie czytać zaimportowanych arkuszy. Gwarantuje to zastosowanie podstawowego prostego zestawu czcionek do ich html, ale nowsze wersje używają bardziej zaawansowanego CSS. Umożliwia to dostęp do treści starszym agentom bez uszczerbku dla bogatych wyświetlaczy wizualnych potrzebnych w nowszych przeglądarkach komputerowych.

Pamiętaj, że nowoczesne przeglądarki bardzo dobrze buforują struktury HTML i CSS po pierwszym wywołaniu strony internetowej. Wiele połączeń z serwerem nie jest tak wąskim gardłem, jak kiedyś.

Megabajty i megabajty JavaScript API i JSON przesłane na urządzenia inteligentne i źle zaprojektowane znaczniki HTML, które nie są spójne między stronami, są obecnie głównym czynnikiem powolnego renderowania. Jesteś przeciętną stroną z wiadomościami Google, która zawiera ponad 6 megabajtów ECMAScript, aby po prostu wyrenderować odrobinę tekstu! lol

Kilka kilobajtów buforowanego CSS i spójnego czystego HTML z mniejszymi śladami javascript zostanie renderowanych w kliencie użytkownika z błyskawiczną szybkością po prostu dlatego, że przeglądarka buforuje zarówno spójne znaczniki DOM i CSS, chyba że zdecydujesz się manipulować i zmienić to za pomocą sztuczek cyrkowych javascript.

Myślę, że kluczem do tego są dwa powody, dla których piszesz wiele arkuszy stylów CSS.

1. Piszesz wiele arkuszy, ponieważ różne strony Twojej witryny wymagają różnych definicji CSS. A przynajmniej nie wszystkie z nich wymagają wszystkich definicji CSS wymaganych przez inne strony. Dzielisz więc pliki CSS, aby zoptymalizować, które arkusze są ładowane na różnych stronach i uniknąć ładowania zbyt wielu definicji CSS.
2. Drugim powodem, który przychodzi na myśl, jest to, że twój CSS robi się tak duży, że staje się niezdarny w obsłudze, a aby ułatwić utrzymanie dużego pliku CSS, dzielisz je na wiele plików CSS.

Z pierwszego powodu obowiązywałby dodatkowy <link>tag, ponieważ pozwala on załadować inny zestaw plików CSS dla różnych stron.

Z drugiego powodu @importinstrukcja wydaje się najbardziej przydatna, ponieważ otrzymujesz wiele plików CSS, ale ładowane pliki są zawsze takie same.

Z punktu widzenia czasu ładowania nic się nie różni. Przeglądarka musi sprawdzać i pobierać oddzielne pliki CSS bez względu na to, jak są one implementowane.

Użyj @import w swoim CSS, jeśli używasz RESETU CSS, takiego jak Eric CS Meyer Reset CSS v2.0, więc wykonuje swoją pracę przed zastosowaniem CSS, zapobiegając w ten sposób konfliktom.

Myślę, że @import jest najbardziej przydatny podczas pisania kodu dla wielu urządzeń. Dołącz instrukcję warunkową, aby uwzględnić tylko styl danego urządzenia, a następnie załadowany zostanie tylko jeden arkusz. Nadal możesz używać znacznika link, aby dodać dowolne wspólne elementy stylu.

Wystąpił „wysoki szczyt” połączonych arkuszy stylów, które możesz dodać. Chociaż dodanie dowolnej liczby połączonych skryptów JavaScript nie stanowiło problemu dla mojego darmowego dostawcy hosta, po podwojeniu liczby zewnętrznych arkuszy stylów miałem awarię / spowolnienie. Odpowiednim przykładem kodu jest:

@import 'stylesheetB.css';

Uważam więc, że przydatne jest posiadanie dobrej mapy mentalnej, jak wspomniał Nitram, przy jednoczesnym sztywnym kodowaniu projektu. Życzenia powodzenia. I wybaczam za angielskie błędy gramatyczne, jeśli takie istnieją.

Nie ma prawie żadnego powodu, aby używać @import, ponieważ ładuje każdy importowany plik CSS osobno i może znacznie spowolnić twoją stronę. Jeśli interesuje Cię optymalny sposób radzenia sobie z CSS (jeśli chodzi o szybkość strony), oto jak należy postępować z całym kodem CSS:

• Otwórz wszystkie pliki CSS i skopiuj kod każdego pliku
• Wklej cały kod pomiędzy jednym tagiem STYLE w nagłówku HTML strony
• Nigdy nie używaj CSS @import ani oddzielnych plików CSS do dostarczania CSS, chyba że masz dużą ilość kodu lub istnieje szczególna potrzeba.

Bardziej szczegółowe informacje tutaj: http://www.giftofspeed.com/optimize-css-delivery/

Powodem tego, że powyższe działa najlepiej, jest to, że tworzy mniej żądań do obsługi przez przeglądarkę i może natychmiast rozpocząć renderowanie CSS zamiast pobierania osobnych plików.

Może to pomóc deweloperowi PHP. Poniższe funkcje usuwają spacje, usuwają komentarze i łączą wszystkie pliki CSS. Następnie włóż go do <style>znacznika w nagłówku przed załadowaniem strony.

Poniższa funkcja usunie komentarze i zminimalizuje przekazany w css. Jest sparowany w połączeniu z następną funkcją.

<?php
function minifyCSS($string)
{
    // Minify CSS and strip comments

    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);

    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);

    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);

    # Return Minified CSS
    return $string;
}
?>

Wywołujesz tę funkcję w nagłówku dokumentu.

<?php
function concatenateCSS($cssFiles)
{
    // Load all relevant css files

    # concatenate all relevant css files
    $css = '';
    foreach ($cssFiles as $cssFile)
    {
        $css = $css . file_get_contents("$cssFile.css");
    }

    # minify all css
    $css = minifyCSS($css);
    echo "<style>$css</style>";
}
?>

Uwzględnij funkcję concatenateCSS()w głowie dokumentu. Przechodzą w tablicy z nazwiskami swoich stylów ze swojej drodze tj css/styles.css. Nie musisz dodawać rozszerzenia, .cssponieważ jest ono dodawane automatycznie w powyższej funkcji.

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>