Jak nauczyć się CSS

Dostaję wiele osób, które proszą mnie o polecanie im tutoriali na temat różnych części CSS lub pytają, jak nauczyć się CSS. Widzę również wiele osób, które są zdezorientowane co do fragmentów CSS, częściowo z powodu przestarzałych pomysłów na temat języka. Biorąc pod uwagę, że CSS zmienił się dość znacznie w ciągu ostatnich kilku lat, to naprawdę dobry czas na odświeżenie swojej wiedzy. Nawet jeśli CSS jest niewielką częścią tego, co robisz (ponieważ pracujesz w innym miejscu stosu), CSS to sposób, w jaki rzeczy wyglądają tak, jak chcesz na ekranie, więc warto być na bieżąco.

Dlatego ten artykuł ma na celu nakreślenie kluczowych podstaw CSS i zasobów do dalszej lektury na temat kluczowych obszarów współczesnego rozwoju CSS. Wiele z nich znajduje się w Smashing Magazine, ale wybrałem też inne zasoby, a także ludzi do śledzenia w kluczowych obszarach CSS. Nie jest to kompletny przewodnik dla początkujących ani nie obejmuje absolutnie wszystkiego. Moim celem jest omówienie szerokiego zakresu współczesnego CSS, skupiając się na kilku kluczowych obszarach, które pomogą Ci odblokować resztę języka.

Podstawy języka

W przypadku większości CSS nie musisz się martwić o uczenie się właściwości i wartości na pamięć. Możesz je sprawdzić, kiedy ich potrzebujesz. Istnieje jednak kilka kluczowych podstaw języka, bez których będziesz miał trudności z jego zrozumieniem. Naprawdę warto poświęcić trochę czasu, aby upewnić się, że rozumiesz te rzeczy, ponieważ na dłuższą metę zaoszczędzi ci to dużo czasu i frustracji.

Selektory, więcej niż tylko klasa

Selektor robi to, co mówi na puszce, wybiera część twojego dokumentu, aby można było zastosować do niego reguły CSS. Podczas gdy większość ludzi jest zaznajomiona z używaniem klasy lub bezpośrednim stylizowaniem elementu HTML, takiego jak body , istnieje wiele bardziej zaawansowanych selektorów, które mogą wybierać elementy na podstawie ich lokalizacji w dokumencie, być może dlatego, że pojawiają się bezpośrednio po elemencie, lub nieparzyste wiersze w tabeli.

Selektory, które są częścią specyfikacji poziomu 3 (być może słyszałeś o nich jako selektory poziomu 3), mają doskonałą obsługę przeglądarek. Aby uzyskać szczegółowe informacje na temat różnych selektorów, których możesz użyć, zobacz Dokumentację MDN.

Niektóre selektory działają tak, jakbyś zastosował klasę do czegoś w dokumencie. Na przykład p:first-child zachowuje się tak, jakbyś dodał klasę do pierwszego elementu p , znanego jako selektory pseudoklas . Selektory pseudoelementów działają tak, jakby element został wstawiony dynamicznie, na przykład ::first-line działa w podobny sposób, jak span obszaru wokół pierwszego wiersza tekstu. Jednak zostanie to zastosowane ponownie, jeśli zmieni się długość tej linii, co nie miałoby miejsca, gdybyś wstawił element. Te selektory mogą być dość skomplikowane. Poniżej CodePen jest przykładem pseudoelementu połączonego z pseudoklasą. Celujemy w pierwszy element p pseudoklasą :first-child , następnie selektor ::first-line wybiera pierwszą linię tego elementu, zachowując się tak, jakby wokół tej pierwszej linii dodano span, aby była pogrubiona i zmienić kolor.

Dziedziczenie i kaskada

