🌈🌈Zarządzanie kolorami w CSS🌈🌈

Co projekt, to inne metody zarządzania kolorami w CSS. Najczęściej reguł albo nie ma, albo są zbyt ścisłe, co powoduje sporo problemów. W poniższym wpisie postaram się przedstawić prosty przykład dotyczący tego, jak można ładnie poradzić sobie z kolorami w aplikacji.

Prosty przykład

Wyobraź sobie że zaczynasz niewielki projekt i dodajesz do niego kilka stylów. Z czasem widzisz, że pojawiają się niespójności jeśli chodzi o kolory. Przykładowo 

Mamy tu już 3 rozbieżności. Kolor można zadeklarować w hex za pomocą trzech lub więcej znaków, w klasie item dodatkowo zapisujemy background-color po prostu nazwą koloru, co jest odradzane. Dodatkowo, kolory można zapisywać nie tylko w wartościach hexadecymalnych, ale także w HSL, HSV i RGB. Wartości kolorów użyte w przykładzie są hipotetyczne :).

Liczniki w CSS

Jedną z rzeczy których najbardziej nie lubię podczas pisania dłuższych tekstów, jest dbanie o prawidłową strukturę danych. Ręczne przypisywanie numerów do poszczególnych nagłówków jest złą praktyką, która wychodzi na jaw przy zmianach struktury dokumentu. W Markdown na razie nie ma na to rozwiązania, natomiast CSS oferuje bardzo przydatne liczniki, czyli counters. 

Liczniki w CSS pozwalają na stworzenie list numerowanych elementów, dając znacznie większe możliwości niż zwykłe listy numerowane. Dzięki nim możesz na przykład utworzyć numerację nagłówków o kilku stopniach zagnieżdżenia, tworząc strukturę naśladującą dobrze sformatowaną książkę.

Counters świetnie sprawdzą się przy wyświetlaniu hierarchicznych danych. W załączonym przykładzie przedstawiam działanie liczników.

See the Pen css counters by Kamil (@KamilNaja) on CodePen.

Nowości w CSS - luty 2022

Cześć, dzisiaj przedstawię Ci kilka rzeczy które pojawiły się w CSS w ostatnim czasie i pozwalają mocno uprościć kod.

Cascade Layers

Pozwalają na zmianę specyficzności poszczególnych selektorów bez dodatkowych sztuczek w stylu "aby nadpisać klasę, dodam na jej początku tag html". 

Kaskadowe warstwy pozwalają na zdefiniowanie poszczególnych warstw (a to niespodzianka), które ustawiamy w takiej kolejności, jak chcemy żeby się nadpisywały ignorując specyficzność.

Złe praktyki w CSS - jak ich uniknąć

CSS pozwala na określanie wyglądu poszczególnych elementów na stronie. Moim zdaniem, praca z CSS, po poznaniu jego podstaw, jest bardzo przyjemna i daje mnóstwo satysfakcji. Niestety, ale gdy Twoja strona się rozrasta i ilość kodu CSS rośnie, praca staje się coraz trudniejsza. Kod staje się nieprzewidywalny, a dodawanie kolejnych funkcjonalności, wymaga ciągłego przeszukiwania arkusza. Ten poradnik, pozwoli Ci się uchronić przed problemami, które wychodzą dopiero wtedy, gdy Twój projekt staje się coraz bardziej rozbudowany.

Piszemy CSS i HTML w Chrome bez edytora tekstu

Podczas tworzenia stron WWW, proces edycji CSS, wygląda często tak:

·        Próbujemy ostylować element w DevToolsach

·        Gdy osiągamy oczekiwany efekt, wpisujemy kod ponownie do edytora

·        Odświeżamy przeglądarkę i ewentualnie wracamy do pierwszego punktu

Google Chrome, oferuje świetną opcję, która znacznie uprości sposób, w jaki tworzysz swoje style. Sztuczki, które opisuję niżej, poznałem dzięki jednemu z tutoriali Brada Traversy.

Kilka przydatnych znaczników CSS, które warto mieć w zanadrzu

Znalazłeś się kiedyś w sytuacji, gdy Twój kod CSS zaczęły wypełniać pokręcone selektory długości dwóch linii? Konieczność częstego wynajdowania mało eleganckich rozwiązań, może oznaczać, że już czas odświeżyć sobie znaczniki CSS.

Niesamowity trick w CSS - !important bez !important

Front-endowcy go nienawidzą - dzięki temu prostemu trickowi, możesz nadać jakiemuś elementowi większą specyficzność, bez wyszukiwania selektorów. Wystarczy powielić nazwę klasy.

See the Pen WjMwzE by Kamil (@KamilNaja) on CodePen.

Gdy to zobaczyłem, zbierałem szczękę z podłogi. Źródło - https://www.youtube.com/watch?v=WjP7TEKB7Uo

Biblioteczka Front End Developera - "CSS bez tajemnic. 47 sekretów kreatywnego projektanta"

W wpisach oznaczonych tagiem "książki" będę umieszczał krótkie opisy książek dla developerów.


Tytuł - "CSS bez tajemnic. 47 sekretów kreatywnego projektanta"
Autor - Lea Verou
Wydawnictwo O'Reilly/Helion
Opis - Najlepszym sposobem na naukę CSS, jest (oprócz tworzenia stron), oglądanie gotowych rozwiązań różnych problemów. Książka (wydana na świetnym papierze), zawiera 47 "przepisów" dla nieco bardziej zaawansowanych osób. Nie znajdziesz w niej podstawowych informacji na temat stylowania, natomiast nie brakuje w niej przykładów, na rozwiązanie problemów, które napotkasz podczas tworzenia stron.

W tej książce znalazłem na przykład rozwiązanie dość skomplikowanego problemu, który dostałem do rozwiązania jako zadanie próbne w jednej z firm. Niestety,książkę kupiłem później. Lea ma też świetne nagrania na YT.

Polecam

Tricki z css - sidebar o takiej samej wysokości, co kolumna z tekstem

Cześć, w dzisiejszym wpisie ciekawa sztuczka, którą znalazłem w nagraniu Dereka Banasa.
Problem -> na stronie mamy boks z tekstem głównym oraz sidebar i chcemy, by te kolumny miały tę samą wysokość.

Rozwiązanie polega na dodaniu do sidebara bardzo dużego paddingu dolnego oraz ujemnego marginesu dolnego, o takiej samej wielkości. Cały div otaczający te elementy, musi mieć ustawione overflow: hidden.

Poniżej link do mojego Codepena i nagranie.

See the Pen 2 kolumny tej samej wysokości by Kamil (@KamilNaja) on CodePen.

Najpopularniejsze selektory CSS

* Zaznacza wszystkie elementy na stronie (zastosowanie np. ustawienie box-sizing);

p Zaznacza wszystkie paragrafy

p, div, input – styluje różne elementy w ten sam sposób.

div p – paragraf musi znajdować się w elemencie div

div > p Zaznacza wszystkie elementy p będące dzieckiem selektora div (nie mogą być dalszym potomkiem)

div + p Zaznacza elementy p które są poprzedzane przez element div

div ~ p Element div ma być poprzedzony elementem p

Zaznaczanie wszystkich elementów listy z wyjątkiem ostatniego

Zaznaczanie wszystkich elementów listy z wyjątkiem ostatniego

Narzędzie do sprawdzania jakości CSS

Narzędzie do sprawdzania jakości CSS - http://csslint.net/