Najpierw biblioteka wzorców: podejście do zarządzania CSS

W tym artykule, w oparciu o prelekcję, którą wygłosiłem na Smashing Conference w Toronto, opiszę metodę pracy, którą przyjęłam przez ostatnie dwa lata, która pomaga mi zarządzać CSS w moich projektach.

Pokażę Ci, jak korzystać z narzędzia Fractal biblioteki wzorców, aby zarządzać CSS komponent po komponencie, jednocześnie umożliwiając korzystanie z narzędzi, które już znasz. Chociaż służy to jako wprowadzenie do Fractal i dlaczego wybraliśmy tę konkretną bibliotekę wzorców, prawdopodobnie ten sposób pracy przeniósłby się na inne rozwiązania.

Nasz projekt

Moja firma ma kilka produktów — Perch i Perch Runway CMS oraz Notist, oprogramowanie jako aplikację usługową dla mówców publicznych. Te produkty są zupełnie inne, zwłaszcza biorąc pod uwagę, że Perch jest systemem samoobsługowym, a Notist to SaaS, jednak oba mają wiele interfejsów użytkownika do opracowania. Posiadamy również wszystkie powiązane witryny internetowe i dokumentację dotyczącą tych produktów, a także inne rzeczy, nad którymi pracujemy, takie jak witryna 24 Ways. Po odkryciu Fractal dwa lata temu, przenieśliśmy każdy nowy projekt — duży i mały — do Fractal.

Problemy, które chcieliśmy rozwiązać

Zacząłem badać rozwiązania biblioteki wzorców dwa lata temu, kiedy zacząłem pracę nad przebudową interfejsu użytkownika Percha dla wersji 3. Cechą Percha jest to, że szablony, które tworzysz dla wyjścia treści na swojej stronie internetowej, stają się schematem interfejsu administratora. Oznacza to, że każdy typ pola użyty w szablonie musi istnieć razem z dowolnym innym typem pola. Nie wiemy, jak nasi klienci mogą je łączyć, a możliwych jest ogromna liczba. Nie jest to również „strona internetowa” i nie chciałem próbować narzucać biblioteki wzorców do czegoś zaprojektowanego do organizowania wzorców witryn internetowych.

Ponieważ Perch jest samohostowany — ludzie pobierają go i hostują na własnych serwerach — musimy użyć najprostszego możliwego stosu technologicznego, aby nie stawiać żadnych dodatkowych barier wejścia przed ludźmi, z których wielu jest nowy w korzystaniu z CMS. Aby dodać dodatkowy poziom zabawy, wspieramy powrót do Internet Explorera 9, ale zamierzałem używać dużo Flexbox — tak jak to było przed wydaniem Grid Layout.

Zależało mi również na unikaniu używania narzędzi, które wiązały się z koniecznością ponownego uczenia się tego, jak pracowaliśmy, i całkowicie zmieniały nasz proces. Każde dodatkowe narzędzie lub zmiana w sposobie, w jaki pracujesz nad swoimi projektami, niesie ze sobą nowe tarcia. Możesz rozwiązać jeden problem, ale jeśli wprowadzisz duże zmiany w sposobie swojej pracy, możesz wprowadzić zupełnie nowy zestaw problemów. W naszym przypadku używaliśmy Sassa w dość ograniczony sposób i przetwarzaliśmy go za pomocą Gulpa. Żaden z naszych projektów nie używa frameworka Javascript, piszemy tylko HTML, CSS i JavaScript.

Fractal idealnie wpasował się w nasze potrzeby. Jest niezależny od sposobu, w jaki się rozwijasz lub narzędzi, których chcesz używać. Co ważne dla naszych celów, nie zakładał, że budujemy stronę internetową. Eksperyment był tak udany, że używaliśmy Fractal w każdym dużym lub małym projekcie, ponieważ znacznie upraszcza to proces pracy nad CSS. Nawet małe witryny, które tworzę sam, często zaczynają życie we Fractal, ponieważ jest więcej korzyści, niż mogłoby się wydawać, jeśli chodzi o pracę z biblioteką wzorców, a wiele z tych korzyści ma tyle samo sensu dla zespołu składającego się z jednego, co dla dużego zespołu .