Kaskada określa, która reguła wygrywa, gdy kilka reguł może dotyczyć jednego elementu. Jeśli kiedykolwiek byłeś w sytuacji, w której nie możesz zrozumieć, dlaczego niektóre CSS wydają się nie mieć zastosowania, prawdopodobnie kaskada Cię potyka. Kaskada jest ściśle powiązana z dziedziczeniem, które określa, które właściwości są dziedziczone przez elementy podrzędne elementu, do którego są stosowane. Wiąże się to również ze specyfiką; różne selektory mają różną specyfikę, która kontroluje, który wygrywa, gdy istnieje kilka selektorów, które mogą mieć zastosowanie do jednego elementu.

Uwaga : Aby zrozumieć wszystkie te rzeczy, sugerowałbym przeczytanie The Cascade and Inheritance, we Wprowadzeniu do CSS w MDN.

Jeśli zmagasz się z uzyskaniem kodu CSS do zastosowania do elementu, najlepszym miejscem do rozpoczęcia jest DevTools przeglądarki, spójrz na poniższy przykład, w którym mam element h1 skierowany przez selektor elementów h1 i zmieniający nagłówek na pomarańczowy. Używam również klasy, która ustawia h1 na rebeccapurple. Klasa jest bardziej szczegółowa, więc h1 jest fioletowe. W DevTools widać, że selektor elementu jest przekreślony, ponieważ nie ma zastosowania. Gdy zobaczysz, że przeglądarka pobiera Twój kod CSS (ale coś innego go unieważniło), możesz zacząć zastanawiać się, dlaczego.

Model pudełkowy

CSS to przede wszystkim pudełka. Wszystko, co jest wyświetlane na ekranie, ma pole, a Model Pudełka opisuje, w jaki sposób obliczany jest rozmiar tego pola — z uwzględnieniem marginesów, dopełnienia i obramowań. Standardowy model pudełka CSS przyjmuje szerokość, którą nadałeś elementowi, a następnie dodaje do tej szerokości dopełnienie i obramowanie — co oznacza, że ​​przestrzeń zajmowana przez element jest większa niż szerokość, którą mu nadałeś.

Niedawno mogliśmy wybrać alternatywny model pudełka, który wykorzystuje podaną szerokość elementu jako szerokość widocznego elementu na ekranie. Wszelkie dopełnienie lub obramowanie wstawia zawartość pudełka od krawędzi. Ma to o wiele więcej sensu w przypadku wielu układów.

W poniższym demo mam dwa pudełka. Oba mają szerokość 200 pikseli, z obramowaniem 5 pikseli i wypełnieniem 20 pikseli. Pierwsze pudełko korzysta ze standardowego modelu pudełka, więc zajmuje całkowitą szerokość 250 pikseli. Drugi używa alternatywnego modelu pudełka, więc ma w rzeczywistości szerokość 200 pikseli.

Browser DevTools może ponownie pomóc w zrozumieniu używanego modelu pudełkowego. Na poniższym obrazku używam Firefox DevTools do sprawdzenia pudełka przy użyciu domyślnego modelu pudełka z content-box . Narzędzia mówią mi, że jest to używany model pudełkowy, i widzę rozmiar oraz sposób dodawania obramowania i dopełnienia do przypisanej szerokości.

Uwaga : Przed IE6 Internet Explorer używał alternatywnego modelu pudełkowego, z dopełnieniem i obramowaniem wstawiającymi zawartość z dala od podanej szerokości. Więc przez jakiś czas przeglądarki używały różnych modeli pudełek! Kiedy jesteś sfrustrowany dzisiejszymi problemami ze współdziałaniem, ciesz się, że sytuacja się poprawiła, więc nie mamy do czynienia z przeglądarkami obliczającymi szerokość rzeczy w inny sposób.

Istnieje dobre wyjaśnienie modelu pudełkowego i rozmiaru pudełka w sztuczkach CSS, a także wyjaśnienie najlepszego sposobu globalnego użycia alternatywnego modelu pudełkowego w witrynie.

Normalny przepływ

