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

170

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" />
ChessWhiz
źródło
1
Zawsze jestem przeciwny wbudowanemu css, nawet w przypadku pojedynczego elementu, ALE widzę tak wiele witryn komercyjnych przepełnionych atrybutami stylu, że zastanawiam się, jaka jest akceptowana praktyka?
yu_ominae
3
Myślę, że style inline są leniwe. Mówię to, bo sam to często robię, więc wiem - po co - robię to, bo nie mam pojęcia, czy styl się utrzyma, więc robiłem to tuż obok html. Obecnie, z html5 i pragmatycznym wsparciem dla <style> </style> w dowolnym miejscu, zamiast tego używam pobliskiego tagu <style> podczas majstrowania przy układzie, a następnie przenoszę go do głównego / głównego pliku css. Te same zalety szybkości i natychmiastowości, prawie żadnych wad (efekty uboczne w elementach poza stroną ze względu na jedną ze specyfiki).
Kzqai
3
@yu_ominae - pamiętaj, że „witryny komercyjne” nie zawsze są zgodne z najlepszymi praktykami; w rzeczywistości jest to dość rzadkie. Decydującym czynnikiem jest to, czy deweloper wie, dba i ma czas; lub jeśli kierownik jest skłonny przeznaczyć czas i skierować pracowników do wdrożenia. Gdy priorytetem pracy jest dotrzymanie terminu, zwykle spada jakość.
BryanH
1
Warto zauważyć, że chociaż „witryny komercyjne” wydają się używać stylów wbudowanych, może to być wynikiem użycia pewnych wywołań jQuery (np. css()), Które stosują style wbudowane.
Dave Becker,

Odpowiedzi:

203

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ą.

David
źródło
18
Mówisz, że mój przykład nie stanowi problemu, ale przyznajesz też, że jesteś heretykiem. Podoba mi się to podejście.
ChessWhiz
8
Gdybym dostawał nikiel za każdym razem, gdy musiałbym modyfikować float obrazu lub inny CSS, który pierwotnie miał być „tylko dla jednego elementu” ... ... cóż, wyszedłbym na kolację w miłej restauracji.
Kzqai
8
Kolejny scenariusz, w którym można nie tylko używać stylów wbudowanych, ale jest to jedyny sposób nadawania stylu czegokolwiek: wiadomości e-mail HTML.
Christophe Marois
Ale htmlsam plik jest również buforowany.
W odpowiedzi na user663031: Witryna internetowa z wieloma stronami ma wiele różnych stron HTML, ale może łączyć wszystkie ich style w tylko jednym pliku CSS, który można łatwo buforować.
Sinthorion
68

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.
vijay.shad
źródło
2
Zadaję sobie to pytanie co miesiąc (całkiem nowy w programowaniu internetowym) i po raz pierwszy czytam cokolwiek o buforowanym pliku css. To robi to dla mnie właśnie tam!
ganders
Myślałem również o pamięci podręcznej, ale w moim przypadku mam do czynienia ze scalonym CSS, który ma 15k linii, niemożliwe jest utrzymanie całej dużej części śmieci, które miały być użyte tylko raz na jednej stronie, która nie robi już nie istnieje. Więc podczas każdej wizyty wrzucasz do wszystkich kod CSS dla jednej tymczasowej strony, którą ogląda tylko 1% Twojego ruchu. Nie jestem pewien, czy argument dotyczący ruchu internetowego jest słuszny w każdym przypadku. Na szczęście komponenty sieciowe zmienią sytuację!
Shadoweb,
@Shadowbob - czy nie byłoby lepiej mieć mniejsze pliki css zamiast dużego? Może mieć jeden ogólny, który jest używany dla wszystkich stron, ale potem miej małe oddzielne arkusze stylów dla innych stron. Powinien być łatwiejszy w utrzymaniu. A jeśli ruch jest problemem, to produkcja prawdopodobnie może połączyć się w jedną, w procesie budowania.
Darius.V
26

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.

Kzqai
źródło
23

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

Danield
źródło
16

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?

issa marie tseng
źródło
12
„zawsze, zawsze wygrywam” - chyba że słowo! ważne jest użyte w arkuszu stylów
James Westgate,
6
Żyję z założenia, że ​​ludzie są humanitarni i nie używam takich potworności. =)
issa marie tseng
3
@JamesWestgate, dopóki ktoś nie użyje! Important w wbudowanym css, aby nadpisać zastąpienie ....
Kzqai
11

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


źródło
7
Zapłacę ci 5 dolców za przesłanie „Wbudowane style CSS uważane za szkodliwe” do ACM.
BalinKingOfMoria Przywrócenie CM
11

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.

