Co jest takiego złego w CSS in-line?

Kiedy widzę kod startowy witryny i przykłady, CSS zawsze znajduje się w osobnym pliku o nazwie „main.css”, „default.css” lub „Site.css”. Jednak, kiedy koduję stronę, często kusi mnie, aby wrzucić CSS w jednej linii z elementem DOM, na przykład ustawiając „float: right” na obrazie. Mam wrażenie, że jest to „złe kodowanie”, ponieważ tak rzadko robi się to w przykładach.

Rozumiem, że jeśli styl zostanie zastosowany do wielu obiektów, rozsądnie jest postępować zgodnie z zasadą „Don't Repeat Yourself” (DRY) i przypisać go do klasy CSS, do której każdy element będzie się odnosił. Jeśli jednak nie będę powtarzał CSS w innym elemencie, dlaczego nie wstawić CSS w czasie, gdy piszę HTML?

Pytanie: czy użycie wbudowanego CSS jest uważane za złe, nawet jeśli będzie używane tylko w tym elemencie? Jeśli tak, dlaczego?

Przykład (czy to źle?):

<img src="myimage.gif" style="float:right" />

Konieczność zmiany 100 wierszy kodu, aby witryna wyglądała inaczej. To może nie mieć zastosowania w twoim przykładzie, ale jeśli używasz wbudowanego css do rzeczy takich jak

<div style ="font-size:larger; text-align:center; font-weight:bold">

na każdej stronie, aby oznaczyć nagłówek strony, byłoby znacznie łatwiej zachować jako

<div class="pageheader">  

jeśli nagłówek strony jest zdefiniowany w pojedynczym arkuszu stylów, więc jeśli chcesz zmienić wygląd nagłówka strony w całej witrynie, zmień css w jednym miejscu.

Jednak będę heretykiem i powiem, że na twoim przykładzie nie widzę problemu. Twoim celem jest zachowanie pojedynczego obrazu, który prawdopodobnie musi wyglądać dobrze na jednej stronie, więc umieszczenie rzeczywistego CSS w arkuszu stylów byłoby prawdopodobnie przesadą.

Zaletą posiadania innego pliku css są

1. Łatwe w utrzymaniu strony HTML
2. Zmiana wyglądu i stylu będzie łatwa i możesz mieć wsparcie dla wielu motywów na swoich stronach.
3. Twój plik css zostanie zapisany w pamięci podręcznej po stronie przeglądarki. Więc przyczynisz się trochę do ruchu internetowego, nie ładując niektórych kilobajtów danych za każdym razem, gdy strona jest odświeżana lub użytkownik nawiguje po Twojej witrynie.

Podejście html5 do szybkiego prototypowania CSS

lub: <style> tagi nie są już tylko dla głowy!

Hakowanie CSS

Powiedzmy, że debugujesz i chcesz zmodyfikować stronę css, sprawić, by określona sekcja wyglądała tylko lepiej. Zamiast tworzyć swoje style w linii w szybki, brudny i niemożliwy do utrzymania sposób, możesz zrobić to, co robię obecnie i przyjąć podejście etapowe.

Brak wbudowanego atrybutu stylu

Nigdy nie twórz swojego css inline, przez co mam na myśli: <element style='color:red'>lub nawet<img style='float:right'> Jest to bardzo wygodne, ale nie odzwierciedla później rzeczywistej specyfiki selektora w prawdziwym pliku css, a jeśli go zachowasz, będziesz żałować późniejszego obciążenia konserwacyjnego.

Prototyp z <style>zamiast

Tam, gdzie użyłbyś wbudowanego css, zamiast tego użyj <style> elementów na stronie . Wypróbuj to! Działa dobrze we wszystkich przeglądarkach, więc świetnie nadaje się do testowania, ale pozwala z wdziękiem przenosić takie css do globalnych plików css, kiedy tylko chcesz / potrzebujesz! (* pamiętaj tylko, że selektory będą miały specyficzność tylko na poziomie strony, a nie na poziomie witryny, więc uważaj, aby nie były zbyt ogólne) Tak samo czyste, jak w plikach css:

<style>
.avatar-image{
    float:right
}
.faq .warning{
    color:crimson;
}
p{
    border-left:thin medium blue;
    // this general of a selector would be very bad, though.
    // so be aware of what'll happen to general selectors if they go
    // global
}
</style>

Refaktoryzacja inline css innych osób

Czasami nawet nie jesteś problemem, a masz do czynienia z wbudowanym css innej osoby i musisz go refaktoryzować. To kolejne świetne zastosowanie dla<style> in, dzięki czemu możesz bezpośrednio usunąć wbudowany css i natychmiast umieścić go bezpośrednio na stronie w klasach lub identyfikatorach lub selektorach podczas refaktoryzacji. Jeśli jesteś wystarczająco ostrożny ze swoimi selektorami, możesz przenieść wynik końcowy do globalnego pliku css na końcu za pomocą kopiowania i wklejania.

