Struktura CSS lub siatka CSS: czego powinienem użyć w moim projekcie?

Opublikowany: 2022-03-10
Krótkie podsumowanie ↬ Czy zastanawiałeś się kiedyś, czy CSS Grid może rzeczywiście zastąpić potrzebę stosowania frameworków CSS lub bibliotek komponentów innych firm? W ten sposób Rachel Andrew odkryła szereg powodów, dla których ludzie korzystają z zewnętrznych struktur oraz pozytywne i negatywne aspekty takiego postępowania.

Wśród najczęściej zadawanych pytań jest pewna różnorodność pytań: „Czy powinienem użyć CSS Grid czy Bootstrap?” W tym artykule przyjrzę się temu pytaniu. Odkryjesz, że powody używania frameworków są różne i nie są po prostu skupione na wykorzystaniu systemu gridowego zawartego w tych frameworkach. Mam nadzieję, że rozpakowując te powody, pomogę Ci w podjęciu własnej decyzji, co jest najlepsze dla witryn i aplikacji, nad którymi pracujesz, a także dla zespołu, z którym pracujesz.

W tym artykule, kiedy mówię o frameworku , opisuję framework CSS innej firmy, taki jak Bootstrap lub Foundation. Możesz argumentować, że są to naprawdę biblioteki komponentów, ale wiele osób (w tym ich własne dokumenty) opisałoby je jako framework, więc tego właśnie tutaj użyjemy. Ważnym czynnikiem jest to, że są one opracowywane zewnętrznie, bez odniesienia do konkretnych problemów. Alternatywą dla korzystania z frameworka innej firmy jest napisanie własnego CSS — co może obejmować opracowanie własnego wewnętrznego frameworka, użycie kilku wspólnych plików jako punktu wyjścia lub stworzenie każdego projektu jako nowej rzeczy. Wszystkie te rzeczy są robione w odniesieniu do twoich własnych specyficznych potrzeb, a nie bardzo ogólnych.

Dlaczego warto wybrać framework CSS?

Pytanie, czy używać Grid, czy frameworka, jest błędne, ponieważ CSS Grid nie jest zastępczym zamiennikiem tego, co robi framework CSS. Każda eksploracja tematu musi zastanowić się, co zastąpi nasz framework CSS Grid. Chciałem zacząć od dowiedzenia się, dlaczego ludzie w ogóle zdecydowali się na użycie frameworka CSS. Więc zwróciłem się do Twittera i opublikowałem ten tweet.

Było wiele odpowiedzi. Jak się spodziewałem, jest znacznie więcej powodów, aby używać frameworka niż tylko systemu gridowego, który zawiera.

Więcej po skoku! Kontynuuj czytanie poniżej ↓

Struktura daje Twojemu zespołowi gotową dokumentację

Jeśli pracujesz nad projektem z wieloma innymi programistami, każdy tworzony system wewnętrzny będzie musiał również zawierać dokumentację, aby pomóc członkom zespołu efektywnie z niego korzystać. Tworzenie użytecznej dokumentacji jest samo w sobie czasochłonną, fachową pracą i czymś, co duże frameworki radzą sobie bardzo dobrze.

Zrzut ekranu strony głównej dokumentacji Bootstrap
Dokumentacja Bootstrapa. (duży podgląd)

Dokumentacja frameworka pojawiała się raz za razem, a wielu doświadczonych programistów front-end wtrącało się i wyjaśniało, dlaczego zalecają i używają frameworka CSS. Czasami słyszę opinię, że ludzie używają frameworków, ponieważ tak naprawdę nie znają CSS, jednak wiele osób, które odpowiadają, jest mi dobrze znanych jako eksperci w programowaniu CSS. Jestem pewien, że czasami są sfrustrowani wyborami dokonanymi przez framework, jednak przeważają nad tym pozytywne aspekty tego wyboru.

Społeczności internetowe: łatwy dostęp do pomocy

Decydując się na skorzystanie z konkretnego narzędzia, zyskujesz również społeczność użytkowników, którzy mogą prosić o pomoc. O ile nie masz bardzo jasnego problemu z CSS i możesz stworzyć ograniczony przypadek użycia, aby go zademonstrować, proszenie o pomoc z CSS może być trudne. Zwłaszcza jeśli chcesz zapytać, jak podejść do budowy określonego komponentu. Korzystanie z frameworka może dać ci punkt wyjścia dla twojego pytania; ogólnie rzecz biorąc, zamiast zaczynać od zera, będziesz pytać, jak zmodyfikować lub nadać styl określonemu komponentowi. Łatwiej jest o to zapytać, a także łatwiej odpowiedzieć.

