Post-procesory CSS dla początkujących Wskazówki i zasoby

Wstępne przetwarzanie CSS to koncepcja, której większość twórców stron internetowych już się nauczyła lub o której przeczytała. Bardzo szczegółowo omówiliśmy preprocesowanie CSS, aby pomóc programistom w szybkim rozwoju tej powszechnej technologii. Ale co z postprocesory?

Te stosunkowo nowe narzędzia są podobne w tym sensie, że one wpływać na przepływ pracy podczas tworzenia stron internetowych, jednak działają na druga strona rozwoju CSS (“słupek” rozwój).

W tym poście chciałbym przedstawić podstawy przetwarzania końcowego, jak to działa, dlaczego go używasz i udostępniasz kilka bibliotek / narzędzi, których możesz użyć, aby ulepszyć swoją grę CSS za pomocą post-processing.

Post a przetwarzanie wstępne

The rewolucja przed przetwarzaniem stało się kiedy Sass / LESS trafił na scenę. Narzędzia te pozwalają programistom używać zmiennych, pętli, funkcji i miksów w CSS. To prawie sprawia, że ​​podstawowy rozwój CSS podobny do języka programowania z rozszerzoną funkcjonalnością.

Przetwarzanie końcowe dzieje się po tym, jak już wyprodukowałeś zwykły CSS i chcesz przedłużyć to dalej poprzez automatyzację. Może to obejmować rozszerzanie selektorów klas, lub przedrostki automatyczne dla niektórych właściwości CSS.

Ogólnie rzecz biorąc, przetwarzanie wstępne ma swoje własne języki arkuszy stylów, takie jak Sass i LESS, to przekonwertować na czysty CSS. Przetwarzanie końcowe wymaga tego podstawowego CSS i stosuje automatyzację / powtarzanie.

Oto cytat z posta, który jest również źródłem powyższego obrazu. Myślę, że autor Stefan Baumgartner podsumowuje genialnie różnicę.

W pewnym sensie oba z nich wydają się być narzędziami do automatyzacji, działającymi na różne sposoby. Na przykład powszechnym bólem rozwiązywanym przez przetwarzanie końcowe jest automatyczne dodawanie przedrostków dla nowszych właściwości CSS3.

Ale można to również zrobić w Sass z rozszerzeniami. Więc jest naprawdę różnica? Oto kolejny świetny cytat z tego samego posta:

Chociaż może to być prawdą w sensie teoretycznym, społeczność twórców stron internetowych nadal tworzy podział między tymi narzędziami. Z tego powodu zdecydowanie zalecałbym programistom frontendu, aby przynajmniej czytali o postprocesorach i wiedzieli, co mogą zrobić.

Dopasuj przetwarzanie końcowe do swojego przepływu pracy

Prawie wszyscy mówią PostCSS jako ostateczny zasób do przetwarzania końcowego. Jednak zespół PostCSS otwarcie przyznał na Twitterze zmiana tytułu ponieważ słownictwo już nie ma sensu.

PostCSS nie jest już tylko narzędziem pre-CSS lub post-CSS. To może rzeczywiście pracować w obu obszarach! To dodatkowo wyjaśnia cytat z wcześniejszego stwierdzenia, że ​​wszystkie narzędzia CSS sprowadzają się do jednej rzeczy - przetwarzanie.

PostCSS używa wtyczek JavaScript do automatyzuj przepływ pracy w CSS, i możesz nawet napisać własną wtyczkę JS, aby rozszerzyć bibliotekę PostCSS. Jeśli chcesz rozpocząć pracę z PostCSS, sprawdź ten samouczek wprowadzający w Smashing Magazine. Jeśli już używasz i rozumiesz Sassa, szybko odbierzesz Post CSS.

Aby zbudować własny przepływ pracy przed / po CSS, zacznij od sporządzenie listy twoich punktów bólu, Jak na przykład:

• automatyczne prefiksowanie gradientów CSS
• automatyczna organizacja reguł CSS
• dołączanie wypełnień dla niektórych właściwości
• generowanie wymiarów obrazu dla obrazów tła

Zauważ, że wszystkie te rzeczy można zrobić zarówno przed, jak i po przetwarzaniu. Ważne jest, aby uświadomić sobie, że przetwarzanie przed / po CSS szybko się łączy jeden w tym samym.

Zamiast dzielić swoje cele na różne etapy przetwarzania, lepiej jest wymienić je jako cele, potem idź na szukaj odpowiednich narzędzi.

