25 Pro Porady dla poprawy przepływu pracy CSS

Pisanie CSS może być niechlujne, powolne i zajmuje wieki, aby debugować, gdy masz dużo zmian w projekcie i układzie w jednym arkuszu stylów.

Przejdźmy więc od razu do tego: zebrałem kilka najbardziej przydatnych sztuczek i technik poniżej, aby poprawić wydajność podczas kodowania CSS. Może nawet stanowić przydatny punkt odniesienia podczas opracowywania następnego projektu.

Wkopmy się.

1. Właściwości Pakietu

Jeśli zauważysz, że w kółko piszesz te same właściwości, sprawdź, czy możesz je obciąć, usuwając niepotrzebne klasy i identyfikatory. Następnie dodaj wszystkie wspólne właściwości do pozostałych sekcji.

Jeśli możesz sparować swoje sekcje,możesz pomóc stworzyć bardziej wydajny plik do uruchomienia i o wiele szybciej kodować. To jest również miejsce, gdzie planowanie arkusza stylów wcześniej naprawdę się przydaje.

2. Użyj identyfikatorów dla Stałych

Niefortunnym ograniczeniem CSS jest to, że nie można zdefiniować stałych, jak można w PHP. Stałe są terminami, które można zdefiniować raz i które zawierają odpowiednie dane, których chcesz użyć.

Możesz przestać wpisywać kilka stylów w kółko i wpisać tylko jeden termin ustawiony dla bloku projektu. Ponieważ CSS nie został stworzony do programowania witryny, ale tylko do działania jako projektant wnętrz, że tak powiem, nie ma możliwości tworzenia stałych.

Mimo to jest to coś, co byłoby tak przydatne, zwłaszcza w przypadku, gdy łączenie Twoich właściwości po prostu nie będzie działać dla ciebie.

Co możesz zrobić, to utworzyć identyfikator, który zawiera wszystkie potrzebne style. Kiedy faktycznie musisz go użyć, po prostu dodaj selektory, których potrzebujesz do deklaracji. To zdecydowanie sprawia, że pisanie CSS jest dużo szybsze.

3. Komentuj Swoje Stałe

Oczywiście, CSS nie zawiera stałych, ale to nie znaczy, że nadal nie możesz napisać referencji dla tego, co w przeciwnym razie byłoby stałymi. Dlaczego nie wymienić wspólnych stylów w komentarzu wielowierszowym?

Sposób pisania zależy od ciebie, ale możesz umieścić go po spisie treści, aby wyglądał podobnie do tego przykładu:

Jest to szczególnie pomocne dla mnie, ponieważ często zapominam o moim schemacie kolorów w połowie mojego arkusza stylów. Przypomnienie w pobliżu pomaga przyspieszyć proces kodowania, ponieważ wiesz dokładnie, gdzie szukać i nie będziesz musiał przeszukiwać góry CSS, aby znaleźć punkt, w którym ostatnio odwoływałeś się do określonego stylu.

4. Selektory Grup

Dlaczego jednak na tym poprzestać? Skoro już przy tym jesteś, dlaczego nie zgrupować tak wielu selektorów, jak możesz razem? Możesz potencjalnie uchronić się przed wpisaniem jeszcze większej liczby tych samych stylów.

Chociaż może to nie zadziałać we wszystkich przypadkach, a powyższy przykład prawdopodobnie nie będzie miał zastosowania do Twoich konkretnych potrzeb, może służyć jako przypomnienie o następnym kodowaniu CSS, aby zaoszczędzić czas i zaoszczędzić miejsce.

5. Użyj preprocesora

Preprocesor CSS jest rozszerzeniem zwykłego języka CSS, który pomaga szybciej kodować, a także dodaje wiele innych funkcji, które normalnie nie byłyby dostępne do użycia.

Najczęstsze preprocesory CSS dla WordPress to SASS i LESS, a możesz dowiedzieć się, jak z nich korzystać, sprawdzając naszą listę zasobów CSS, którą niedawno opublikowaliśmy. Znajduje się w nim wiele linków do nauki wszystkiego, czego potrzebujesz, aby od razu zacząć korzystać z SASS i LESS.

