Najlepsze praktyki CSS: dziewięć oznak złego CSS
Opublikowany: 2020-12-16CSS lub Cascading Style Sheets - język, który określa, jak strona internetowa powinna wyglądać, a czasem zachowywać się. Jest często pomijany przez twórców stron internetowych jako „łatwy” język, który nie wymaga zbytniej uwagi. Najlepszym sposobem jest zapamiętanie niektórych z najczęstszych właściwości, ogólnego przepływu i wyszukiwania w Google bardziej niejasnych właściwości. Ale, jak wiedzą bardziej doświadczeni programiści, żaden język nie zasługuje na to, aby go przeoczyć, ponieważ zawsze istnieją dobre i złe sposoby na zrobienie czegoś.
Dzięki CSS bardzo łatwo jest zrobić coś źle, ponieważ nie ma kompilatora, który generuje błędy, nie ma ostrzeżeń ani powiadomień o złych implementacjach. Język programowania, taki jak JavaScript, ma mnóstwo narzędzi, które śledzą dobrą jakość kodu, a niektóre nawet wysyłają komunikaty do programisty, że dana funkcja nie została zaimplementowana we właściwy sposób.
W tym stosunkowo krótkim poście przyjrzymy się niektórym typowym problemom, z którymi borykają się programiści, i sposobom ich rozwiązania. Nie chodzi o konkretne szczegóły implementacyjne dla konkretnego komponentu wizualnego. Zamiast tego lista koncentruje się na procesach myślowych, architekturze i podejściach.
Złożoność CSS
Czy CSS jest trudny? Nie! Zdecydowanie nie, ma kilka bardzo podstawowych zasad strukturalnych. Masz selektory (klasa, id, element), masz właściwości i masz zasięg. To znacznie mniej niż język taki jak C, Java czy PHP. Deweloper może zrozumieć cały pomysł w ciągu kilku minut czytania i rozpoczynania stylizacji. Oczywiście, aby poznać różnicę między marginesem a wypełnieniem, możesz rzucić okiem na w3schools, ale kiedy ich użyć, będzie to wymagało trochę doświadczenia. Ale to nie jest fizyka jądrowa.
Teraz to, co sprawia, że sprawy są nieco bardziej złożone, to wszystkie sposoby, w jakie ścigają się selektory, które zastępują następną, i jak jedna właściwość wpływa na inną (na przykład display: block vs display: inline). Następnie mamy mniejsze szczegóły, takie jak zwijanie marginesów, układanie w stosy z indeksem, właściwości wydajności GPU i procesora, model pudełkowy i właściwości typografii.
Co więcej, nowe funkcje CSS, które nie zawsze są implementowane w ten sam sposób w różnych przeglądarkach, niektóre nawet nie są implementowane wcale, a inne wymagają innych właściwości.
Jeśli przyjrzymy się dwóm powyższym akapitom, zobaczymy dwa główne etapy, które twórcy front-endu osiągnęli podczas pracy z CSS - jeden z nich to „ Och, czy to wszystko? ”A drugi to„ Och ****, to nie wszystko ”. To właśnie oznacza „złożoność CSS”
Jest wiele powiązanych ze sobą małych rzeczy, które trudno jest skalować. Jeśli zbudujesz tylko jeden element, jest to łatwe - stylizujesz wszystko, co widzisz, i to działa. Ale umieść ten pojedynczy składnik w większej aplikacji, a zostaną zastosowane dodatkowe style. Możesz skończyć z tą samą klasą, co coś innego (np. .Button), a Twoje style zostaną zastosowane w całej aplikacji, psując wszystko. To stresujące!
WordPress CSS: Podstawowy przewodnik dla początkujących
Jak pisać CSS: walka ze złożonością
Istnieje kilka rozwiązań, które wymyślili inteligentni ludzie, przegląd byłby następujący:
- Konwencje nazewnictwa CSS, takie jak BEM, SMACSS i inne, które definiują reguły nazw klas, które zmniejszają możliwość kolizji.
- CSS w JS to nowsza metoda, która praktycznie pozwala pisać komponenty CSS w plikach JS (źle brzmi, źle wygląda, ale przynajmniej ma sens). Dotyczy głównie React, Vue i innych.
- Moduły CSS to bardziej rozsądne podejście do CSS w JS dla kogoś, kto kończy wszystkie style w jednym pliku. Moduły CSS hermetyzują style każdego komponentu, aby nie przeciekały do innych komponentów, co znacznie ułatwia ich ponowne użycie. Znacznie zmniejsza też stres!
Pierwsza - Konwencja nazewnicza jest prawdopodobnie najtrudniejsza do zaimplementowania, ponieważ nie ma narzędzi, które mogłyby ci pomóc. Programistom pozostawia wszystko to, aby zrozumieć i zastosować konwencję. Nadal musisz pomyśleć o nazwach klas, one nadal nie powinny kolidować, a następnie musisz zmusić cały zespół do podążania za nimi. Całkiem twardy!
CSS w modułach JS i CSS to poprawki implementacyjne. Zmieniają kod wyjściowy jako całość, co praktycznie uniemożliwia wyciek stylów. Jednak wymagają one zupełnie innego sposobu myślenia i konfiguracji, co nie zawsze jest wykonalne lub pożądane.
Najlepsza rada to: Zapoznaj się z najpopularniejszymi i skutecznymi konwencjami nazewnictwa, użyj tego, który pasuje do standardów kodowania Twojej firmy lub ekosystemu. Zrozum podział komponentów i zacznij myśleć w kategoriach zakresu i pojedynczych jednostek, które tworzą dużą aplikację. Od początku nie jest to duża aplikacja, której nie da się zarządzać.
Jeśli pracujesz na stosie, który zawiera bibliotekę, taką jak React, lub framework, taki jak Vue, zapoznaj się z dodatkowymi narzędziami, które umożliwiają zarządzanie stylami za ich pomocą. Dla każdego początkującego i średnio zaawansowanego programisty CSS, byłyby one bardzo pomocne! I możesz nigdy nie chcieć ich porzucić, chyba że pojawi się coś lepszego.
Miej oko na nowe narzędzia! Powstrzymują nas od walki z problemami, które społeczność programistów już znalazła, naprawiła i zapewniła sposób na ich rozwiązanie.
Teraz, gdy przedstawiliśmy już, co oznacza złożoność CSS i kilka wskazówek dla początkujących, jak z nią walczyć, przejdźmy do bardziej szczegółowego przeglądu i przedstawmy bezpośrednie przykłady.
Wskazówki dotyczące projektowania stron internetowych: jak ulepszyć swoją grę w projektowaniu stron internetowych
Dziewięć oznak złego CSS
Ta lista zdecydowanie nie jest kompletna, a nie długą milą. Niestety, napotkasz niezliczone inne problemy i miejmy nadzieję, że znajdziesz bezpośrednie rozwiązania konkretnego problemu w witrynach takich jak Stackoverflow.
Jeśli jednak chcesz przyspieszyć swoją grę, gdy naprawisz problem z kilkoma wierszami css, musisz zrozumieć, co robią. Dlaczego musiałeś zmienić swoje znaczniki i dlaczego musiałeś zmienić kilka selektorów, właściwości?
Marginesy działają dziwnie
Częstym problemem dla programistów jest sytuacja, gdy dwa elementy nie sumują się na swoich marginesach (górny / dolny). Na przykład mamy dwa elementy <p> z marginesem: 20px 0 ;. Całkowita przestrzeń między nimi wynosi 20 pikseli, a nie 40. Wynika to z zapadania się marginesów. Z wyjątkiem sytuacji, gdy elementy pływają lub są absolutnie ustawione. Ten „wyjątek” jest prawie wszędzie i dla prawie każdej definicji.
Indeks Z: 9999999 i nadal nie jest na szczycie indeksu Z: 1
Przede wszystkim rzadko istnieje potrzeba pisania tak wysokich indeksów z. Widziałem nawet wartości takie jak 99999999999999 lub więcej. Po pierwsze, maksymalna wartość indeksu z wynosi 2147483647, więc wszystko powyżej jest bezużyteczne. Po drugie, to tak nie działa. To, które elementy znajdują się na górze, jest definiowane przez kontekst stosu, a nie tylko wartość indeksu z. Zobacz grafikę poniżej:
Brak animacji właściwych właściwości
To dość proste pytanie, ale niektórzy programiści mają problemy z animacjami i podejściem. Po pierwsze, co można animować? Wszystko, co może mieć wartość początkową, końcową i wszystko pomiędzy. Krycie jest taką właściwością, możesz zaczynać od 0, kończyć na 1 i dodawać nieskończone kroki między np. 0,3, 0,6758, 0,9875 itd. Nie możesz animować „wyświetlania”, ponieważ nie ma środkowych kroków między wstawką a siatką.
Nieskuteczne animacje
Najczęstszym powodem złego FPS w animacjach jest animacja niewłaściwych właściwości. Jeśli zmienisz właściwość „left” elementu absolutnego, będziesz używał procesora do obliczeń. Jeśli jednak użyjesz transformacji, będzie to GPU. A GPU, jak wszyscy wiemy, lepiej radzi sobie z grafiką.