Najlepsze narzędzia do przetwarzania końcowego

Starałem się unikać wymieniania rozszerzeń w tej sekcji, ponieważ Sass & PostCSS ma tak wiele rzeczy do wyboru. Szczerze, możesz radzić sobie tylko z tymi bibliotekami, ale chcę też coś zaoferować alternatywy dla bardziej konkretnych rozwiązań.

Pleeease

Jeśli pracujesz już z Node.js, to Pleeease wydaje się oczywistym wyborem. Ma dużo typowe funkcje przetwarzania CSS, takie jak importowanie plików, zmiennych / funkcji, auto-minifikacja i wsparcie awaryjne dla nowszych elementów, takich jak SVG.

Witryna ma również interaktywny plac zabaw dla każdego, kto chce wypróbować bibliotekę online bez pobierania kopii lokalnej.

Błogosławić

Pamiętam, że Internet Explorer 6 nadal był uciążliwy i miło jest wiedzieć, że rozwój IE poprawił się - ale nie o wiele. Chociaż chciałbym powiedzieć, że użycie IE w zasadzie zniknęło, to po prostu nie wydaje się być prawdziwe.

Na szczęście Bless CSS to rozwiązanie wykrywa potencjalne problemy związane z IE w swoim CSS i tworzy rozwiązania z post-processing. Działa na Node.js, więc dobrze pasuje do typowego przepływu pracy NPM / Gulp.

CSSNext

Oto naprawdę fajna biblioteka, która pozwala zbuduj CSS z bardziej zaawansowaną funkcjonalnością to obecnie nie jest obsługiwane. Biblioteka CSSNext zawiera obsługa nieparzystych funkcji CSS4, Jak na przykład szary(), które są obecnie obecne tylko w wersjach roboczych W3C.

Nie sądzę, aby każdy programista potrzebował tej biblioteki. Jest bardzo specyficzny i nie rozwiąże problemów z dnia na dzień, ale może dać ci szansę smak nadchodzących specyfikacji CSS4 podczas konwertowania składni na nowoczesny CSS3.

Stylecow

Jeśli obsługa przeglądarki to problem dla Ciebie, a wtedy Stylecow jest koniecznością. Ta potężna biblioteka pozwala na tworzenie CSS tylko dla Twojej ulubionej przeglądarki. Następnie możesz uruchomić narzędzie wiersza poleceń przez węzeł, a Twój CSS będzie zaktualizowany dla wszystkich przeglądarek, które chcesz obsługiwać.

Możesz pobrać Stylecow z GitHub i zawiera on niesamowicie szczegółową dokumentację.

-bez prefiksów

Na koniec chcę udostępnić -bez prefiksów biblioteka, która jest również ukochanym narzędziem do tworzenia CSS, ponieważ pozwala na to użyj nieprefiksowanych właściwości CSS. Każdy chce używać nowoczesnych właściwości CSS, takich jak animacje i gradienty, ale nikt nie chce ręcznie kopiować / wklejać pełnego kodu.

Dzięki tej wtyczce nie musisz nawet uruchamiać swojego CSS przez postprocesor na swoim komputerze. Może również działać jako przeglądarka, która działa na komputerze użytkownika automatycznie aktualizuj pliki CSS.

Autoprefixer, który jest częścią biblioteki PostCSS, jest prawdopodobnie lepszym wyborem lokalne przetwarzanie końcowe. Dlatego powiedziałem wcześniej, że jeśli używasz LESS lub Sass wraz z PostCSS, to będziesz mieć wszystko, czego potrzebujesz do imponującego przepływu pracy w CSS.

Zawijanie

Post-processing jest bardziej frazą zwrotną niż prawdziwą technologią, chociaż ma swoje miejsce w obiegu pracy CSS, jak cały proces pisania nowoczesnego CSS został znacznie ulepszony przez te narzędzia. Mogę tylko zalecić, aby programiści sięgali głębiej, aby znaleźć to, co dla nich najlepsze.

Jeśli szukasz jeszcze więcej informacji na temat post-processingu, zajrzyj do tych powiązanych artykułów:

• Co nas ocali przed ciemną stroną preprocesorów CSS?
• Spojrzenie na pisanie przyszłego CSS za pomocą PostCSS i cssnext
• Przetwarzanie wstępne CSS (SASS lub LESS) a przetwarzanie CSS Postprocessing