Preprocesory CSS zyskują dużo pary i nietrudno zrozumieć, dlaczego gdy zobaczysz, jak szybko możesz tworzyć z nimi arkusze stylów.

6. Miłość / Nienawiść Pseudo Klasy

Jak wyjaśnia ekspert CSS Eric Meyer, wyświetlanie stylów linków w określonej kolejności jest ważne. W przeciwnym razie możesz skończyć ze stylizacją linków, która nie działa tak, jak chciałeś.

Możesz to zwalczyć i oszczędzić sobie czasu bez konieczności rozwiązywania problemów w przyszłości, wykonując prostą kolejność pseudoklasów linków. Możesz zapamiętać to zamówienie za pomocą urządzenia mnemonicznego Miłość / Nienawiść i to idzie mniej więcej tak:

Nie odwiedzone style łącza są najpierw wyświetlane, a następnie odwiedzane, najeżdżane i aktywne łącza. Prawdę mówiąc, linki nie odwiedzane i unoszące się mogą być wymieniane, ale wtedy kolejność byłaby nieco trudniejsza do zapamiętania.

Niestety, nie obejmuje to pseudoklasy focus, ale można ją umieścić przed aktywnymi stylami łącza. Jest też mnemoniczna fraza, która zawiera tę pseudo klasę i jest Love ’ s Hurts Fade Away:

7. Użyj skrótu CSS

Jeśli chcesz kodować z szybkością i wydajnością, ale bez stromej krzywej uczenia się za pomocą preprocesora, możesz kodować za pomocą skrótu CSS. Zasady są o wiele prostsze do nauczenia się, dzięki czemu można zacząć z nich korzystać szybciej.

Dzięki skrótom CSS możesz skondensować wiele linii w jedną, nie tracąc na funkcjonalności. Na przykład poniżej znajdują się trzy linie definiujące styl obramowania:

Można je skondensować w jedną linię w ten sposób:

Prawdopodobnie możesz sobie wyobrazić, ile czasu możesz zaoszczędzić, nie pisząc całej masy dodatkowych właściwości i wartości, więc przejdę do sedna: W3C ma doskonałe odniesienie do skrótu CSS. Zawiera wszystko, co musisz wiedzieć, i jest to krótki artykuł, dzięki czemu możesz go później dodać do zakładek.

Nie tylko oszczędza czas, ale także oszczędza miejsce. Jedynym minusem jest to, że innym może być trudno zrozumieć, kiedy przeglądają Twój CSS.

Jeśli piszesz arkusz stylów dla motywu lub wtyczki, którą planujesz udostępnić publicznie, dobrym pomysłem może być ograniczenie ilości używanych skrótów, zwłaszcza jeśli zamierzasz przesłać je do katalogu.

Z drugiej strony, jeśli kodujesz dla siebie lub tworzysz motyw premium lub wtyczkę, użycie skrótu CSS jest bardziej prawdopodobne, że będzie idealnym rozwiązaniem, które pomoże Ci przyspieszyć produkcję.

8. Przynajmniej użyj skrótu dla kolorów

Skrót CSS może nie zawsze być najlepszym rozwiązaniem dla ciebie, ale możesz przyjąć jedną z reguł skrótów dla kodów kolorów.

Jeśli okaże się, że używasz szesnastkowego kodu koloru, w którym wartości szesnastkowe dla każdego kanału są takie same, możesz go skrócić.

Mówiąc najprościej, jeśli spojrzysz na kod koloru jako mający pary-pierwszą i drugą wartość, trzecią i czwartą oraz dwie ostatnie wartości-gdzie każda para ma ten sam znak. możesz pominąć jeden z nich z każdej pary.

Może nie zaoszczędzić tyle czasu, co pełne przyjęcie skrótu, ale sekundy, które zapisujesz, sumują się, a ponieważ wszyscy zaznajomieni z CSS nadal mogą zrozumieć, że ten skrócony kod jest kolorem, nie musisz się martwić, że arkusz stylów nie jest jasny.