Zanim zastanowimy się, jak rozwijać się przy użyciu Fractal i dlaczego uważam, że ma to sens zarówno w przypadku małych, jak i dużych projektów, przyjrzyjmy się, jak skonfigurować środowisko.

Pierwsze kroki z fraktalem

Najprostszym sposobem pracy z Fractalem jest wejście na stronę Fractal i zapoznanie się z Przewodnikiem dla początkujących. Najpierw musisz zainstalować Fractal globalnie, następnie możesz wykonać kroki wymienione tutaj, aby utworzyć nowy projekt Fractal.

Po zainstalowaniu nowego projektu w wierszu poleceń przejdź do folderu, który właśnie utworzyłeś i uruchom polecenie:

 fractal start --sync

Spowoduje to uruchomienie małego serwera na porcie 3000, więc powinieneś być w stanie przejść do https://localhost:3000 w przeglądarce internetowej i zobaczyć swój projekt.

Teraz, gdy projekt jest już uruchomiony, otwórz folder projektu w ulubionym edytorze tekstu i znajdź przykładowy komponent w components/example . Znajdziesz plik konfiguracyjny i plik o nazwie example.hbs . Szablon example.hbs to kod HTML twojego komponentu, możesz dodać do niego więcej kodu HTML, a Fractal automatycznie go przeładuje i wyświetli. Zmień plik na:

 <h1>This is my heading</h1> <p>{{ text }}</p>

Powinieneś zobaczyć nagłówek pojawiający się w przeglądarce. Plik konfiguracyjny może służyć do dodawania treści i konfigurowania w inny sposób komponentu. Jeśli chcesz odczytać tekst nagłówka z tego pliku, edytuj ten plik, aby wyglądał jak w poniższym przykładzie:

 title: Example component context: text: This is an example component! heading: My heading

Teraz zmień plik example.hbs , aby czytał w tym tekście.

 <h1>{{ heading }}</h1> <p>{{ text }}</p>

Dodawanie dodatkowych komponentów

Możesz podążać za wzorcem przykładowego komponentu, aby dodać własny. Potrzebny jest przynajmniej folder (nazwa komponentu) i plik .hbs o tej samej nazwie. Możesz dodać plik konfiguracyjny, jeśli chcesz ustawić opcje konfiguracyjne.

Komponenty można zagnieżdżać w folderach, aby ułatwić lokalizowanie poszczególnych komponentów, a to, jak ustrukturyzujesz foldery, zależy wyłącznie od Ciebie.

Uwaga : Naprawdę łatwo jest spędzić dużo czasu na zamartwianiu się, jak nazwać swoje komponenty. Przynajmniej we Fractal zmiana nazwy, a także reorganizacja komponentów w foldery jest prosta. Możesz zmienić ich nazwę lub przenieść, a Fractal zaktualizuje się, aby pokazać nową strukturę. Uważam, że często idealna struktura staje się widoczna dopiero w miarę rozwoju, więc nie przejmuję się zbytnio na początku, a później ją wzmacniam.

Dodawanie przepływu pracy CSS

Do tej pory jesteśmy w stanie tworzyć komponenty HTML jako szablony kierownicy i plik konfiguracyjny do wstawiania danych, jednak nie dodaliśmy żadnego CSS. Idealnie, chcielibyśmy dodać CSS dla każdego komponentu do tego samego folderu, co pozostałe pliki komponentów, a następnie połączyć je wszystkie razem.

