Sposób dodawania stylów

Question

Witam

Wiem, że wyróżniamy trzy podstawowe możliwości stylowania strony: style liniowe, style umieszczone w <style></style> oraz style które są w oddzielnym pliku i są podpinane. Większość źródeł podaje, że ostatnia metoda jest najbardziej poprawna, i to zawsze z niej powinno się korzystać, i że nie powinno się używać stylów liniowych, ponieważ trzeba rozdzielać wygląd od treści, i to jest logiczne, ale jeżeli mamy taką sytuację, to czy nie lepiej skorzystać z stylów liniowych?

 

Wyobraźmy sobie, że na stronie jest więcej takich kart, i każda taka karta, ma mieć inny kolor fonta, to wtedy moim zdaniem nie warto jest męczyć się i na siłę stylować to w CSS i dodawać jakieś klasy/id typu class="card1", tylko posłużyć się stylami liniowymi, czy take myślenie jest odpowiednie i poprawne, nie będzie to negatywnie wpływać ma SEO?

Answer 1

Style inline nie mają wpływu na SEO. Moim zdaniem najlepiej jest zrobić 1 wspólną klasę dla tych kart, ten border, wysokość, szerokość, zaokrąglenie boczków a następnie te rzeczy, które się zmieniają tworzyć nowe klasy z modyfikatorami np: `--primary`, `--secondary` albo jeśli zmienia się tylko ten kolor to może po prostu `--blue`, `--orange` itd.

Answer 2

Zanim przejdę do samych styli to chciałbym jeszcze powiedzieć parę słów na temat różnic w dodawaniu CSSów. Nie ma najlepszego sposóbu! Są różne ;)

Gdy dodajemy style przez znacznik <style> strona po wczytaniu pliku HTML jest w stanie wyświetlać się poprawnie! Zyskujemy na szybkość strony. Nie musimy czekać na wczytanie osobnego pliku CSS do którego ścieżkę poznamy dopiero po przeanalizowaniu strony. Minusem jest brak możliwości cachowania tych styli css.

Gdy dodamy style CSS poprzez znacznik <link> z ścieżka do CSSów zyskamy możliwość cachowania pliku CSS w przeglądarce. Jednak strona bedzie dostawała plik CSS wolniej z racji wymiany nagłówków cachujących z serwerem. 

Sam zalecam dodawanie styli poprzez znacznik <style> gdy plik HTML razem z stylami nie przekroczy rozmiaru jednej paczki sieciowej (32 kb). lub stosować znacznik <link> połączony z HTTP/2 i serwer push ;)

Po więcej odnośnie optymalizacji zapraszam pod : https://forum.pasja-informatyki.pl/430985/moja-prezentacja-na-temat-przyspieszania-stron-internetowych 

----------------------------------

Ok przejdźmy do pytania! Bardzo dobry sposób opisał @BT101 czyli metodologie BEM. Jednak chciałbym umotywować taki sposób działania abyś się do niego przekonał i wiedział dlaczego jest potrzebny. 

1) Łatwość edycji - gdy postanowisz nagle na stronie zmienić kolor bordera na taki sam kolor jak czcionka będziesz musiał dopisywać wszedzie na stronie ten kolor w style="" trudno będzie znaleźć wszystkie wystąpienia a inline będzie się powoli rozrastał.  

2) Możliwość zrezygnowania z stylu. Gdy coś posiadasz w znacznikach style="" ma to wyższy priorytet od styli CSS. Aby w plikach CSS nadpisać taką wartość musisz używać !important co jest nie za dobrym rozwiązaniem. Kiedy możesz chcieć nadpisać tak wyglądające style? Tworząc szablon wydruku! Podczas drukowania być może będziesz chciał zamienić kolor na czarny i będziesz zmuszony używać !important. Problem może pojawić się również podczas tworzenia ciemnego schematu kolorystycznego strony.

3) Klasy kolorów mogą się przydać w menu widocznym na komórkach i na komputerach. Często są to dwa odrębne menu przez co będziesz miał kopie kolorów w dwóch miejscach.

Jadnak da się wykonać twój pomysł używając style="" i nie posiadać problemów wymienionych powyżej. Z pomocą przychodzą zmienne CSS. Ja zrealizował bym toi w taki sposób: 

CSS: 

--red: #f00;
--blue: #0f0;
--green: #00f;

.menuItem {
    --item-color: var(--red);
    color: var(--item-color);
    [...]
}

HTML :

<div class="menuItem" style="--item-color: var(--blue)">

<div class="menuItem" style="--item-color: var(--green)">

 

Answer 3

moim zdaniem nie warto jest męczyć się i na siłę stylować to w CSS

Właśnie warto. To jest istota CSS. BT101 poszedł krok dalej i wskazał metodologię BEM. Wstawianie stylów poza arkusz tak jak stosowanie !important  to proszenie się o kłopoty.