Jak ta klasa CSS zmieni wygląd mojej strony? Moc opcji .cls

Opcja cls Chrome DevTools - obrazekZnajomość CSS bywa niebezpieczna.

A umiejętność dodawania własnych klas może obrócić się przeciwko tobie. Nowa klasa tu, nowa tam i zanim się obejrzysz, twoj staranny dotąd kod CSS zaczyna przypominać bigos.

Dziś o tym, jak opcja .cls z Chrome DevTools zapobiega w nadmiarowej produkcji klas CSS i pomaga dobrze wykorzystać już istniejące.

Potrzebuję nowy efekt. Nie ma sprawy, mówisz, masz!

I już w twoim edytorze CSS ląduje kolejna klasa CSS.

Namnażanie podobnych klas CSS
Namnażanie podobnych klas CSS

Odkąd w WordPressie mamy możliwość dodawania własnego kodu CSS poprzez panel personalizacji, stało się to jeszcze prostsze. Nawet motyw potomny zaczyna być zbędny.

Dodawanie CSS przez ekran personallizacji
Dodawanie CSS przez ekran personallizacji

Nowa klasa nie do końca się nas słucha? No problemo! Pewnien CSS-owy VIP z wykrzyknieniem już spieszy na ratunek.

"Ratowanie" sytuacji przez wykorzystanie !important
„Ratowanie” sytuacji przez wykorzystanie !important

I po kilku rundkach takich hulanek-swawolek, ani się obejrzymy, a już spłodziliśmy nową drużynę piłkarską:

.red-button, .red-button-bigger, .reddish-button, reddish-button-smaller, .red-blue, .red-blue-big, .special-button, .special-button-2, .red-button-with-margins, .red-blue-border

Przykre konsekwencje namnażania klas

  • Bałagan w kodzie
  • Nadmiarowość kodu
  • Brak spójności w designie
  • Trudność w zmianie motywu
  • Utrudnienie życia pozostałym

To tylko niektóre z konsekwencji nadprodukcji klas. Ta ostania jest szczególnie uciążliwa dla innych osób redagujących treść w tej samej witrynie.

Przykład

Mam dodać coś na stronie…, niech no już będzie ten „call to action”. Więc pierwsze co robię, szukam innego call’a to action w witrynie. Sprawdzam, jakie klasy zostały użyte, aby prosty link zamienił się w efekciarski guzik o podwójnej sile rażenia.

I już już jestem o krok od zaaplikowania tego samego zestawu klas do mojego odnośnika, gdy tu nagle dostrzegam… jakiś drugi call to action. Niby podobny, ale jakiś taki „odmieniony”. I sterowany innym zestawem klas…

Call to action - zbyt duży wybór, zbyt wiele klas
Call to action – zbyt duży wybór, zbyt wiele klas

Zonk.

Który zestaw klas wybrać? Ten pierwszy czy ten drugi? „Niech zdecyduje większość!”, myślisz i desperacko szukasz trzeciego CTA. I znajdujesz. Przycisk wygląda identycznie jak ten pierwszy. No to klik, klik w Inspect element, żeby skopiować te klasy.

Jednak pech cię nie opuszcza. Mimo że guziczek do złudzenia przypominał ten pierwszy, pod maską widzisz jeszcze inne klasy.

To wszystko przez szefa, niecierpliwego klienta i pośpiech!

Taki bałagan w kodzie można tłumaczyć pośpiechem. Naczelny portalu potrzebował coś na cito, a ty jako naczelny front-endowiec nie miałeś czasu, żeby analizować istniejący kod CSS i sprawdzać, która z istniejących klas się nada.

I przypominać sobie, czy ta klasa nazywała się button-regular, button-small, button-sm, czy może jeszcze inaczej.

A już na pewno nie ma czasu sprawdzać, jak ubranie twojego przycisku w każdą z nich wpłynie na końcowy wygląd twojego CTA.

Jak szybko sprawdzać istniejące klasy

A gdyby tak wykorzystać Chrome DevTools, czyli kliknąć prawym klawiszem w  Inspect? I wybrać opcję .cls.

Opcja cls w Chrome DevTools
Opcja cls w Chrome DevTools

Opcja .cls w Chrome DevTools, umożliwia następujące rzeczy:

  1. Pozwala wyszukać istniejące klasy CSS zaczynające się od danego ciągu znaków (auto-uzupełnianie w locie).
  2. Szybko sprawdzić wpływ danej klasy na wygląd elementu.
  3. Gdy element ma dodanych kilka klas, można włączać i wyłączać poszczególne z nich i obserwować, jak element się zmienia

Dwie pierwsze moce zostały omówione na tym filmiku:

Włączaj i wyłączaj klasy

Jeśli twój element ma zaaplikowanych kilka klas, za pomocą checkboksów ukrytych pod opcją .cls możesz je włączać i wyłączać i w ten sposób szybko sprawdzać, za jaki konkretny efekt odpowiada każda z nich.

Testuj wygląda elementu włączając i wyłączając poszczególne klasy
Testuj wygląda elementu włączając i wyłączając poszczególne klasy

Wejdź sobie dla przykładu na stronkę dokumentacji Bootsrapa i pobaw się na dostępnych tam przykładach.

Powodzenia!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Wyrażam zgodę na przetwarzanie przez Webfaces Agnieszka Bury, ul. Rymarska 42/3, 53-206 Wrocław NIP: 9111769381, REGON: 021997379, moich danych osobowych w celu dodania komentarza na blogu webfaces.pl. (Sorry, takie są wymogi RODO, więcej informacji w Polityce prywatności).