Wspomniałem, że Fractal robi bardzo niewiele założeń dotyczących twojego przepływu pracy; z tego powodu robi znacznie mniej po wyjęciu z pudełka, niż gdyby zmuszał Cię do określonego sposobu pracy. Jednak możemy dość łatwo sprawić, by Fractal pracował z konfiguracją Gulp.

Połączenie fraktala, Sassa i Gulp

Poniżej opisano minimalną konfigurację przy użyciu Gulp i Sass do utworzenia pojedynczego wyjściowego pliku CSS. Mamy nadzieję, że możesz wykonać ten proces, aby zrobić wszystko, co normalnie robiłbyś w Gulp. Kluczową rzeczą do zapamiętania jest to, że większość z nich nie jest specyficzna dla Fraktala, więc kiedy już zaczniesz działać, możesz dodać wszystko inne według tych samych wzorców. Jeśli znasz inne narzędzie do budowania, prawdopodobnie możesz stworzyć podobny proces; jeśli tak i chętnie się podzielisz, daj nam znać w komentarzach.

Najpierw trochę konfiguracji, poniższe pozwoli ci śledzić wraz z kodem wymienionym w tym samouczku, lokalizacje twoich plików Sass i wyjściowego CSS mogą ostatecznie różnić się od moich. Najważniejsze jest to, że wyjściowy plik CSS musi znajdować się gdzieś w folderze publicznym.

1. W folderze publicznym w instalacji Fractal dodaj folder o nazwie css .
2. W folderze głównym swojego Fractal zainstaluj dodaj folder zasoby, w którym znajduje się folder scss . W tym folderze utwórz plik Sass o nazwie global.scss . Wewnątrz tego pliku dodaj następujący wiersz:
   

    @import "../../components/**/*.scss";

3. Utwórz plik o nazwie example.scss w katalogu komponentów example .
4. Utwórz gulpfile.js w katalogu głównym projektu Fractal i dodaj poniższy kod.

 'use strict'; const gulp = require('gulp'); const fractal = require('./fractal.js'); const logger = fractal.cli.console; const sass = require('gulp-sass'); const sassGlob = require('gulp-sass-glob'); const plumber = require('gulp-plumber'); const notify = require('gulp-notify'); const path = require('path'); gulp.task('sass',function() { return gulp.src('assets/scss/**/*.scss') .pipe(customPlumber('Error running Sass')) .pipe(sassGlob()) .pipe(sass()) .pipe(gulp.dest('public/css')) }); gulp.task('watch', ['sass'], function() { gulp.watch([ 'components/**/*.scss', 'assets/scss/**/*.scss' ], ['sass']); }); function customPlumber(errTitle) { return plumber({ errorHandler: notify.onError({ title: errTitle || "Error running Gulp", message: "Error: <%= error.message %>", }) }); } gulp.task('fractal:start', function(){ const server = fractal.web.server({ sync: true }); server.on('error', err => logger.error(err.message)); return server.start().then(() => { logger.success(`Fractal server is now running at ${server.url}`); }); }); gulp.task('default', ['fractal:start', 'sass', 'watch']);

Następnie instaluję zależności wymienione na górze pliku. Gdybyś miał je zainstalować w wierszu poleceń, uruchomiłbyś:

npm install gulp gulp-sass gulp-sass-glob gulp-plumber gulp-notify

Funkcja sass kompiluje Sassa z zasobów w pojedynczy plik i wyprowadza go do folderu public .

 gulp.task('sass',function() { return gulp.src('src/assets/scss/**/*.scss') .pipe(customPlumber('Error running Sass')) .pipe(sassGlob()) .pipe(sass()) .pipe(gulp.dest('public/css')) });

Następnie tworzę funkcję watch , która będzie obserwować mojego Sassa w assets a także w poszczególnych komponentach i skompilować go do publicznego folderu.

 gulp.task('watch', ['sass'], function() { gulp.watch([ 'components/**/*.scss', 'assets/scss/**/*.scss' ], ['sass']); });