Jeśli masz dokument z kodem HTML oznaczającym zawartość i przeglądasz go w przeglądarce, miejmy nadzieję, że będzie czytelny. Nagłówki i akapity zaczynają się w nowym wierszu, słowa są wyświetlane jako zdanie z pojedynczym odstępem między nimi. Tagi do formatowania, takie jak em, nie przerywają przepływu zdań. Ta zawartość jest wyświetlana w układzie normalnego przepływu lub bloku przepływu. Każda część treści jest opisana jako „w trakcie”; wie o reszcie treści, więc nie nakłada się.

Jeśli pracujesz z takim zachowaniem, a nie przeciwko temu, twoje życie staje się znacznie łatwiejsze. Jest to jeden z powodów, dla których zaczynanie od poprawnie oznaczonego dokumentu HTML ma wiele sensu, ponieważ dzięki normalnemu przepływowi i wbudowanym arkuszom stylów, które mają przeglądarki, które go szanują, treść zaczyna się w czytelnym miejscu.

Konteksty formatowania

Gdy masz już dokument z zawartością w normalnym przepływie, możesz zmienić wygląd części tej zawartości. Robisz to, zmieniając kontekst formatowania elementu. Jako bardzo prosty przykład, jeśli chcesz, aby wszystkie Twoje akapity biegły razem, a nie zaczynały się w nowym wierszu, możesz zmienić wyświetlany element p display: inline zmieniając go z bloku na kontekst formatowania wbudowanego.

Konteksty formatowania zasadniczo definiują typ zewnętrzny i wewnętrzny. Zewnętrzna kontroluje zachowanie elementu wraz z innymi elementami na stronie, wewnętrzna kontroluje wygląd elementów potomnych. Na przykład, kiedy mówisz display: flex , ustawiasz zewnętrzny jako kontekst formatowania blokowego, a dzieci mają kontekst formatowania flex.

Uwaga : Najnowsza wersja specyfikacji wyświetlania zmienia wartości display , aby jawnie zadeklarować wartość wewnętrzną i zewnętrzną. Dlatego w przyszłości możesz powiedzieć display: block flex; ( block jest zewnętrzną i flex jest wewnętrzną).

Przeczytaj więcej o display na MDN.

Znajdowanie się lub brak przepływu

Elementy w CSS są opisywane jako „w przepływie” lub „poza przepływem”. Elementy w przepływie otrzymują przestrzeń i ta przestrzeń jest szanowana przez inne elementy w przepływie. Jeśli usuniesz element z przepływu, przenosząc go lub pozycjonując, miejsce dla tego elementu nie będzie już respektowane przez inne elementy w przepływie.

Jest to najbardziej widoczne w przypadku przedmiotów pozycjonowanych bezwzględnie. Jeśli podasz pozycję position: absolute , zostanie ona usunięta z przepływu, musisz upewnić się, że nie dojdzie do sytuacji, w której element out of flow nachodzi na siebie i czyni nieczytelną inną część układu.

Jednak elementy pływające również są usuwane z przepływu i chociaż następująca treść będzie zawijać się wokół skróconych pól linii elementu pływającego, możesz zobaczyć, umieszczając kolor tła na polu następujących elementów, że elementy te wzniosły się i ignorują przestrzeń wykorzystywana przez pływający element.

Możesz przeczytać więcej o elementach w przepływie i poza przepływem na MDN. Ważną rzeczą do zapamiętania jest to, że jeśli usuniesz element z przepływu, musisz samodzielnie zarządzać nakładaniem się, ponieważ zwykłe zasady układu przepływu blokowego nie mają już zastosowania.

Układ

Od ponad piętnastu lat wykonujemy layout w CSS bez zaprojektowanego dla niego systemu layoutu pracy. To się zmieniło. Mamy teraz doskonale działający system układu, który obejmuje siatkę i Flexbox, ale także układ wielokolumnowy i starsze metody układania używane do ich rzeczywistego celu. Jeśli układ CSS jest dla Ciebie zagadką, przejdź do samouczka MDN Learn Layout lub przeczytaj mój artykuł Pierwsze kroki z układem CSS tutaj w Smashing Magazine.