Sylvain
źródło
3
+1 - Naprawdę narzekam, gdy nasi projektanci robią to jako szybką naprawę, aby znaleźć coś do ustawienia. Używanie zewnętrznego CSS ma oznaczać, że nigdy nie będziesz musiał wykonywać masowej zamiany tekstu, chyba że oczywiście operujesz na pojedynczym arkuszu stylów. Wczoraj udostępniono mi szablon panelu sterowania i znalezienie przypadków, w których ikony zostały zmodyfikowane za pomocą wbudowanych stylów, zajęło 2 i pół godziny. Szalenie mówię ci ... szaleństwo :)
Tim Post
1
Kiedy masz ponad 50 SCSS, a element Inspect wskazuje tylko na skompresowany CSS, nie jestem pewien, czy to CSS wygrywa w prostocie!
Shadoweb,
1
@Shadowbob do tego służą sourcemaps. thesassway.com/intermediate/using-source-maps-with-sass
Mike Chamberlain
@TimPost jest powód, dla którego narodziła się funkcja „inspekcja elementu”
Norielle Cruz
9

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

Bruno Jennrich
źródło
7
Myślę, że to naprawdę jest poprawna odpowiedź. Mantra „oddzielenia trosk” to tylko jedno z kryteriów. „Lokalizacja” jest również ważna ze względu na łatwość utrzymania. Kluczowym aspektem jest to, czy styl nadaje się do ponownego wykorzystania na poziomie semantycznym, a nie tylko syntetycznym. W takim przypadku arkusz ma sens. Np. Nie zamierzam tworzyć klasy dla „float: right” tylko dlatego, że używają jej dwa elementy. Zależy to od tego, czy elementy są semantycznie takie same. Styl „kolorowy” jest zwykle powiązany semantycznie (część motywu) i zwykle znajduje się w arkuszu.
koriander
5

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. :-)

Ashish Gupta
źródło
4

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.

Noah Beach
źródło
2

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

Ian Mercer
źródło
1

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>
csvan
źródło
1

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ć.

Roger Stevens
źródło
Tak! ma to kluczowe znaczenie przy próbie zminimalizowania „czasu do pierwszego malowania”, jeśli cały twój plik css znajduje się w plikach, to odroczy DOM do czasu pobrania arkuszy stylów przez użytkownika. Mając swoje krytyczne style w wbudowanym węźle <styles> w głowie, możesz natychmiast rozpocząć renderowanie DOM i odroczyć zewnętrzne arkusze stylów. Odgrywa duży wpływ na połączenia ~ 3G i postrzeganą prędkość. +1 za odpowiedź
DOfficial
1

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.


źródło
0

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.

Diptendu
źródło
3
Brakuje Ci czegoś, co dotyczy opóźnienia. Naprawdę o wiele większy problem : osadzenie CSS oznacza, że ​​każde żądanie strony musi zawierać ten CSS, podczas gdy w przeciwnym razie przeglądarka może go buforować.
Andrew Barber
Masz rację. Dlatego wstawiamy CSS, gdy rozmiar kodu jest bardzo mały, aby nie powodował zbyt dużego narzutu na rozmiar strony. Jest bardzo ciekawy artykuł na temat Yahoo! Strona z wytycznymi dotyczącymi wydajności developer.yahoo.com/performance/rules.html, która mówi, że 60-80% użytkowników odwiedza Twoją witrynę codziennie z pustą pamięcią podręczną ( yuiblog.com/blog/2007/01/04/performance-research-part -2 ) Oczywiście zależy to całkowicie od popularności strony internetowej - Im popularniejsza strona, tym większe są szanse, że pamięć podręczna nie jest pusta.
Diptendu
Chociaż jest prawdopodobne, że użytkownik uzyskuje dostęp do Twojej witryny z pustą pamięcią podręczną, jest mało prawdopodobne, aby uzyskał dostęp do Twojej strony z pustą pamięcią podręczną. O ile strona nie jest jednorazowego użytku (tzn. Każdy użytkownik przegląda ją tylko raz), będzie działać lepiej z osobnym plikiem css.
astex
Obecnie wiele nowoczesnych stron internetowych jest projektowanych jako aplikacja jednostronicowa, cała strona jest ładowana tylko za pierwszym razem. Następnym razem strona jest zmieniana przez wywołanie AJAX. Więc nawet jeśli strona jest wielokrotnego użytku, zewnętrzny CSS zostanie załadowany tylko raz.
Diptendu
0

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.
Ronnie Royston
źródło
0

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

Sushmit Sagar
źródło