To jest mój budynek CSS. Teraz chcę to zrobić, abym mógł uruchomić łyk i rozpocznie oglądanie pliku CSS, a także rozpoczynanie fraktali. Robię to, tworząc zadanie gulp, aby uruchomić polecenie fractal start.

 gulp.task('fractal:start', function(){ const server = fractal.web.server({ sync: true }); server.on('error', err => logger.error(err.message)); return server.start().then(() => { logger.success(Fractal server is now running at ${server.url}); }); });

Na koniec muszę upewnić się, że budynek Sassa i Fractal uruchomią się, gdy uruchomię gulp i wiersz poleceń:

gulp.task('default', 'fractal:start', 'sass', 'watch');

To mój ukończony plik gulpfile.js . Jeśli dodasz to do domyślnego projektu Fractal, upewnij się, że foldery są na miejscu dla wspomnianych ścieżek. Powinieneś być w stanie przejść do wiersza poleceń, uruchomić gulp i Fractal się uruchomi.

Możemy przetestować naszego Sassa, dodając zmienną w pliku global.scss ; będziesz musiał dodać to nad wierszem zawierającym komponenty, aby zmienna była dostępna dla tych komponentów.

 $color1: rebeccapurple;

Następnie w example.scss dodaj regułę dla nagłówka poziomu 1, który dodaliśmy wcześniej:

 h1 { color: $color1; }

Jeśli wszystko jest poprawnie skonfigurowane, powinieneś znaleźć plik .css w public/css, który zawiera regułę:

 h1 { color: rebeccapurple; }

Musimy zrobić jeszcze jedną rzecz, abyśmy mogli wyświetlić podgląd naszych komponentów za pomocą budowanego przez nas CSS. Musimy stworzyć plik podglądu, który będzie linkował w arkuszu stylów z folderu publicznego.

Wewnątrz folderu komponentów utwórz plik o nazwie _preview.hbs .

Plik podglądu jest zasadniczo dokumentem HTML, zawierającym linki w naszym CSS i wszystko, co musisz dołączyć. W ciele znajduje się tag {{ yield }} , i to tam zostanie umieszczony komponent.

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Preview Layout</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="{{ path '/css/global.css' }}"> </head> <body> {{{ yield }}} </body> </html>

Uwaga : folder publiczny może również zawierać wszelkie inne zasoby, które musisz wyświetlić w komponentach, takich jak obrazy, czcionki i tak dalej.

Biblioteka wzorców jako źródło prawdy

Jak widzieliśmy, Fractal może budować nasz CSS. W naszych projektach dbamy o to, aby Fractal było jedynym miejscem, w którym budujemy i przetwarzamy CSS i inne zasoby dla strony. Oznacza to, że nasza biblioteka wzorców i witryna lub aplikacja nie dryfują. Dryf ma miejsce po wdrożeniu witryny, jeśli ludzie zaczną edytować CSS witryny i nie przenoszą tych zmian z powrotem do biblioteki wzorców. Jeśli możesz uczynić bibliotekę wzorców miejscem, w którym przetwarzany jest CSS, zmiany muszą się tam rozpocząć — co zapobiega przenoszeniu się między aktywną witryną a biblioteką.

Wszystko budujemy we Fractal, a następnie kopiujemy te zasoby publiczne do działających witryn, które mają zostać wdrożone. Oprócz zapobiegania dryfowaniu między systemami znacznie ułatwia również zarządzanie CSS w kontroli kodu źródłowego. Gdy wiele osób pracuje nad jednym plikiem CSS, konflikty scalania mogą być dość trudne do rozwiązania. Gdy ludzie pracują nad poszczególnymi komponentami w bibliotece wzorców, zwykle można uniknąć wprowadzania zmian w tym samym pliku przez dwie osoby naraz, a jeśli to zrobią, jest to tylko mały plik do uporządkowania, a nie cały CSS.