System siatki

Pomimo tego, że mamy CSS Grid, wiele osób odpowiedziało, że głównym powodem, dla którego zdecydowali się na użycie frameworka był system gridowy. Oczywiście wiele z tych projektów mogło zostać rozpoczętych na długo przed udostępnieniem CSS Grid. Jednak nawet dzisiaj obawy dotyczące wstecznej kompatybilności lub zrozumienia przez zespół nowszych metod układu mogą powodować, że ludzie będą decydować się na użycie frameworka zamiast na natywny CSS.

Szybkość realizacji projektu

Decydując się na framework, ogólnie rzecz biorąc, znacznie przyspieszy to dostarczenie projektu, w szczególności jeśli ten projekt bardzo dobrze pasuje do sposobu, w jaki framework robi rzeczy i nie wymaga dużego dostosowania.

W przypadku tworzenia MVP dla nowego pomysłu, framework może być doskonałym wyborem. Będziesz miał wiele rzeczy do poświęcenia czasu i nadal będziesz testował założenia pod kątem potrzeb projektu. Możliwość opracowania pierwszej wersji przy użyciu frameworka może pomóc w szybszym udostępnieniu produktu użytkownikom i zaoszczędzić wiele czasu na opracowywaniu rzeczy, których następnie zdecydujesz się nie używać.

Innym miejscem, w którym szybkość i kilka gotowych komponentów mogą być bardzo przydatne, jest tworzenie systemu administracyjnego zaplecza dla witryny lub aplikacji. W przypadku, gdy potrzebujesz po prostu stworzyć kilka ekranów administracyjnych, framework może zaoszczędzić sporo czasu na stylizacji pól formularzy i innych komponentów! Istnieją nawet motywy pulpitu nawigacyjnego dla Bootstrap i Foundation, które mogą stanowić pomocny punkt wyjścia.

Zrzut ekranu zestawu deski rozdzielczej dla Fundacji
Kolekcje komponentów pulpitu nawigacyjnego przyspieszają tworzenie administratora aplikacji. (duży podgląd)

Nie jestem projektantem!

Ten punkt jest powodem, dla którego w przeszłości zdecydowałem się na framework CSS. Nie jestem projektantem, a jeśli muszę coś zaprojektować i zbudować, spędzę dużo czasu na podejmowaniu decyzji projektowych, do których nie mam żadnych kwalifikacji. Byłoby cudownie mieć fundusze na zatrudnienie projektanta do każdego projektu pobocznego, jednak ja tego nie robię, więc framework może oznaczać różnicę między wysyłką rzeczy, a nie.

Radzenie sobie z błędami CSS i problemami z kompatybilnością przeglądarek

Wspomniano mniej niż myślałem, że autorzy frameworka zajmowali się już problemami z przeglądarką, czy to z powodu faktycznych błędów, czy braku wsparcia dla niektórych funkcji. Jednak nadal był to czynnik w podejmowaniu decyzji dla wielu osób.

Aby pomóc w responsywnym projektowaniu

Pojawiło się to kilka razy; ludzie wybierali framework specjalnie ze względu na to, że był responsywny lub że podjąłem dla nich decyzje dotyczące punktów przerwania. Pomyślałem, że to interesujące, że właśnie to było wskazane jako czynnik decydujący o wyborze frameworka.

Dlaczego nie skorzystać z frameworka?

Wśród pozytywnych powodów, dla których wybrano ramy, były niektóre problemy, które ludzie mieli z tym wyborem.

Trudność zastępowania kodu ramowego

Wiele osób skomentowało fakt, że nadpisanie kodu użytego we frameworku może być trudne i że frameworki były dobrym wyborem, jeśli nie potrzebowały zbyt wielu nadpisań. Korzyści płynące z łatwości użytkowania i zrozumienie przez wszystkich członków zespołu, jak korzystać z frameworka, mogą zostać utracone, jeśli istnieje ogromna liczba dostosowań.

Wszystkie strony internetowe wyglądają tak samo

Wina za to, że wszystkie strony internetowe zaczynają wyglądać tak samo, została złożona wprost na drzwi dobrze znanych frameworków CSS. Widziałem witryny, w których jestem pewien, że użyto określonej struktury, a następnie odkryłem, że są to niestandardowe CSS, więc przeważają wybory projektowe dokonywane w tych strukturach.