9. Kłopotliwy Porządek Skrócony

Jeśli zdecydujesz się użyć skrótu CSS, pamiętaj o urządzeniu mnemonicznym TRouBLed do wyświetlania marginesów, wypełnień i obramowań, dzięki czemu można zapobiegać błędom i potrzebie rozwiązywania problemów.

Wielkie litery oznaczają górę, prawą, dolną i lewą. Jest to kolejność, w jakiej należy wprowadzić wymiary podczas stylizacji elementu.

Proste błędy składniowe mogą umknąć Twojej uwadze i sprawić, że rozwiązywanie problemów będzie trudniejsze. Wiem, że tak jest dla mnie, ponieważ mam tendencję do planowania najgorszego scenariusza i zapominam, że może to być mały błąd, który wcześniej przeoczyłem.

10. Nie używaj jednostek dla wartości zerowych

Oczywiście, w przypadku większości wartości podczas wyświetlania właściwości należy dodać jednostkę miary, taką jak piksele lub procent, ale nie zawsze. Z wyjątkiem wysokości linii, wartości dla właściwości muszą mieć jednostkę bezpośrednio po, chyba że wartość jest równa zero.

Nie trać czasu na pisanie jednostki, bo jej nie potrzebujesz. Chociaż może to nie zaoszczędzić mnóstwo czasu przez siebie, wszystkie te wskazówki prędkości można zaoszczędzić sporo czasu w sumie.

11. Nie należy ponownie zgłaszać odziedziczonych wartości

Nie przepisz czegoś, co już masz. Może się to wydawać bezmyślne, ale dokładnie to byś zrobił, jeśli zdecydujesz się na ponowne zadeklarowanie odziedziczonych wartości.

Twórca stron internetowych Roger Johansson wyjaśnia w swoich najlepszych wskazówkach CSS, że wiele elementów potomnych dziedziczy swoje wartości nadrzędne. W tym przypadku nie ma potrzeby dodawania tych samych wartości dwa razy.

12. Linki nie potrzebują cudzysłowów i spacji

Podczas dodawania identyfikatora URI do arkusza stylów format regularny i właściwy zawiera spacje oraz pojedyncze lub podwójne cudzysłowy, jak w tym przykładzie:

