5 kroków do radykalnego podniesienia wiedzy o CSS w ciągu 24 godzin
Kodujesz już od jakiegoś czasu i znasz swoją drogę do pliku CSS. Na pewno nie jesteś mistrzem, ale mając wystarczająco dużo skrzypków, możesz dostać się tam, gdzie chcesz. Zastanawiasz się jednak, czy kiedykolwiek zdołasz przekroczyć punkt, w którym CSS jest taką walką. Czy kiedykolwiek będziesz w stanie wyeliminować skomplikowany układ, nie uciekając się ostatecznie do prób i błędów, aby zobaczyć, co działa, a co nie?
Dobrą wiadomością jest to, że rzeczywiście możesz przejść przez ten frustrujący punkt, w którym znasz wystarczająco dużo CSS do kodowania strony internetowej, ale brakuje solidnych podstaw, które pozwalają ci pisać bez denerwującego niezrozumienia, w jaki sposób dojdziesz do miejsca, w którym „ idę, a ten punkt jest o wiele bliższy niż myślisz. Proponuję, aby było pięć tematów, które drastycznie poprawią twoje zrozumienie CSS. Poświęć trochę czasu na czytanie każdego z nich w ciągu następnych 24 godzin, a na zawsze zmienisz sposób kodowania.
Poznaj elementy Envato
1. Owiń swój umysł wokół kontekstów pozycjonowania
Jeśli naprawdę chcesz dobrze zrozumieć, jak używać CSS do przenoszenia elementów HTML do miejsca, w którym chcesz je przenieść, absolutnie musisz opanować konteksty pozycjonowania. I nie mam na myśli jedynie swobodnego zrozumienia, mam na myśli głęboką znajomość ich różnic, zachowań, dziwactw itp.
Jest właściwie pięć wartości pozycji, które powinieneś zrozumieć. Jeśli nie potrafisz wymienić wszystkich pięciu bez ich sprawdzenia, to z pewnością jesteś głównym kandydatem na ten kawałek edukacji. Oto one: statyczne, stałe, względne, absolutne i dziedziczone.
Musisz znać i rozumieć wszystkie pięć, ale dwie duże, które naprawdę zmienią sposób, w jaki kodujesz, to pozycjonowanie bezwzględne i względne. Nauka używania tych dwóch kontekstów pozycjonowania osobno, a następnie przeskakiwanie do ich wzajemnej współpracy, zasadniczo zmieni sposób, w jaki patrzysz na układ CSS, obiecuję. To rewelacja, która sprawi, że Twoja praca będzie nieskończenie łatwiejsza.
Zasoby, aby Cię tam dostać
Niski poziom bezwzględnego a względnego pozycjonowania
To jest moje głębokie zanurzenie w temat kontekstu pozycjonowania. Krótko wspominam i wyjaśniam wszystkie pięć, ale tak naprawdę skupiam się na dwóch wielkich: jak się różnią, jak się różnią i jak współpracują. Przeczytaj ten artykuł, a będziesz na dobrej drodze do bezproblemowego pozycjonowania CSS.
Pozycjonowanie CSS 101
Ten kawałek pochodzi z czcigodnego bloga A List Apart, więc od razu wiesz, że będzie on zarówno dokładny, jak i niezwykle edukacyjny. Artykuł został opublikowany w 2010 r., Ale informacje są nadal doskonale aktualne i stanowią doskonałe wprowadzenie do wszystkich pięciu kontekstów pozycjonowania. Nie jest to bardzo wizualny artykuł, ale zawiera wiele prostych przykładów kodu ułatwiających zapoznanie się z każdą koncepcją.
Naucz się pozycjonowania CSS w dziesięciu krokach
To fantastycznie krótki przegląd różnych kontekstów pozycjonowania. Zamiast jednego długiego zwijanego artykułu ta strona przedstawia małe pudełko z dziesięcioma zakładkami. Każda karta ma mały fragment kodu i zdanie lub dwa wyjaśniające kod. Po prawej stronie jest przykładowy układ na żywo, który aktualizuje się z każdą kartą. Ten format jest fantastyczny do wizualnego łączenia fragmentów kodu z tworzonymi przez niego układami i bardzo polecam nadanie mu wyglądu, jeśli masz problemy z głównie objaśnieniami tekstowymi, takimi jak powyższe z ALA.
2. Master Floats
Gdy uczysz się CSS po raz pierwszy, zmiennoprzecinkowe wydają się być jednym z najbardziej zepsutych układów, jakie można sobie wyobrazić. Gdy nauczysz się korzystać z nich na poziomie podstawowym, musisz dowiedzieć się wszystkiego o tym, jak rodzice zawierający tylko dzieci pływające mają zapadniętą wysokość, co prowadzi do czterdziestu siedmiu różnych sposobów rozwiązania problemu za pomocą poprawek i manipulacji przepełnieniem.
Na szczęście na dłuższą metę przyzwyczajasz się do koncepcji kryjących się za pływakami, a nawet stają się tak łatwe w użyciu, że nie dajesz im wiele do myślenia. Jedyne, co stoi między tobą a tym celem, to solidny artykuł lub dwa, które naprawdę wnikają i dokładnie wyjaśniają od samego początku zachowanie i techniki pływaka.
Zasoby, aby Cię tam dostać
Wszystko, czego nigdy nie wiedziałeś o pływakach CSS
W tym artykule omawiam prawie całą gamę tematów dotyczących pływaków w CSS. Zaczyna się od podstawowej dyskusji o tym, czym są pływaki i jak działają. Następnie mówię o tym, jak pływaki wpływają na pola zaangażowanych elementów, o tym, jak pływaki stają się dziwne z elementami o różnych wysokościach, dziewięciu regułach, które obejmują zachowanie pływaka i, oczywiście, upadek zawalonej wysokości i jak to naprawić.
Wszystko o pływakach
Chris Coyier zawsze był moim ulubionym autorem, jeśli chodzi o tematy związane z CSS, a jego wprowadzenie do floatów nie zawodzi. Jeśli szukasz krótkiej, ale bezpośredniej dyskusji na temat pracy z pływakami, ten kawałek Cię omawia. Szczególnie podoba mi się proste, atrakcyjne ilustracje użyte w całym artykule.
Tajemnica właściwości CSS Float
Chociaż prace Chrisa Coyiera są zazwyczaj krótkie i na temat, zawartość Smashing Magazine jest zwykle dość obszerna z mnóstwem przykładów i odpowiedniej dyskusji. W tym artykule wprowadzono pojęcie pływaków, opowiesz o tym, jak je używać i czyścisz, a następnie rozpoczyna dyskusję na temat tego, gdzie zwykle widzisz pływaki w prawdziwych witrynach. Jeśli chcesz zobaczyć teorię, ta jest dla Ciebie.
3. Poznaj swoje selektory
Jednym z kluczy do napisania dobrego, czystego CSS jest dokładne poznanie dostępnych selektorów CSS, sposobu ich działania oraz stopnia, w jakim są obsługiwane w różnych przeglądarkach. Brzmi jak dość prosty temat, ale w rzeczywistości świat selektorów CSS jest dość złożony.
Istnieje wiele różnych ciekawych rzeczy do nauczenia się tutaj, od używania selektorów wartości atrybutów i kierowania słów kluczowych w nazwach klas po to, jak selektor uniwersalny może być pomocny w debugowaniu kodu. Nawet jeśli uważasz, że możesz sobie poradzić osobiście, nie rozumiejąc mnóstwa fantazyjnych selektorów, prawda jest taka, że inni koderzy używają tych rzeczy każdego dnia i musisz być w stanie zrozumieć, co widzisz po przejściu do źródła widoku!
Zasoby, aby Cię tam dostać
Selektory CSS: Tylko podstępne bity
To zabawny artykuł, który dotyczy przede wszystkim bardziej skomplikowanych aspektów selektorów CSS. Pomijam rzeczy z poziomu gruntu i zaczynam od razu omawiać, w jaki sposób koncepcja DOM przekłada się na ukierunkowanie różnych aspektów twojego dokumentu za pomocą CSS. Dowiesz się wszystkiego o tym, jak wybierać dzieci i rodzeństwo, jak łączyć selektory i wiele więcej.
30 selektorów CSS, które musisz zapamiętać
Jeffrey Way jest gwiazdą rocka dla twórców stron internetowych, a artykuły tego typu dowodzą, dlaczego. Ten artykuł Nettuts + obejmuje szeroką gamę selektorów CSS w prostym i krótkim formacie, który kładzie duży nacisk na obsługę przeglądarki. O dziwo, Jeff nawet zakodował przykładowe strony na żywo dla każdego z trzydziestu selektorów.
Selektory atrybutów CSS: jak i dlaczego powinieneś ich używać
Selektory wartości atrybutów są jednym z najsilniejszych podzbiorów selektorów CSS, a CSS3 naprawdę zwiększa tę moc. Nie uwierzysz, jak wszechstronni mogą stać się twoje selektory dzięki małej magii wartości atrybutów. Po przeczytaniu tego artykułu będziesz chodził po frazach takich jak „arbitralny selektor wartości atrybutu substring” jak profesjonalista.
4. Naucz się koncepcji kodowania DRY
„Nie powtarzaj się”. Ta prosta fraza ma drastyczne implikacje, jeśli chodzi o kodowanie. Kiedy naprawdę zagłębisz się w praktyki kodowania DRY, rezultatem jest czystszy kod, mniej pracy i piękny nowy przepływ pracy, który jest tak samo mocny, jak niesamowity.
W przeciwieństwie do innych powyższych tematów, które są dość wąskie, ten jest dość obszernym przedmiotem, który obejmuje wszystkie rodzaje praktyk, technik i pomysłów. Co ciekawe, jedną z rzeczy, które ostatnio zwróciły moją uwagę na praktyki kodowania DRY, jest wykorzystanie preprocesorów CSS.
Chociaż wielu twierdzi, że procesory wstępne prowadzą do złych praktyk kodowania, rzeczywistość jest odwrotna. Oczywiście same preprocesory pomagają uniknąć ręcznego powtarzania, ale wykracza to poza to. Zbadanie wyników takich narzędzi jak LESS i SASS oraz celów dla języków w ogóle doprowadziło mnie do napisania lepszego czystego CSS! Kiedy opanujesz pojęcia takie jak @extend w Sass, nie możesz przestać myśleć o implikacjach, gdy kodujesz tylko CSS.
Zasoby, aby Cię tam dostać
DRY CSS: Nie powtarzaj swojego CSS
W tym artykule Steven Bradley wprowadza Cię w temat DRY CSS i omawia niektóre z jego głównych zasad i celów. Sprowadza praktykę do trzech prostych pomysłów i pokazuje, jak wdrożyć te pomysły w prawdziwym przepływie pracy. Koncepcje zostały w dużej mierze zapożyczone z prezentacji Jeremy Clarke na ten sam temat.
Wprowadzenie do Object Oriented CSS (OOCSS)
Jak wspomniałem wcześniej, idee związane z ruchem DRY CSS są dość dalekosiężne i bezpośrednio związane z koncepcjami w innych konstrukcjach. OOCS to coraz bardziej popularna metodologia, której celem jest pomoc w tworzeniu szybszych, wydajniejszych arkuszy stylów o doskonałej organizacji i mniejszej liczbie powtórzeń. W OOCS działają dwie główne zasady: oddzielenie struktury od skóry oraz oddzielenie pojemników i zawartości. Ten artykuł ze Smashing Magazine poprowadzi Cię przez podstawowe pomysły i pomoże Ci zastosować je do własnej pracy.
Wprowadzenie do wytycznych SMACSS dotyczących pisania CSS
Pamiętasz Stevena Bradleya z pierwszego artykułu na temat DRY CSS? Napisał także ten artykuł, który wyjaśnia projekt podobny do OOCS: SMACSS (projekt Jonathana Snooka). Podobnie jak w przypadku OOCSS, SMACSS ma dwa główne cele. Pierwszym z nich jest zwiększenie wartości semantycznej sekcji HTML i treści, a drugim zmniejszenie oczekiwań konkretnej struktury HTML. W tym artykule szczegółowo objaśniono oba cele i podano przydatne przykłady kodu, dzięki czemu można zobaczyć działanie SMACSS.
5. Poznaj obsługę swojej przeglądarki
Piąty i ostatni klucz do ulepszenia twojego CSS to wiedzieć, gdzie działa. CSS3 jest zbyt kuszący, aby większość z nas mogła go zignorować, ale twarda prawda jest taka, że cała jego część nie działa w niektórych przeglądarkach (przez „niektóre przeglądarki” mam oczywiście na myśli IE).
Wielkim sekretem, który programiści dla początkujących muszą zrozumieć, nie jest to, że muszą zapamiętać każdą funkcję CSS i sposób, w jaki obsługuje ją każda znana przeglądarka, ale to, że istnieją absolutnie niesamowite zasoby, które dają ci te informacje swobodnie, musisz tylko wiedzieć, gdzie szukać.
Zasoby, aby Cię tam dostać
Obsługa gwoździowania w CSS3 i HTML5: nieocenione zasoby do wykorzystania dzisiaj
W tym artykule przedstawiam ci stosunkowo niewiele witryn, które dodałem do zakładek w celu sprawdzenia obsługi przeglądarki. Te zasoby są fantastyczne, wizualne i podają informacje, których potrzebujesz w mgnieniu oka, abyś mógł wrócić do kodowania. Zobacz, jakie są!
Obsługa przeglądarki CSS3: Jaki jest obecny stan?
Ten artykuł został napisany ponad rok temu, więc dyskusja na temat „obecnego statusu” jest niewystarczająca, aby informacje w tym artykule stały się nieaktualne. Służy jako niezwykle pomocny przegląd różnych właściwości CSS3, podzielony na sekcje w zależności od tego, co działa wszędzie i na co należy uważać. Przejście zajmie Ci tylko kilka minut i jest warte przeczytania.
Znaczenie kompatybilności między przeglądarkami: Wskazówki i zasoby
Jeśli naprawdę znasz się na CSS i potrzebujesz podstawowego wprowadzenia do tematu kompatybilności z przeglądarkami i dlaczego jest to ważne, w tym artykule o Noupe znajdziesz informacje. To coś więcej niż tylko oferowanie idei kompatybilności, ale zawiera listę świetnych zasobów, które możesz wykorzystać, aby zapewnić maksymalną kompatybilność. Szczególnie interesująca jest lista narzędzi, które pomogą Ci przetestować witrynę w różnych przeglądarkach.
Czy mam to wszystko przeczytać w ciągu 24 godzin?
Przedstawiłem ci pięć absolutnie krytycznych tematów do studiowania i nie mniej niż piętnaście artykułów, z których możesz nauczyć się zasad, które musisz znać. Wszystko dobrze i dobrze, ale w moim tytule obiecałem, że poprawisz się w ciągu jednego dnia i nie wszyscy będą mieli czas usiąść i przeczytać piętnaście długich artykułów!
Dobrą wiadomością jest to, że dałem ci trzy artykuły na każdy temat, abyś miał wybór do wyboru. Wyjaśniłem szczegółowo zawartość każdego z nich, abyś mógł wybrać ten, który najlepiej odpowiada Twoim potrzebom. Pamiętaj, aby wybierać artykuły do przeczytania nie na podstawie tego, co wiesz, ale tego, czego nie wiesz. Postaw sobie za cel uzupełnienie braków w wiedzy.
Moją sugestią jest przejrzenie powyższej treści i wybranie pięciu artykułów do przeczytania (po jednym z każdej sekcji). Nawet to wiele do zrobienia w ciągu jednego dnia, ale większość z nich to niewiele więcej niż tysiąc słów, wiele z nich jest mniej. Jestem pewien, że możesz to zrobić. Jeśli nie możesz, nie ma problemu. Zmień swój cel doskonalenia umiejętności CSS w ciągu tygodnia i czytaj jeden z pięciu wybranych artykułów każdego dnia przez następne pięć dni. Gwarantuję, że w przyszłym tygodniu będziesz dużo lepszy w pisaniu przejrzystego, zwięzłego, kompatybilnego i wielokrotnego użytku CSS.
Jakie inne koncepcje polecasz?
Teraz, gdy przeczytałeś moje pięć najważniejszych tematów, które ludzie powinni odświeżyć, aby poprawić swoje umiejętności CSS, chcę usłyszeć od ciebie. Jakie inne tematy, Twoim zdaniem, zwykle zmagają się koderzy CSS i jakie zasoby polecasz osobom, które chcą dowiedzieć się więcej?
Zdjęcia udostępnione dzięki uprzejmości BigStock