Korzystanie z biblioteki wzorców jako pierwszego podejścia do zarządzania rezerwami awaryjnymi

Odkryłem, że działająca biblioteka wzorców po pierwsze sprawia, że ​​radzenie sobie z błędami w kodzie jest o wiele prostsze i mniej przytłaczające niż próba naprawy całej witryny lub aplikacji na raz. Pozwala nam również skoncentrować się na najlepszym możliwym przypadku i być kreatywnym z nowymi technikami, zamiast ograniczać to, co robimy z powodu obaw o to, jak sprawimy, by działała dobrze w nieobsługujących przeglądarkach.

Możemy spojrzeć na prosty przypadek komponentu obiektu multimedialnego, aby zobaczyć, jak to może działać. Aby przejść dalej, utwórz folder multimediów wewnątrz komponentów we Fractal i dodaj pliki media.hbs i media.scss .

Zacznij od dobrego znacznika

Twoim punktem wyjścia powinien być zawsze dobrze zorganizowany znacznik. W bibliotece wzorców może się zdarzyć, że użyjesz tego komponentu z różnymi znacznikami, na przykład możesz użyć komponentu z zawartością oznaczoną jako rysunek w jednym miejscu, a tylko z divami w innym. Treści powinny być jednak skonstruowane w sposób, który ma sens i można je czytać od góry do dołu.

Gwarantuje to, że Twoje treści są dostępne na bardzo podstawowym poziomie, ale oznacza to również, że możesz korzystać z normalnego przepływu. Normalny przepływ to sposób, w jaki przeglądarki domyślnie wyświetlają zawartość, przy czym elementy blokowe postępują jeden po drugim w wymiarze bloku, a elementy śródliniowe — takie jak słowa w zdaniu — biegną wzdłuż osi śródliniowej. W przypadku wielu treści, które są dokładnie tym, czego chcesz, i wykorzystując normalny przepływ, zamiast walczyć z nim, znacznie ułatwiasz swoją pracę podczas tworzenia układu.

Dlatego mój komponent ma następujący znacznik, który dodaję do media.hbs .

 <div class="media"> <div class="img"> <img src="/img/placeholder.jpg" alt="Placeholder"> </div> <h2 class="title">This is my title</h2> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p> </div> <div class="footer"> An optional footer goes here. </div> </div>

Możesz zobaczyć, jak to się wyświetla w Fractal:

Gdy już mam znaczniki, których chcę, zabieram się do pracy nad wyświetlaczem biurkowym, który mam na myśli. Wykorzystam do tego CSS Grid Layout i metodę grid-template-areas . Dodaj następujące elementy do media.scss .

 img { max-width: 100%; } .media > .title { grid-area: title; } .media > .img { grid-area: img; } .media > .content { grid-area: bd; } .media > .footer { grid-area: ft; } .media { margin-bottom: 2em; display: grid; grid-column-gap: 20px; grid-template-columns: 200px 3fr; grid-template-areas: "img title" "img bd" "img ft"; }

Mamy teraz prosty układ obiektu multimedialnego:

Coś, co możesz zrobić we Fractal, to dodać wariacje komponentu. Możesz odwrócić obiekt multimedialny, aby obraz znajdował się po prawej stronie.

Teraz dodaj CSS do media.scss , aby odwrócić układ:

 .media.media-flip { grid-template-columns: 3fr 200px ; grid-template-areas: "title img" "bd img" "ft img"; }

Istnieją dwa sposoby tworzenia wariantów: oparte na plikach i oparte na konfiguracji. Oparte na plikach jest najprostsze i jest również przydatne, jeśli Twój wariant ma inne znaczniki. Aby utworzyć wariant oparty na plikach, utwórz kopię swojego komponentu w folderze multimediów o nazwie media --flip.hbs (to dwie myślniki w nazwie pliku).