Trudność w zastąpieniu wspomnianych już stylów frameworków jest w dużej mierze przyczyną tego, że witryny tworzone przy użyciu konkretnego frameworka będą wyglądać podobnie. To nie tylko kwestia twórcza, może być bardzo dziwne, gdy użytkownik kilku stron internetowych, które wybrały ten sam framework, czuje, że wszystkie są tym samym. Jeśli chodzi o przekazywanie Twojej marki i dobre wrażenia użytkownika, być może tracisz coś, decydując się na ogólne wybory ram.

Dziedziczenie problemów CSS całego świata

Niezależnie od tego, czy jest to front czy back-end, każde narzędzie lub framework, który chce trafić do głównego nurtu, musi rozwiązać jak najwięcej problemów. O ile narzędzie nie jest ściśle powiązane z rozwiązywaniem jednego konkretnego przypadku użycia, będzie zawierało wiele bardzo ogólnego kodu oraz kod, który rozwiązuje problemy, których Ty nie masz i nigdy nie będziesz mieć.

Być może masz szczęście, że do oglądania w najnowszych przeglądarkach potrzebujesz tylko pełnego doświadczenia, co pozwala na bardziej ograniczone działanie przeglądarki Internet Explorer lub starszych wersji Chrome. Korzystanie z frameworka z dużą ilością wbudowanego wsparcia, wracając do IE9, skutkowałoby mnóstwem dodatkowego kodu — zwłaszcza biorąc pod uwagę ostatnie ulepszenia układu CSS. Może to również uniemożliwić kreatywność, ponieważ wszystko w ramach zakłada ten wymóg wsparcia. Rzeczy, które są możliwe przy użyciu CSS, mogą być ograniczone przez framework.

Na przykład systemy siatek w popularnych platformach nie mają możliwości rozciągania wierszy, ponieważ nie ma żadnej koncepcji ani wierszy w systemach układu przed układem siatki. CSS Grid Layout z łatwością na to pozwala. Jeśli jesteś przywiązany do siatki Bootstrap, a twój projektant wymyśli projekt, który zawiera elementy, które obejmują wiersze, nie możesz go zaimplementować — pomimo faktu, że Grid może być obsługiwany przez przeglądarki docelowe.

Problemy z wydajnością

Powiązane z powyższym są problemy z wydajnością związane z używaniem dość ogólnego kodu, a nie czymś zoptymalizowanym pod kątem konkretnych przypadków użycia. Próbując poprawić wydajność, natkniesz się na decyzje podejmowane przez framework.

Zwiększony dług techniczny

Chociaż framework może być świetnym sposobem na szybkie uruchomienie Twojego startupu, a w momencie podejmowania tej decyzji jesteś pewien, że go zastąpisz, czy istnieje plan, aby tak się stało?

Nauka frameworka zamiast nauki CSS

Rozmawiając z uczestnikami konferencji i warsztatów, odkryłem, że wiele osób używało tylko frameworka do pisania CSS. Nie ma nic złego w tworzeniu stron internetowych za pomocą jednego z tych narzędzi, biorąc pod uwagę złożoność dzisiejszej platformy internetowej, wyobrażam sobie, że będzie to droga dla wielu ludzi. Może to jednak stać się wyborem ograniczającym karierę, zwłaszcza jeśli ramy, na których opierasz swoje umiejętności, wypadną z łask.

Posiadanie programistów front-end bez znajomości CSS powinno martwić firmę. To sprawia, że ​​niezwykle trudno jest odejść od tego frameworka, jeśli Twój zespół tak naprawdę nie rozumie, jak bez niego wykonywać CSS. Chociaż tak naprawdę nie jest to powód, aby nie używać frameworka, należy o tym pamiętać podczas korzystania z niego. Kiedy nadejdzie dzień odjazdu, masz nadzieję, że zespół będzie gotowy do podjęcia czegoś nowego, bez konieczności pamiętania (lub uczenia się po raz pierwszy) jak pisać CSS!

Wybór nie bierze pod uwagę użytkowników końcowych

Nicole Sullivan zadała prawie to samo pytanie kilka dni przed moim pytaniem, gdy myślałem o napisaniu tego artykułu, chociaż rozważała frameworki front-end jako całość, a nie tylko frameworki CSS. Jeremy Keith zauważył, że dokładnie zero odpowiedzi dotyczyło użytkowników końcowych. Tak też było w przypadku odpowiedzi na moje pytanie.