Ale jak ożywisz cień, skoro nie ma alternatywy, takiej jak left / transform? Cóż, animuj krycie! Mają dwa elementy, jeden z początkiem, stanem, drugi ze stanem końcowym. Następnie zanikaj początek i koniec. To sprawi, że cień się rozszerza, podczas gdy w rzeczywistości tylko zanika.
Jeśli to możliwe, NIE animuj elementów, które mają wpływ na układ. Obliczenia układu są drogie, a procesor może wykonać tylko ograniczoną liczbę obliczeń. Często mniej niż raz na 16 ms, co spowoduje FPS poniżej 60.
Zbyt głębokie selektory
Co to jest modyfikator? Klasa, którą możesz dodać do innej klasy i zamienić niektóre jej właściwości. Przykład: .button ma kolor: czerwony. . przycisk-podstawowy, ma kolor: niebieski. Więc kiedy dodasz .button-primary do .button, chcesz otrzymać niebieski kolor. Bułka z masłem. Chociaż nie za każdym razem jest to takie proste. I nie za każdym razem, gdy jest to taki element.
Czasami chcemy nadpisać komponent będący dzieckiem innego komponentu na określonej stronie. Tak więc otrzymujemy coś takiego:. Nazwa-strony. Nazwa-sekcji .component-1 .component-2 {…} Już cztery poziomy. Ale okazuje się, że możemy po prostu zrobić .page-name .componen-2 {…}. Krótszy znaczy lepszy! Bo jeśli zdarzy się, że z jakiegoś powodu musisz nadpisać ten nowy styl, nie musisz wchodzić na 5 poziomów w głąb, potem na 6, a potem dalej.
Głębokie selektory są przerażające, a ludzie w końcu używają! Ważne. ! ważne powinno być używane, gdy chcesz nadpisać wbudowane style, nad którymi nie masz kontroli. W przeciwnym razie jest to czerwona flaga, że nie robisz czegoś dobrze.
Za duży plik
Oczywiście w przypadku dużej aplikacji byłoby wiele stylów i jest to całkowicie zrozumiałe. Ale czy zawsze jest tak duży? Zły sposób rozszerzania klas w SASS (poprzez miksery) generowałby duże łańcuchy selektorów, których przewijanie w celu wyświetlenia ich wszystkich zajmie kilka sekund. Właściwe rozszerzenie znacznie zmniejszyłoby ten plik. Może nawet podwoić rozmiar.
Uwzględnione struktury, z których tylko kilka właściwości jest używanych, są również częstym powodem tworzenia dużych plików. Połącz razem bootstrap / Foundation, font-awesome, animate.css i kilka innych podobnych frameworków / bibliotek, a otrzymasz ogromny plik, z którego używasz około 2%. Posprzątaj, utrzymuj porządek i używaj tylko tego, co jest naprawdę potrzebne. Często nie ma nawet potrzeby tworzenia frameworka.
Framework, gdy nie jest potrzebny
Bootstrap, Foundation, UIKit i wszystkie inne frameworki są świetne! Rozwiązują prawdziwy problem i są niezwykle cenne dla społeczności programistów internetowych. Nie trzeba dobrze znać języka HTML lub CSS, aby tworzyć kokpity i witryny. Ale odejdź od tego przypadku, zacznij pisać CSS, a napotkasz kilka problemów.
- Musisz dobrze zrozumieć, jak je budować i jak je uwzględniać
- Musisz przeczytać ich dokumentację, aby znaleźć niestandardowe ustawienia i miksy, które zapewniają.
- Musisz przestrzegać ich znaczników i nauczyć swój zespół, jak to zrobić.
- Musisz naprawdę zrozumieć, jak rozszerzać i stylizować, aby stworzyć niepowtarzalny widok.
Właściwe ich uwzględnienie oznacza, że używasz tylko tego, czego potrzebujesz. Aby taka struktura pomogła ci, zamiast zabraniać budowania czegokolwiek niestandardowego, musisz wiedzieć, że jego wewnętrzne działanie jest lepsze niż przeciętne. Aby uzyskać dowolny projekt niestandardowy, będziesz musiał zmodyfikować ustawienia i właściwości. A następnie napisz niestandardowy CSS. I ten niestandardowy CSS do nadpisania wszystkiego, co daje framework.
Więc jeśli nie ma rzeczywistej potrzeby takiego frameworka CSS, ale nadal istnieje i nie został prawidłowo wykorzystany, jest to czerwona flaga, że coś jest nie tak. A kiedy raz z nim zaczniesz, najprawdopodobniej skończysz z nim do końca cyklu życia projektu. Więc to ważna decyzja.
Brak zezwolenia treści na definiowanie rozmiaru
Ten jest bardziej problemem na poziomie początkującym, ale jest bardzo powszechny. Powinieneś dać treści wolność, na jaką zasługuje.
Na przykład nie chcesz ustawiać właściwości width witryny na 1200px. Chcesz ustawić maksymalną szerokość na 1200 pikseli. W ten sposób widoczny obszar pozwoli Twojej witrynie na zachowanie responsywności.
Wtedy pole wejściowe nie powinno mieć wysokości 40 pikseli, powinno mieć wypełnienie 1em. Teraz rozmiar czcionki, zawartość definiuje rozmiar. A jeśli zawartość wewnątrz rośnie, element się nie zepsuje.
Ten sposób myślenia podczas definiowania rozmiarów pozostaje ważny w całej aplikacji. Każda nieruchomość musi to wziąć pod uwagę. Najlepiej nie ustawiaj% dla szerokości w obszarze zawartości, ponieważ wtedy musisz również pisać zapytania o media.
Jeśli masz maksymalną szerokość, kiedy twoja przeglądarka kurczy się poniżej tej maksymalnej szerokości, zawartość wypełni szerokość przeglądarki, a następnie zmniejszy się normalnie. W przeciwnym razie musiałbyś napisać zapytanie o media dla tego rozmiaru. A potem dla każdego innego niestandardowego rozmiaru zapisanego na stronie. Jest to złożoność dodana z powodu złego podejścia. Prawie to samo, co wszystkie inne punkty, które już omówiliśmy.
Hacki JavaScript
JavaScript potrafi zdziałać cuda! Ale nie zawsze jest to potrzebne. Możesz zrobić tak wiele za pomocą dobrze obsługiwanego CSS, który nie wymaga funkcjonalności (najlepiej testowanej później automatycznie) i nie wymaga od innych członków FE znajomości JS.
Oczywiście istnieje standardowa funkcja przełączania, w której można użyć pola wyboru, aby zmienić style, gdy: zaznaczone, istnieje nakładka tła, która może być łatwo wyzwalana i są właściwości takie jak counter, aby utworzyć więcej niż proste listy <ol> .
Zaleca się, aby najpierw poszukać rozwiązań CSS. Powiedzmy, że chcesz utworzyć wyskakujące okienko. Pojawia się na środku (pozycja: stała). Następnie chcesz go zamknąć za pomocą ikony [X] lub po kliknięciu wokół niego. W JS musiałbyś napisać zdarzenia, które wywołałyby cokolwiek poza treścią wyskakującego okienka. Ale nadal wyzwalaj na [X], który jest w treści wyskakującej.
Zamiast tego z CSS możesz po prostu napisać kolejny <div>, który ma rozmiar 100vw, 100vh i indeks Z tuż pod wyskakującym okienkiem. Następnie możesz po prostu kierować reklamy na ten element DIV w JS, który jest jednowierszowy.
Inny przykład - chcesz mieć przycisk, który możesz umieścić w treści, który „rozwinie” każdą następującą po nim treść. Proste z CSS, nieco bardziej złożone z JS. Z CSS możesz zrobić coś takiego:
Label.button - wizualnie stylizuje przycisk.
Wejście: nie (: zaznaczone) ~ * {display: none} - ukryj wszystko po nim w tym samym kontenerze.
Ten kawałek „w tym samym kontenerze” wymaga niestandardowej logiki w JS. Musisz także zaznaczyć wszystkie elementy, co wymaga przejścia przez drzewo DOM. A potem zastosuj do nich style CSS, co skończy się na tagu style = ””, co z kolei wymagałoby! Ważne, jeśli z jakiegoś powodu musisz się do nich odnieść. Na szczęście w CSS jest to niezwykle proste.
Droga do zostania dobrym projektantem stron internetowych
Wniosek
Jak widać, są to bardzo nieliczne typowe problemy. Aby opisać je wszystkie, potrzebna byłaby książka. Ale miejmy nadzieję, że dadzą ci dobry punkt wyjścia i przypomną ci, abyś pomyślał o każdym potencjalnym problemie, który może wyniknąć z niewłaściwego podejścia. Lokalizowanie takich problemów wiąże się z dużym doświadczeniem i dużą ilością czytania. A jeśli doszedłeś do tego wniosku, to jesteś na dobrej drodze z czytaniem, teraz czas na praktykę!
DevriX WordPress Development Retainers
Długoterminowy rozwój, wsparcie i innowacje dla Twojej platformy WordPress. DevriX zapewnia partnerstwo techniczne dla MŚP i szybko rozwijających się startupów. Tworzymy rozwiązania WordPress i skalujemy platformy generujące do 20000000 odsłon miesięcznie.