Sacha Greif otwarcie się zastanawiał czy CSS stał się, wiesz, za duży. Ze wszystkimi gadżetami, które pojawiły się w przeglądarkach w ciągu ostatnich kilku lat — zapytania dotyczące kontenerów! względna składnia kolorów! kaskady warstw! właściwości logiczne! zakresy w zapytaniach o media! indywidualne przemiany! :has() selektor! — i wszystko, co jest na możliwym horyzoncie — Przełączniki CSS! gniazdowania! mieszanie kolorów! animacje połączone z przewijaniem! style o ograniczonym zakresie! — zdecydowanie inna jest obecnie krzywa uczenia się CSS, zarówno dla nowych, jak i doświadczonych front-endowców.
Być może był czas, kiedy można było poznać większość właściwości CSS i ich działanie. Te czasy już dawno minęły, przynajmniej dla takiego starego wyjadacza jak ja. Ale to nasuwa pytanie: jaki CSS koniecznie musisz znać?
Vincasa Stonysa ostatnio rzucił się na listę. Chris złożyć jedno oparty na funkcjach wydanych od czasu CSS3. Prawdopodobnie masz pomysł na to, co umieściłbyś na liście. Gdybym miał zebrać Top 5 i ograniczyć się tylko do właściwości i selektorów, mogłoby to wyglądać mniej więcej tak…
writing-mode
Nie mogę powiedzieć wystarczająco dużo o writing-mode własność. To, co sprawia, że jest to ważne — zwłaszcza z perspektywy uczenia się — polega na tym, że przygotowuje cię do integracyjnych zasad, które uwzględniają tworzenie układów, niezależnie od języka użytkownika. Dobre zrozumienie j writing-mode doprowadzi do zrozumienia właściwości i wartości logiczne, a te z kolei przygotowały grunt pod zrozumienie obiegu dokumentów i myślenia w kategoriach block, inline, start, end zamiast kierunków fizycznych.
display
Trudno mi uwierzyć, że ktoś może napisać dobry CSS bez solidnego zrozumienia display własność. Jest zarówno właściwością, jak i strukturą do tworzenia układów. Bez niego nie ma Flexbox ani CSS Grid, co czyni go swego rodzaju strażnikiem zrozumienia tych ważnych funkcji.
Plus display nieruchomość doskonale uzupełnia writing-mode. To jest dokładnie to, czego będziesz potrzebować raz writing-mode pokazało Ci przepływ dokumentów i logiczne kierunki. Będziesz potrzebować właściwości, aby zmienić normalny przepływ elementu (np. zmiana elementu blokowego na wbudowany) lub rozpocząć układanie rzeczy (np. Tworzenie elastycznego kontekstu układu) i właśnie tam display wchodzi w grę.
margin / padding / border
Ugh, całkowicie oszukuję tutaj, ale pomyśl o nauce margin, padding, border razem jest nieuniknione. Wszystkie są częściami Model pudełkowy, wszystkie pomagają w rozstawie i stylizacji, a wszystkie wymagają zapoznania się Jednostki długości CSS. Wiedza o tym, do czego te właściwości mają służyć i jak wpływają na obliczony rozmiar elementu, z pewnością daje dużo większą kontrolę nad stylem i rozwiewa wątpliwości co do tego, dlaczego element ma taki rozmiar — częsty ból głowy CSS!
::before i ::after
Kolejny, w którym trochę oszukuję. TAk, ::before i ::after to dwa osobne pseudoelementy, ale znowu nie wyobrażam sobie nauki o jednym bez drugiego. To dwójka!
Pamiętam, jak niesamowite było dla mnie odkrycie, że one istnieją i że można z nich stworzyć wszystko fajne efekty interfejsu użytkownika wypełnić ilustracje jednoczęściowe. Otwiera nowe możliwości i zapewnia pierwszy rzut oka na to, jak potężny jest naprawdę CSS.
@media
Uff, jestem już przy piątym i ostatnim elemencie na liście i czuję, że wciąż jest tak wiele dobrego CSS, które należy tutaj. Ale jeśli miałbym wybrać ostatnią rzecz, to byłaby to zapytania o media. Czemu? Ponieważ jest podstawowym składnikiem tworzenia płynnych, elastycznych układów i różnych kontekstów wyświetlania. Zapytania dotyczące kontenerów może skończyć się wyrzuceniem tego z mojej listy, gdy dojrzeje, ale na razie @media jest świetnym podkładem pod projektowanie responsywne.
Ponadto, @media to miły pierwszy krok do warunkowych właściwości CSS. Niezależnie od tego, czy piszemy zapytanie na podstawie typu używanego urządzenia (np. screen or print) lub gdy okno przeglądarki spełnia określone kryteria (np. width >= 768px), @media Składnia jest niezwykle przydatna do tworzenia układów zoptymalizowanych pod kątem różnych warunków.
Och, i nawet nie dotknęliśmy, jak to zrobić @media odnosi się do dostępności, dzięki swojej zdolności do stosować style w oparciu o preferencje użytkownika (na przykład, prefers-reduced-motion). Tak więc, oprócz tworzenia układów warunkowych, zapytania o media są miłym kolejnym krokiem w kierunku zrozumienia projektowania włączającego.
Honorowe wzmianki
Przekształcenie CSS w listę pięciu właściwości i selektorów, które trzeba znać, jest trudne, zwłaszcza teraz, gdy CSS jest potężniejszy niż był, powiedzmy, pięć lat temu. Jest wiele innych elementów, które naprawdę chciałem uwzględnić, takich jak (kolejność przypadkowa):
calc()has()colorfontoverflowposition(zwłaszcza to)z-index
Ale obstaję przy swoich wyborach. Nauka CSS jest ważniejsza niż zapamiętywanie listy właściwości. To podróż i myślę, że pięciu, których wybrałem, stworzyło fajną ścieżkę edukacyjną, która przygotowuje grunt pod napisanie zasad dobrego stylu i kolejne kroki do głębszego zanurzenia się w CSS.
Dobra, powiedz mi swoje!
Nie zgadzasz się z moją listą? Powinieneś! Założę się, że masz mądre opinie i chcę zobaczyć, jak uzupełniłbyś listę Top 5.