W naszym wyścigu, aby szybko zbudować naszą witrynę, naszym pragnieniu, aby wszystko było jak najlepsze dla nas jako projektantów i programistów witryny, czy zapominamy, dla kogo to robimy? Czy decyzje podejmowane przez programistę frameworka odpowiadają potrzebom użytkowników witryny, którą budujesz?

Czy możemy zastąpić frameworki „Vanilla” CSS?

Jeśli zastanawiasz się nad zastąpieniem swojego frameworka lub rozpoczęciem nowego projektu bez niego, jakie są rzeczy, które mógłbyś rozważyć, aby ułatwić ten proces?

Zrozum, jakich części struktury potrzebujesz

Jeśli zastępujesz korzystanie z frameworka własnym CSS, dobrym miejscem do rozpoczęcia będzie audyt korzystania z obecnego frameworka. Dowiedz się, czego używasz i dlaczego. Zastanów się, jak wymienisz te elementy w nowym projekcie.

Możesz postępować zgodnie z podobnym procesem, zastanawiając się, czy wybrać framework, czy napisać własny. Jakich części tego możesz rozsądnie oczekiwać? Jak dobrze pasuje do Twoich wymagań? Czy zaimportujesz dużo kodu, który może poprosić odwiedzających o pobranie, ale którego nigdy nie wykorzystasz?

Utwórz udokumentowaną bibliotekę wzorów lub przewodnik po stylach

Jestem wielkim fanem pracy z bibliotekami wzorów i możesz przeczytać mój post tutaj na Smashing Magazine o naszym wykorzystaniu Fractal. Biblioteka wzorców lub przewodnik po stylach umożliwia tworzenie dokumentacji wraz ze wszystkimi komponentami. Wszystkie moje projekty zaczynam od pracy nad CSS w bibliotece wzorców.

Nadal będziesz musiał pisać dokumentację, jako ktoś, kto pisze dokumentację, jednak wiem, że często najtrudniejszą rzeczą jest wiedzieć, od czego zacząć i jak ustrukturyzować dokumentację. Pomaga w tym biblioteka wzorców, która przechowuje dokumentację wraz z CSS dla samego komponentu. Takie podejście może również pomóc w zapobieganiu dezaktualizacji dokumentów, ponieważ są one ściśle powiązane z komponentem, do którego się odnoszą.

Opracuj własne wytyczne dotyczące kodu CSS

Spójność w całym zespole jest niezwykle użyteczna, a bez ram może nic nie dyktować. Zwłaszcza w przypadku nowszych metod układu, często istnieje kilka sposobów, w jakie można zbudować wzór, jeśli wszyscy wybiorą inny, prawdopodobnie pojawią się niespójności.

Lepsze miejsca, w których można poprosić o pomoc

Poza wysyłaniem ludzi w stronę Stack Overflow, wydaje się, że jest bardzo niewiele miejsc, w których można poprosić o pomoc w CSS. W szczególności wydaje się, że niewiele jest miejsc dostępnych dla początkujących. Jeśli mamy zachęcić ludzi do odejścia od narzędzi innych firm, musimy zaspokoić tę potrzebę przyjaznego, pomocnego wsparcia, które pochodzi od społeczności skupionych wokół tych narzędzi.

W firmie możliwe jest, że bardziej doświadczeni programiści mogą zostać wsparciem CSS dla nowszych członków zespołu. Jeśli odchodzisz od frameworka do własnego rozwiązania, rozsądnie byłoby zastanowić się, jakie szkolenie może być potrzebne, aby wypełnić lukę, zwłaszcza jeśli ludzie są przyzwyczajeni do korzystania z pomocy zapewnianej przez narzędzie innej firmy, gdy potrzebowali pomocy w przeszłości .

Przewodniki stylistyczne lub punkty wyjścia dla osób nie będących projektantami

Wiążę się w węzły zadając pytania typu „Których czcionek powinienem użyć?”, „Jak duże powinny być nagłówki w stosunku do tekstu podstawowego?”, „Czy można użyć cienia?” Potrafię łatwo napisać CSS — jeśli wiem, co chcę zrobić! To, czego naprawdę potrzebuję, to pewne zasady tworzenia niestrasznego projektu, jakiś punkt wyjścia dla typografii lub zestaw podstawowych wytycznych, które zastąpiłyby w wielu przypadkach możliwość korzystania z domyślnych ustawień frameworka.