Trochę trudno jest natychmiast przenieść każdy kawałek css do globalnego pliku css, ale dzięki <style>elementom na stronie mamy teraz alternatywy.

Oprócz innych odpowiedzi… Umiędzynarodowienie .

W zależności od języka treści - często trzeba dostosować stylizację elementu.

Jednym z oczywistych przykładów mogą być języki pisane od prawej do lewej.

Załóżmy, że użyłeś swojego kodu:

<img src="myimage.gif" style="float:right" />

Teraz powiedz, że chcesz, aby Twoja witryna obsługiwała języki rtl - potrzebujesz:

<img src="myimage.gif" style="float:left" />

Więc teraz, jeśli chcesz obsługiwać oba języki, nie ma możliwości przypisania wartości do wartości zmiennoprzecinkowej przy użyciu stylu wbudowanego.

W CSS można to łatwo załatwić za pomocą atrybutu lang

Możesz więc zrobić coś takiego:

img {
  float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
  float:left;
}

Próbny

Wbudowany CSS zawsze wygrywa, ma pierwszeństwo przed jakimkolwiek połączonym arkuszem stylów CSS. Może to spowodować ogromny ból głowy, jeśli i kiedy pójdziesz i napiszesz odpowiedni kaskadowy arkusz stylów, a twoje właściwości nie zostaną zastosowane poprawnie.

Szkodzi również twojej aplikacji semantycznie: CSS polega na oddzieleniu prezentacji od znaczników. Kiedy połączysz te dwie rzeczy razem, sprawy stają się znacznie trudniejsze do zrozumienia i utrzymania. Jest to zasada podobna do oddzielania kodu bazy danych od kodu kontrolera po stronie serwera.

Na koniec wyobraź sobie, że masz 20 takich tagów graficznych. Co się stanie, gdy zdecydujesz, że powinny zostać przeniesione w lewo?

Celem CSS jest oddzielenie treści od prezentacji. W twoim przykładzie mieszasz treść z prezentacją i może to zostać uznane za szkodliwe.

Korzystanie z wbudowanego CSS jest znacznie trudniejsze w utrzymaniu.

W przypadku każdej właściwości, którą chcesz zmienić, użycie wbudowanego kodu CSS wymaga wyszukania odpowiedniego kodu HTML, zamiast po prostu zaglądania do jasno zdefiniowanych i, miejmy nadzieję, dobrze zorganizowanych plików CSS.

Dotyczy to tylko kodu pisanego odręcznie. Jeśli generujesz kod, myślę, że w porządku jest używać tu i wtedy stylów wbudowanych, szczególnie w przypadkach, gdy elementy i kontrolki wymagają specjalnego traktowania.

DRY to dobra koncepcja dla kodu pisanego odręcznie, ale w kodzie generowanym maszynowo wybieram „Prawo Demeter”: „To, co należy do siebie, musi pozostać razem”. Łatwiej jest manipulować kodem, który generuje tagi Style, niż edytować styl globalny po raz drugi w innym, „zdalnym” pliku CSS.

Odpowiedź na twoje pytanie: to zależy ...

Myślę, że nawet jeśli chcesz mieć określony styl dla jednego elementu, musisz rozważyć możliwość zastosowania tego samego stylu do tego samego elementu na różnych stronach.

Ktoś może kiedyś poprosić o zmianę lub dodanie większej liczby zmian stylistycznych do tego samego elementu na każdej stronie. Gdybyś miał style zdefiniowane w zewnętrznym pliku CSS, musiałbyś tylko wprowadzić tam zmiany, a zostałoby to odzwierciedlone w tym samym elemencie na wszystkich stronach, oszczędzając w ten sposób ból głowy. :-)

Koduj tak, jak lubisz kodować, ale jeśli przekazujesz to komuś innemu, najlepiej wykorzystać to, co robią wszyscy inni. Są powody dla CSS, są też powody dla inline. Używam obu, bo jest mi po prostu łatwiej. Używanie CSS jest cudowne, gdy masz wiele takich samych powtórzeń. Jednak gdy masz kilka różnych elementów o różnych właściwościach, staje się to problemem. Jednym z przykładów jest dla mnie pozycjonowanie elementów na stronie. Każdy element jako inna właściwość top i left. Gdybym umieścił to wszystko w CSS, naprawdę denerwowałoby mnie bałagan między stroną html i css. CSS jest więc świetny, gdy chcesz, aby wszystko miało tę samą czcionkę, kolor, efekt najechania kursorem itp. Ale gdy wszystko ma inną pozycję, dodanie instancji CSS dla każdego elementu może być naprawdę uciążliwe. To tylko moja opinia. CSS ma naprawdę duże znaczenie w większych aplikacjach, gdy musisz przekopać się przez kod. Użyj wtyczki programistycznej Mozilla, która pomoże Ci znaleźć identyfikatory elementów i klasy.