Ten składnik powinien mieć identyczne znaczniki z klasą media-flip dodaną do pierwszego wiersza, a wtedy będziesz mógł zobaczyć obie wersje.

 <div class="media media-flip">

Alternatywnie, ponieważ w tym przypadku wystarczy dodać klasę, wariant można utworzyć za pomocą pliku konfiguracyjnego.

Jeśli chcesz to zrobić, usuń plik wariantu i zamiast tego dodaj plik konfiguracyjny o nazwie media.config.json zawierający następujący kod:

 { "title": "Media Object", "context": { "modifier": "default" }, "variants": [ { "name": "Flipped", "context": { "modifier": "flip" } } ] }

Następnie zmodyfikuj pierwszy wiersz pliku media.hbs w następujący sposób:

<div class="media media-{{ modifier }}">

Uwaga : możesz dodać dowolną liczbę wariantów (zapoznaj się z dokumentacją dotyczącą wariantów, aby dowiedzieć się więcej).

Możemy teraz pomyśleć o dodaniu kodu CSS, aby zmienić układ w oparciu o rozmiar ekranu. Zawijanie układu, który stworzyliśmy w zapytaniu o media, a powyżej tworząc układ jednokolumnowy dla mniejszych urządzeń.

 img { max-width: 100%; } .media > .title { grid-area: title; } .media > .img { grid-area: img; } .media > .content { grid-area: bd; } .media > .footer { grid-area: ft; } .media { display: grid; grid-column-gap: 20px; grid-template-areas: "title" "img" "bd" "ft"; } @media (min-width: 600px) { .media { margin-bottom: 2em; display: grid; grid-column-gap: 20px; grid-template-columns: 200px 3fr; grid-template-areas: "img title" "img bd" "img ft"; } .media.media-flip { grid-template-columns: 3fr 200px ; grid-template-areas: "title img" "bd img" "ft img"; } }

Następnie, tak jak zarządzamy widokiem dla mniejszych urządzeń w naszym komponencie, możemy zarządzać układem dla starszych przeglądarek, które nie obsługują siatki.

W tym przypadku zamierzam zbudować awaryjną wersję opartą na pływakach (będzie to działać w prawie każdej starszej przeglądarce). Będę się tym martwić tylko w przypadku szerszych rozmiarów ekranu i pozostawię komponent wyświetlany w normalnym trybie dla starszych urządzeń mobilnych.

W zapytaniu o media dodaj następujący kod CSS:

 .media:after { content: ""; display: table; clear: both; } .media > .media { margin-left: 160px; clear: both; } .media .img { float: left; margin: 0 10px 0 0; width: 150px; } .media.media-flip .img { float: right; margin: 0 0 0 10px; } .media > * { margin: 0 0 0 160px; } .media.media-flip > * { margin: 0 160px 0 0; }

Powinno to uporządkować wyświetlanie w przeglądarkach innych niż grid. W przypadku przeglądarek, które obsługują siatkę, nie musisz się martwić o elementy pływające, tj. gdy element zmiennoprzecinkowy staje się elementem siatki, element zmiennoprzecinkowy jest usuwany. Problemem będą jakiekolwiek marginesy. Układ w przeglądarkach obsługujących siatkę będzie teraz całkowicie rozłożony ze względu na dodatkowe marginesy.

Tutaj możemy dodać zapytanie o funkcję, usuwając marginesy, jeśli wiemy, że nasza przeglądarka obsługuje siatkę.

 @supports(display: grid) { .media > *, .media.media-flip > * { margin: 0; } .media .img, .media.media-flip .img { width: auto; margin: 0; } .media:after { content: none; } }

To nasz mały element wykończony. Chociaż prosty przykład — i można by się spierać, że tak naprawdę wcale nie potrzebuje siatki, jeśli trzeba mieć rozwiązanie awaryjne — pokazuje podejście, które stosuję we wszystkich moich projektach, dużych i małych.