Nie wyobrażaj sobie, że metody takie jak grid i flexbox w jakiś sposób konkurują ze sobą . Aby dobrze używać Layout, czasami okaże się, że komponent jest najlepszy jako komponent flex, a czasem jako Grid. Czasami będziesz chciał, aby multicol działał w kolumnie. Wszystko to są słuszne wybory. Jeśli czujesz, że walczysz ze sposobem, w jaki coś się zachowuje, jest to ogólnie bardzo dobry znak, że warto zrobić krok wstecz i spróbować innego podejścia. Jesteśmy tak przyzwyczajeni do hakowania CSS, aby robił to, czego chcemy, że prawdopodobnie zapomnimy, że mamy wiele innych opcji do wypróbowania.

Layout to moja główna specjalizacja. Napisałem wiele artykułów tutaj, w Smashing Magazine i w innych miejscach, aby spróbować oswoić nowy krajobraz Layout. Oprócz wspomnianego wyżej artykułu o układzie, mam całą serię na temat Flexbox — zacznij od tego, co się dzieje, gdy tworzysz Flexbox Flex Container. W Grid By Example mam całą masę małych przykładów CSS Grid — plus samouczek wideo screencast.

Ponadto — a zwłaszcza dla projektantów — sprawdź Jen Simmons i jej serię wideo Layout Land.

Wyrównanie

Oddzieliłem Wyrównanie od Układu ogólnie, ponieważ chociaż większość z nas zapoznała się z Wyrównaniem jako częścią Flexbox, te właściwości dotyczą wszystkich metod układu i warto je zrozumieć w tym kontekście, zamiast myśleć o „Wyrównaniu Flexbox” lub „Wyrównanie siatki CSS”. Mamy zestaw właściwości wyrównania, które działają w powszechny sposób, jeśli to możliwe; mają wtedy pewne różnice ze względu na sposób, w jaki zachowują się różne metody układu.

W MDN możesz zagłębić się w Box Alignment i sposób jego implementacji w Grid, Flexbox, Multicol i Block Layout. Tutaj, w Smashing Magazine, mam artykuł dotyczący wyrównania w Flexbox: Wszystko, co musisz wiedzieć o wyrównaniu w Flexbox.

Rozmiary

Spędziłem większą część 2018 roku, rozmawiając o specyfikacji Intrinsic i Extrinsic Sizing oraz o tym, jak odnosi się ona w szczególności do Grid i Flexbox. W sieci jesteśmy przyzwyczajeni do ustawiania rozmiaru w długościach lub procentach, ponieważ w ten sposób byliśmy w stanie tworzyć układy typu Grid za pomocą pływaków. Jednak nowoczesne metody rozmieszczania mogą zrobić za nas wiele dystrybucji przestrzeni — jeśli im na to pozwolimy. Zrozumienie, w jaki sposób Flexbox przypisuje przestrzeń (lub działa jednostka Grid fr ), jest warte twojego czasu.

Tutaj w Smashing Magazine pisałem o rozmiarach w układzie w ogóle, a także o Flexbox w How Big Is That Flexible Box?.

Elastyczny projekt

Nasze nowe metody układu Grid i Flexbox często oznaczają, że możemy ujść na sucho z mniejszą liczbą zapytań o media, niż potrzebowaliśmy w przypadku naszych starszych metod, ponieważ są one elastyczne i reagują na zmiany w widoku lub rozmiarze komponentu bez konieczności zmiany szerokości elementów. Jednak będą miejsca, w których będziesz chciał dodać punkty przerwania, aby jeszcze bardziej ulepszyć swoje projekty.

Oto kilka prostych przewodników po projektowaniu responsywnym, a w przypadku zapytań o media, ogólnie, zapoznaj się z moim artykułem Korzystanie z zapytań o media do projektowania responsywnego w 2018 roku. Przyglądam się, do czego przydatne są zapytania mediów, a także przedstawiam nowe funkcje, które pojawią się Zapytania o media na poziomie 4 specyfikacji.

Czcionki i typografia