Po adresie url (jest spacja i cytaty, a po adresie URL jest inny zestaw zamykających cytatów i spacja. Są one rzeczywiście opcjonalne.

Aby zaoszczędzić trochę więcej czasu i przestrzeni, ten sam wiersz można zapisać w ten sposób:

13. Umieść Na Pierwszym Miejscu Przeglądarki Zgodne Ze Standardami

Pisząc arkusz stylów, możesz zaoszczędzić dużo czasu, jeśli zamiast myśleć o obejściach dla wszystkich nieznośnych przeglądarek, które nie będą grać przyjemnie, napisz najpierw CSS dla wszystkich przeglądarek zgodnych ze standardami. Stamtąd wracaj do innych.

W ten sposób staje się o wiele bardziej prawdopodobne, że Twoja witryna będzie jak najbardziej aktualna dla obecnych standardów. Ponieważ czasami możesz znaleźć modyfikacje dla starszych przeglądarek, które polegają na stylach, które piszesz dla nowoczesnych przeglądarek, warto zacząć od kodowania dla nowoczesnych przeglądarek, aby zaoszczędzić od konieczności zmiany rzeczy później.

14. Ukryj arkusz stylów przed starymi przeglądarkami

Starsze przeglądarki nie będą w stanie przetwarzać i wyświetlać dużej części CSS przez długi czas. Ponieważ niewiele osób już z nich korzysta – a liczba ta staje się coraz mniejsza z dnia na dzień – nie ma sensu tworzyć konkretnych stylów pasujących do tych starszych przeglądarek. Coraz bardziej sensowne staje się ukrywanie nowoczesnych stylów przed starszymi przeglądarkami.

Importowanie zostało wprowadzone w CSS2, więc jeśli zaimportujesz arkusz stylów do swoich stron, starsze przeglądarki, które mogą przetwarzać tylko oryginalny CSS, takie jak IE4, nie będą mogły zobaczyć Twojego arkusza stylów. Możesz zasadniczo ukryć swoje nowoczesne style, aby zapobiec wielu problemom ze zgodnością ze starszymi przeglądarkami.

Oto jak ukryć arkusz stylów za pomocą reguły importu:

Pamiętaj, że ścieżka do arkusza stylów może wymagać aktualizacji zgodnie z konkretną konfiguracją, ale ten przykład powinien przynajmniej dać ci początek.

Istnieje wiele artykułów, które zapewniają tę wskazówkę, ale ta wskazówka niekoniecznie jest odpowiednią opcją dla Twojej witryny. Chodzi o to, że lepiej jest postępować zgodnie z kodeksem WordPress i używać enqueue, aby załadować arkusze stylów w swoim funkcje.php plik.

Na szczęście Daniel Pataki opublikował już post na WPMU DEV, aby nauczyć cię dokładnie, jak prawidłowo pytać o swoje style. Więc porzuć regułę importu i zamiast tego zapytaj.

15. Resetowanie marginesu i wypełnienia

Ponieważ wszystkie przeglądarki mają swój własny zestaw domyślnych ustawień dla stron i nie są one wszystkie takie same, jeśli chodzi o marginesy i wypełnienia, dobrym pomysłem jest zacząć od czystego konta i, w pewnym sensie, wymazać lub zignorować to, co te przeglądarki ustawiły i zacząć od marginesów i paddingów zerowych. To się nazywa reset.

Zanim zaczniesz dodawać własne style, wprowadź najpierw reset. Oszczędza to czas na wprowadzanie stylów, aby zrekompensować każdą przeglądarkę.

Prosty reset może wyglądać podobnie do poniższego przykładu, ale istnieje wiele dostępnych opcji, takich jak Reset Erica Meyera, a którego używasz, zależy od Ciebie i Twoich konkretnych potrzeb.

Z pewnością możesz dostosować to do swoich potrzeb, dodając własne selektory i w rzeczywistości polecam, ponieważ niekoniecznie będzie idealny dla każdego.

16.  Nie używaj komentarzy warunkowych dla IE

Istnieje wiele artykułów pływających po internecie, które mówią, aby używać komentarzy warunkowych firmy Microsoft do korygowania problemów ze zgodnością we wcześniejszych wersjach programu Internet Explorer.

To wszystko jest dobre i dobre, z wyjątkiem tych komentarzy warunkowych nie są przestarzałe. Zamiast tego użyj enqueue w swoim funkcje.php plik do załadowania stylów określonych w IE.

Oto przykład prosto z motywu Twenty Sixteen, aby dać ci wyobrażenie o tym, jak to zrobić:

Jest to najbardziej aktualny sposób ładowania oddzielnych plików CSS utworzonych w celu radzenia sobie ze starszymi regułami przeglądarki.

17. Stwórz Najpierw Swoje Strony

Łatwym sposobem na szybsze kodowanie jest pominięcie niepotrzebnych elementów w arkuszu stylów i można to zrobić, najpierw ulepszając to wszystko. Zamiast kodować arkusz stylów, a następnie wracać i edytować go po utworzeniu stron, możesz zaoszczędzić czas, kodując układ i tworząc znaczniki w nagłówku WordPress, stopce i wszystkich różnych plikach PHP strony.

Jest to jeszcze bardziej wydajne niż planowanie układu i projektu poprzez tworzenie spisu treści dla arkusza stylów, więc dobrym pomysłem jest najpierw opracowanie innych plików.

18. Użyj odpowiedniego edytora

Każdy z pewnością ma swoje ulubione programy do edycji kodu, ale nie wszystkie z nich mogą pracować wydajniej. Kiedy zaczynałem, kodowałem strony za pośrednictwem panelu sterowania mojego konta hostingowego.

Było to niezwykle nieefektywne pod wieloma względami, aż do tego, że nie mogłem nacisnąć ” Tab ” na klawiaturze, aby utworzyć wcięcia. Ten klucz nie miał wpływu. Nie trzeba dodawać, że moje strony wyglądały okropnie, podobnie jak mój kod.

Pamięć mnie przeraża samo myślenie o tym, a jeśli jesteś w podobnej sytuacji, ponieważ nie jesteś szczególnie lubiany przez swój edytor, spójrz na Sublime Text Editor. Jest darmowa i premium Wersja Dla Mac, Windows i Linux, a to sprawia, że kodowanie jest bardzo szybkie. Jestem pewien, że nawet Flash byłby zazdrosny.

Możesz zmienić wszystkie instancje tych samych klas i identyfikatorów, których używasz, edytując jedną z nich, wystarczy kilka kliknięć, aby zminimalizować i przesłać pliki na serwer, zobaczyć wyniki kodu bez odświeżania przeglądarki, natychmiast zoptymalizować kod i wiele więcej.

Jest to zdecydowanie edytor, który warto przyjrzeć się, ale bez względu na to, jakiego oprogramowania używasz do kodowania, upewnij się, że działa wydajnie dla Ciebie.

19. Analizuj swój CS

Ważne jest, aby po zakończeniu przejrzeć arkusz stylów, aby upewnić się, że jest tak czysty i lekki, jak to tylko możliwe. To może być ból, choć, zwłaszcza, że może to zająć trochę czasu, aby zrobić.

Na szczęście istnieją darmowe narzędzia, takie jak CSS Analyzer, CSS Dig i CSS Lint. Wszystko, co musisz zrobić, to wpisać swój kod, wybrać kilka opcji i kliknąć przycisk, aby natychmiast uzyskać kartę raportu dla kodu CSS.

CSS Lint zapowiada się nawet złośliwie i rani twoje uczucia w imię postępu i pomaga zobaczyć, gdzie możesz poprawić swoje umiejętności kodowania. Na koniec dnia, to wszystko, co jest ważne, więc przypuszczam, że powinniśmy po prostu zrobić jak Taylor Swift i ” Shake It Off.”

Tak czy inaczej, są to wszystkie proste opcje, które pomogą Ci szybko edytować arkusz stylów, aby upewnić się, że jest tak strukturalnie, jak to możliwe.

20. Użyj narzędzia CSS Cleaner

Kiedy piszesz arkusz stylów, spójność jest kluczowa. To, czy zdecydujesz się dołączyć lub pominąć opcjonalne odstępy lub cytaty, zależy od ciebie, ale ważne jest, aby zachować spójność w całym arkuszu stylów.

Aby w łatwy sposób upewnić się, że jesteś spójny, istnieje bezpłatne narzędzie online o nazwie Format CSS, w którym możesz wprowadzić poprawny CSS, wybrać kilka opcji, a następnie kliknąć przycisk, aby natychmiast wyczyścić swój CSS, aby upewnić się, że jest on zgodny z tym samym formatowaniem.

Oszczędza to od żmudnego przechodzenia przez każdą linię kodu, aby ręcznie sprawdzić błędy formatowania. Słodka umowa.

21. Nie pisz mieszanych identyfikatorów przypadków i klas

HTML i XHTML uwzględniają wielkość liter, więc wiele elementów w witrynie może łatwo się złamać, jeśli zapomnisz tej prostej reguły. Rozwiązywanie problemów może być znacznie bardziej czasochłonne, jeśli szukasz drobnych błędów składniowych. Dla mnie to może być wręcz wyczerpujące.

Cały ten dodatkowy czas spędzony na rozwiązywaniu problemów można uniknąć, jeśli po prostu nie używasz dużych liter w identyfikatorach CSS i klasach.

Zamiast używać selektorów mieszanych liter, takich jak w powyższym przykładzie, spróbuj uczynić je małymi literami:

Na pewno jest to opcjonalna wskazówka, ale później można łatwo popełnić błąd, więc można to uznać za rodzaj wyprzedzającego uderzenia.

22. Sprawdzanie poprawnej składni

W związku z tym, gdy kodujesz, pamiętaj o swojej składni i upewnij się, że jest poprawna. Czasami po prostu prosta postać może złamać wiele elementów projektu, więc zamiast oczekiwać najgorszego i próbować przepisać sekcję, która wydaje się zepsuta, sprawdź, czy wszystko wygląda dobrze, jak idziesz.

Na przykład sprawdź, czy Twoje identyfikatory są zgodne z właściwą strukturą nazewnictwa: nie mogą zaczynać się od myślnika lub liczby i mogą składać się tylko z liter i cyfr, zarówno małych, jak i dużych liter.

Jest to dla mnie duże, ponieważ kiedyś stwierdziłem, że wolę przepisać wszystko, niż spędzać dużo czasu na zastanawianiu się, dlaczego coś nie działa, ale szczerze mówiąc, o wiele szybciej jest dokładnie sprawdzić składnię podczas pisania arkusza stylów, niż przechodzić przez to później.

Przydatne może być posiadanie referencji pod ręką, zwłaszcza że zapamiętywanie wszystkiego jest dość trudne. Mozilla ma świetny Podręcznik programisty dla składni CSS, który można dodać do zakładek, aby pomóc w tej części rozwiązywania problemów.

23. Zweryfikuj swój CSS

Jak już zacząłem wspominać, zanim zaczniesz ciężko rozwiązywać problemy, możesz natychmiast sprawdzić swoją składnię i CSS, sprawdzając ją. Jest to bardzo szybki sposób, aby upewnić się, że wszelkie błędy w kodzie nie są strukturalne.

W3C posiada darmowy walidator CSS online. Wystarczy przesłać plik CSS i kliknięciem przycisku możesz zweryfikować swój kod. Nie wiem, czy będzie łatwiej.

24. Aktualizuj W Miarę Możliwości

Może to być oczywista wskazówka dla większości ludzi, ale trzeba to powtórzyć, ponieważ tawerna WP zgłosiła statystyki dotyczące aktualizacji wtyczek. Odkryli, że prawie połowa wtyczek w katalogu WordPRess nie jest aktualizowana po dwóch latach.

Oczywiście istnieje wiele powodów, w tym brak czasu lub funduszy, ale nie jest to krok opcjonalny. Ponieważ aktualizacje świata WordPress są liczne i częste, nie chodzi o to, kiedy mogą nastąpić zmiany, które mogą zepsuć twoją witrynę, ale kiedy.

Ważne jest, aby być na bieżąco z najnowszymi standardami kodowania, a jednym z najlepszych sposobów na to jest zapisanie się do naszego bezpłatnego newslettera WhiP, ponieważ skondensujemy wszystkie najnowsze wiadomości WordPress w łatwo przyswajalny post. Niektóre wiadomości, które czytasz, mogą nie zejść tak łatwo jak plik cookie, ale przynajmniej wiesz, kiedy musisz zaktualizować swój CSS i inne pliki.

25. Użyj frameworka

Wszystkie te wskazówki mogą potencjalnie zaoszczędzić sporo czasu, ale czasami korzystanie z frameworka jest o wiele łatwiejsze i szybsze. Ponieważ większość nakrętek i śrub jest już przygotowana dla Ciebie, nie musisz się tak przejmować kodowaniem.

Istnieje wiele ram, takich jak Twitter Bootstrap, a jeśli chodzi o ramy motywów WordPress, jest ich mnóstwo, w tym nasz własny motyw z góry. Aby uzyskać listę innych ram tematycznych, sprawdź jeden z naszych innych postów o nazwie Choosing a WordPress Theme Framework – the Ultimate Guide.

Wrapping Up

Aby uzyskać listę najlepszych zasobów do nauki CSS od początku do końca, w tym nauki korzystania z preprocesorów i Bootstrap, sprawdź jeden z naszych innych postów: Mega Przewodnik do nauki i odwoływania się do CSS dla WordPress: zasoby 150+.

Jakie są Twoje najlepsze wskazówki dotyczące szybszego przepływu pracy podczas kodowania CSS? Chciałbym usłyszeć twoje myśli, więc możesz podzielić się swoimi doświadczeniami w komentarzach poniżej.

Tagi:

• CSS
• rozwiązywanie problemów