Informowanie ludzi o stanie współczesnego współdziałania przeglądarek

Odkryłem, że ludzie, którzy przez wiele lat byli zanurzeni w programowaniu opartym na frameworku, często mają pogląd na interoperacyjność przeglądarek, która jest przestarzała o kilka lat. Nigdy nie byliśmy w lepszej sytuacji, jeśli chodzi o działanie CSS w różnych przeglądarkach. Może się zdarzyć, że niektóre przeglądarki nie obsługują jednego nowego, błyszczącego fragmentu CSS, ale ogólnie CSS (jeśli jest obsługiwany) nie będzie pełen dziwnych błędów. Na przykład, w prawie wszystkich przypadkach, jeśli używasz CSS Grid w jednej przeglądarce, Twój CSS będzie działał dokładnie tak samo w innej.

Jeśli próbujesz przedstawić argument za nieużywaniem frameworka członkom zespołu, którzy wierzą, że framework chroni ich przed błędami przeglądarki, ten punkt może być przydatny do poruszenia. Czy problemy ze zgodnością przeglądarek są prawdziwe, czy wynikają z obaw z przeszłości?

Czy zobaczymy nową rasę szkieletów?

Interesuje mnie to, czy nasze nowe metody układu graficznego pomogą wprowadzić nowy rodzaj narzędzi i frameworków. Czy zobaczymy narzędzia, które wykorzystują nowe metody projektowania, pozwalają na większą kreatywność, ale nadal dają zespołom i jednostkom niektóre z niezaprzeczalnych zalet, które wyszły z odpowiedzi na mój tweet.

Być może, opierając się na nowych metodach układu, a nie na wbudowanym systemie siatki, ramy w nowym stylu mogą być znacznie lżejsze, stając się zbiorem przydatnych komponentów. Może wtedy być w stanie uciec od niektórych problemów z wydajnością związanych z bardzo ogólnym kodem.

Obszar, w którym framework może pomóc, to pomoc w tworzeniu solidnych rozwiązań awaryjnych dla przeglądarek, które nie obsługują nowszych metod układu, lub poprzez naprawdę solidną dostępność wbudowaną w komponenty. Może to pomóc w dostarczeniu wskazówek dotyczących sposobu pracy, który uwzględnia interoperacyjność i dostępność, nawet dla osób, które nie mają tych rzeczy na pierwszym planie.

Nie sądzę, że zwykłe przełączenie Bootstrap Grid na CSS Grid Layout pozwoli to osiągnąć. Zamiast tego autorzy wymyślający nowe frameworki powinni być może przyjrzeć się niektórym z przedstawionych tutaj powodów i spróbować rozwiązać je na nowe sposoby, wykorzystując do tego nową funkcjonalność, którą mamy w CSS.

Czy powinieneś używać frameworka?

Ty i Twój zespół będziecie musieli sami odpowiedzieć na to pytanie. I bez względu na to, w co ludzie mogą próbować wmówić, żebyś uwierzył, nie ma uniwersalnej dobrej lub złej odpowiedzi. W twoim projekcie jest tylko to, co jest dobre, a co złe. Mam nadzieję, że ten artykuł i wiele odpowiedzi na moje pierwotne pytanie może dać ci kilka rzeczy do omówienia, gdy będziesz zastanawiać się nad tym pytaniem.

Pamiętaj, że odpowiedź będzie się zmieniać z czasem. Przydatnym eksperymentem myślowym może być nie tylko rozważenie tego, czego potrzebujesz w tej chwili, pod względem wstępnego opracowania witryny, ale także rozważenie żywotności witryny. Czy spodziewasz się, że to będzie nadal istnieć za pięć lat? Twój wybór będzie zatem pozytywny czy negatywny?

Dokumentuj swoje decyzje, nie bój się do nich wracać i upewnij się, że Ty i Twój zespół utrzymujecie swoje umiejętności poza ramami, z których zdecydujecie się skorzystać. W ten sposób będziesz w dobrym miejscu, aby przejść w przyszłości i podejmować najlepsze decyzje w kolejnych fazach swojego projektu.

Chciałbym kontynuować rozmowę rozpoczętą w tym tweecie. Poinformuj nas o swoich historiach w komentarzach — mogą one pomóc innym osobom próbującym teraz wypracować, co jest najlepsze dla ich projektów.