Aby wprowadzić mój plik CSS do produkcji, możemy pobrać plik CSS z folderu publicznego i dodać go do naszej witryny produkcyjnej. Możesz nawet oskryptować ten proces, aby skopiować go do folderu witryny podczas tworzenia.

Zredukowane pierwsze opracowanie przypadku testowego

Coś, co odkryłem jako kluczową korzyść z pracy w ten sposób, to fakt, że naprawdę ułatwia obsługę części układanki dla przeglądarek. Nie tylko łatwiej jest zobaczyć, jaki zapasowy kod CSS jest zawarty w tym komponencie, ale także, jeśli mamy problemy z przeglądarką, znacznie ułatwia to debugowanie.

Kiedy zmagasz się z problemem przeglądarki, zazwyczaj będziesz proszony o utworzenie skróconego przypadku testowego. Zredukuj problem do najmniejszej rzeczy, która go uwidacznia. Komponent w bibliotece wzorców jest często bardzo zbliżony do tego zredukowanego przypadku testowego. Z pewnością znacznie bliżej niż w przypadku próby debugowania problemu podczas przeglądania całej witryny.

Poza ułatwieniem debugowania przeglądarki, dołączanie kopii zapasowych wraz z resztą CSS ułatwia usuwanie kodu zastępczego, gdy nie jest on już potrzebny, jest oczywiste, że ten kod zastępczy jest przeznaczony dla tego komponentu. Wiem, że usunięcie go nie zmieni sposobu wyświetlania czegokolwiek innego.

Ta łatwość organizowania naszego kodu sprawia, że ​​Fractal ma sens nawet w małych projektach. Biorąc pod uwagę, że i tak używamy Gulp i Sass (nawet w mniejszych projektach), dodanie Fractal do miksu nie jest dużym obciążeniem. Nie musimy postrzegać tego tylko w przypadku naszych większych projektów, ponieważ nawet mała witryna może zawierać rozsądną ilość CSS.

Zobacz Kodeks

Stworzyłem projekt GitHub, który zawiera cały kod wymieniony w artykule. Sugerowałbym skonfigurowanie Fractal zgodnie z opisem w artykule, a następnie pobranie wszelkich fragmentów - takich jak plik gulpfile lub układ podglądu, z mojego repozytorium.

Jako dodatkowe odniesienie i aby zobaczyć niektóre opublikowane projekty Fractal, mamy opublikowaną wersję Biblioteki wzorów Perch, a także Bibliotekę wzorów na 24 sposoby (zbudowaną przez Paula Roberta Lloyda), z którą możesz się zapoznać. Są to dobre przykłady biblioteki wzorców niebędącej witryną internetową i bardziej tradycyjnej biblioteki używanej w witrynie.

Jak zarządzasz CSS?

Bardzo lubię ten sposób pracy; pozwala mi pisać CSS w prosty, stopniowo ulepszany sposób. W zależności od projektu możemy zawrzeć znacznie więcej oprzyrządowania i obróbki plików. Lub, może buduję prostą witrynę, w którym to przypadku konfiguracja będzie podobna do tej, którą widzieliśmy w tym artykule — z lekkim przetwarzaniem Sassa. Fakt, że Fractal oznacza, że ​​możemy mieć ten sam proces dla dużych i małych witryn, aplikacji internetowych lub stron internetowych. Oznacza to, że zawsze możemy pracować w znajomy sposób.

To działa dla nas i mam nadzieję, że ten artykuł może dać ci kilka rzeczy do eksperymentowania. Jednak chciałbym poznać sposoby, w jakie Ty i Twój zespół podeszliście do zarządzania CSS w swoich projektach oraz mocne i słabe strony podejść, które wypróbowaliście. Chciałbym szczególnie usłyszeć od każdego, kto opracował podobny proces przy użyciu innego rozwiązania biblioteki wzorców. Dodaj swoje doświadczenia w komentarzach.