Wraz z Layout, w ciągu ostatniego roku ogromne zmiany uległo także wykorzystaniu czcionek w sieci. Czcionki zmienne, dzięki którym pojedynczy plik czcionki może mieć nieograniczoną liczbę odmian, są tutaj. Aby dowiedzieć się, czym one są i jak działają, obejrzyj ten doskonały krótki wykład Mandy Michael: Variable Fonts and the Future of Web Design. Polecam również Dynamic Typography With Modern CSS and Variable Fonts autorstwa Jasona Pamentala.

Aby poznać czcionki zmienne i ich możliwości, firma Microsoft przygotowała zabawną wersję demonstracyjną oraz wiele placów zabaw, w których można wypróbować czcionki zmienne — najbardziej znana jest Axis Praxis (podoba mi się również Font Playground).

Gdy zaczniesz pracować z czcionkami zmiennymi, ten przewodnik po MDN okaże się niezwykle przydatny. Aby dowiedzieć się, jak zaimplementować rozwiązanie awaryjne dla przeglądarek, które nie obsługują czcionek zmiennych, przeczytaj Implementing a Variable Font with Fallback Web Fonts autorstwa Olivera Schondorfera. Edytor czcionek Firefox DevTools obsługuje również pracę z czcionkami zmiennymi.

Transformacje i animacja

Przekształcenia i animacje CSS to zdecydowanie coś, co muszę wiedzieć. Nie często muszę ich używać, a składnia wydaje się wyskakiwać z mojej głowy między użyciami. Na szczęście odniesienie do MDN pomaga mi i sugerowałbym rozpoczęcie od przewodników dotyczących używania przekształceń CSS i używania animacji CSS. Zell Liew ma również fajny artykuł, który zapewnia świetne wyjaśnienie przejść CSS.

Aby odkryć niektóre z możliwych rzeczy, zajrzyj na stronę Animista.

Jedną z rzeczy, które mogą być mylące w przypadku animacji, jest to, jakie podejście należy przyjąć. Oprócz tego, co jest obsługiwane w CSS, może być konieczne włączenie JavaScript, SVG lub interfejsu Web Animation API, a wszystkie te rzeczy mają tendencję do łączenia się w jedną całość. W swoim przemówieniu Choose Your Animation Adventure nagranym w An Event Apart, Val Head wyjaśnia dostępne opcje.

Używaj ściągawek jako przypomnienia, a nie narzędzia do nauki

Kiedy wspominam o zasobach Grid lub Flexbox, często widzę odpowiedzi, które mówią, że nie mogą zrobić Flexbox bez określonej ściągawki. Nie mam problemu ze ściągawkami jako pomocnikiem pamięci do sprawdzania składni, a niektóre z nich opublikowałem. Problem z całkowitym poleganiem na nich polega na tym, że możesz przegapić, dlaczego coś działa, gdy kopiujesz składnię. Następnie, gdy trafisz na przypadek, w którym ta właściwość wydaje się zachowywać inaczej, ta pozorna niespójność wydaje się zbijać z tropu lub jest to wina języka.

Jeśli znajdziesz się w sytuacji, w której CSS wydaje się robić coś bardzo dziwnego, zapytaj dlaczego . Utwórz skrócony przypadek testowy, który podkreśla problem, zapytaj kogoś, kto jest bardziej zaznajomiony ze specyfikacją. Wiele problemów CSS, o które mnie pytano, wynika z przekonania tej osoby, że właściwość działa inaczej niż w rzeczywistości. Dlatego dużo mówię o takich rzeczach jak wyrównanie i rozmiar, ponieważ są to miejsca, w których często występuje to zamieszanie.

Tak, w CSS są dziwne rzeczy. Jest to język, który ewoluował przez lata i są w nim rzeczy, których nie możemy zmienić — dopóki nie wynajdziemy wehikułu czasu. Jednak gdy już opanujesz pewne podstawy i zrozumiesz, dlaczego rzeczy zachowują się tak, jak się zachowują, znacznie łatwiej będzie ci poruszać się w trudniejszych miejscach.