Nawet jeśli użyjesz stylu tylko raz, jak w tym przykładzie, nadal łączysz TREŚĆ i WZORNICTWO. Wyszukaj „Rozdzielenie obaw”.

Używanie stylów wbudowanych narusza zasadę separacji problemów, ponieważ efektywnie mieszasz znaczniki i styl w tym samym pliku źródłowym. W większości przypadków narusza to również zasadę DRY (Don't Repeat Yourself), ponieważ mają one zastosowanie tylko do jednego elementu, podczas gdy klasę można zastosować do kilku z nich (a nawet rozszerzyć dzięki magii reguł CSS! ).

Ponadto rozsądne wykorzystanie klas jest korzystne, jeśli witryna zawiera skrypty. Na przykład kilka popularnych bibliotek JavaScript, takich jak JQuery, w dużym stopniu zależy od klas jako selektorów.

Wreszcie, używanie klas dodaje dodatkowej przejrzystości do twojego DOM, ponieważ efektywnie masz deskryptory, które mówią ci, jakiego rodzaju elementem jest dany węzeł. Na przykład:

<div class="header-row">It's a row!</div>

Jest dużo bardziej wyrazisty niż:

<div style="height: 80px; width: 100%;">It's...something?</div>

Css na stronie jest w tej chwili na stronie, ponieważ Google ocenia go jako zapewniającego lepsze wrażenia użytkownika niż css ładowany z oddzielnego pliku. Możliwym rozwiązaniem jest umieszczenie css w pliku tekstowym, załadowanie go w locie za pomocą php i umieszczenie go w nagłówku dokumentu. W <head>sekcji uwzględnij to:

<head> ...

<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>

... </head>

Umieść wymagany css w styles / style1.txt, a zostanie on wypluty w <head>sekcji twojego dokumentu. W ten sposób uzyskasz css na stronie, korzystając z szablonu stylu style1.txt, który może być współdzielony przez wszystkie strony, umożliwiając wprowadzanie zmian stylu w całej witrynie za pomocą tylko tego jednego pliku. Ponadto ta metoda nie wymaga, aby przeglądarka żądała oddzielnych plików css z serwera (minimalizując w ten sposób czas pobierania / renderowania), ponieważ wszystko jest dostarczane na raz przez php.

Po wdrożeniu tego, w razie potrzeby, indywidualne style jednorazowe można ręcznie kodować.

Wbudowany CSS jest dobry w przypadku kodu generowanego maszynowo i może być w porządku, gdy większość odwiedzających przegląda tylko jedną stronę w witrynie, ale jedna rzecz, której nie może zrobić, to obsługiwać zapytania o media, aby umożliwić różny wygląd ekranów o różnych rozmiarach. W tym celu musisz uwzględnić CSS w zewnętrznym arkuszu stylów lub w wewnętrznym tagu stylu.

Mimo że całkowicie zgadzam się ze wszystkimi odpowiedziami podanymi powyżej, że pisanie CSS w osobnym pliku jest zawsze lepsze od możliwości ponownego wykorzystania kodu, łatwości konserwacji, lepszej separacji problemów, istnieje wiele scenariuszy, w których ludzie wolą wbudowany CSS w swoim kodzie produkcyjnym -

Zewnętrzny plik CSS powoduje jedno dodatkowe wywołanie HTTP do przeglądarki, a tym samym dodatkowe opóźnienie. Zamiast tego, jeśli CSS jest wstawiony w tekście, przeglądarka może od razu rozpocząć jego analizę. Zwłaszcza połączenia HTTP przez SSL są droższe i powodują dodatkowe opóźnienia na stronie. Dostępnych jest wiele narzędzi, które pomagają generować statyczne strony HTML (lub fragmenty strony) poprzez wstawianie zewnętrznych plików CSS jako kodu wbudowanego. Te narzędzia są używane na etapie kompilacji i wydania, w którym generowany jest plik binarny. W ten sposób uzyskujemy wszystkie zalety zewnętrznego CSS, a także strona staje się szybsza.

Zgodnie ze specyfikacją AMP HTML konieczne jest umieszczenie CSS w pliku HTML (w przeciwieństwie do zewnętrznego arkusza stylów) ze względu na wydajność. Nie oznacza to wbudowanego CSS, ale nie określają żadnych zewnętrznych arkuszy stylów .

Niekompletna lista optymalizacji, które może wykonać taki system udostępniania, to:

• Zastąp odniesienia do obrazów obrazami dopasowanymi do obszaru roboczego przeglądarki.
• Obrazy w treści, które są widoczne w części strony widocznej na ekranie.
• Wbudowane zmienne CSS.
• Wczytaj wstępnie rozszerzone komponenty.
• Zmniejsz HTML i CSS.

Oprócz innych odpowiedzi, nie możesz kierować się na pseudoklasy lub pseudoelementy w wbudowanym CSS