Cell jest biblioteką, którą stworzyłem, aby pomóc w stylizacji komponentów UI przy użyciu Sass. Ten artykuł będzie krótkim wprowadzeniem do kilku koncepcji, które (jeśli jesteś zaznajomiony z Sassem) powinny wydawać się znajome. Koncepcje te nazywają się Cell Atoms i Cell Molecules.
A Cell Atom jest pojedynczą właściwością CSS, która wyprowadza dwie różne wartości, które zostaną zastosowane do elementu w oparciu o jakiś przekazany kontekst. W tym przypadku, kontekst może oznaczać takie rzeczy jak obecność pewnych modyfikatorów/pseudo-stanów, lub czy element/jakiś element nadrzędny jest najechany itp. Jest to głównie przydatne podczas przełączania właściwości na podstawie jakiegoś zdarzenia lub interakcji.
Przykładem może być użycie właściwości display do ukrycia/pokazania elementu. To czy wartością właściwości display jest none czy coś w stylu block będzie zależało od kontekstu lub warunku, o którym mowa. W zwykłym Sassie, może to wyglądać mniej więcej tak:
…co spowoduje pokazanie elementu, gdy ma on klasę active. Gdybyśmy chcieli pokazać element, gdy konkretny rodzic miał klasę active, mogłoby to wyglądać tak:
Możemy przedstawić ten przykład za pomocą jakiegoś API CSS-in-JS, które mogłoby wyglądać tak:
…tutaj widać jak w przykładzie JavaScript definiujemy tylko jedną właściwość display, której wartość jest dynamiczna. Wartość ta byłaby ponownie oceniana przy każdej zmianie obiektu context, a element zostałby odpowiednio przemalowany.
W przykładzie Sass, biorąc pod uwagę kaskadową naturę CSS (i brak dynamiki), definiujemy wiele właściwości display w sposób kaskadowy i pozwalamy, aby bitwa specyficzności określiła resztę. Ponieważ Sass posiada funkcje, moglibyśmy pomyśleć o obejściu tego problemu poprzez stworzenie niestandardowej funkcji context w celu naśladowania zachowania CSS-in-JS, coś w stylu:
Jednakże, to nigdy nie mogłoby zadziałać – to mogłoby tylko kiedykolwiek skompilować się do pojedynczej reguły CSS (używając jakiejkolwiek wartości ocenianej w czasie kompilacji). Sass mógłby ocenić context('.someParent.active', block, none) tylko raz zanim zostanie wysłany do klienta, a więc stworzyć tylko pojedynczą regułę CSS; podczas gdy JavaScript mógłby ocenić context.someParent.active ? 'block' : 'none' w locie.
Najlepszym co moglibyśmy zrobić byłoby posiadanie oddzielnych Mixinów dla każdej interesującej nas właściwości. Ten Mixin byłby znany jako Cell Atom. Jeśli użyjemy Cell i Atomu display, powyższy przykład może być zredukowany do:
…co jak widzisz jest teraz bardzo podobne do wersji CSS-in-JS, pozostawiając nam mniej kodu, który jest tak samo czytelny. To mogłoby teraz, pod maską, wyprowadzać dowolną ilość właściwości CSS w dowolną ilość reguł. Powyższy kod byłby syntaktycznym cukrem dla:
…i rzeczywiście, każda instancja Atomu Cell byłaby reprezentowana pod maską w podobny sposób do powyższego (z kontekstem, który jest przekazywany do Atomu jest przekazywany do context Mixin).
Ta koncepcja jest przydatna w niektórych przypadkach, w których określone konteksty wymagają tylko pojedynczej właściwości CSS do modyfikacji, z przykładem hide/show jako najczęstszym przypadkiem użycia, o którym mogłem pomyśleć. Gdybyś potrzebował zastosować wiele właściwości CSS do elementu w oparciu o jakiś przekazany kontekst/warunek, powinieneś użyć context Mixin.
Oczywiście, możesz myśleć, że posiadanie oddzielnych Mixinów dla każdej właściwości jest przesadą, i miałbyś rację, biorąc pod uwagę, że istnieje, co, jak 800 właściwości CSS? Jednakże większość właściwości CSS nie powinna być używana w ten sposób – tylko właściwości które wpływają na układ/funkcjonalność (a nawet wtedy, tylko gdy pojedyncza właściwość kontroluje pojedyncze zachowanie, takie jak hide/show). W związku z tym, Cell obecnie posiada tylko Atomy dla display, position i visibility właściwości.
Cell Molecules
Cell Molecule to w zasadzie zwykły Mixin Sass, który tworzy jedną lub więcej reguł CSS w oparciu o przekazany kontekst/warunek, aby osiągnąć jeden określony rezultat. Celem jest abstrakcja powtarzających się wzorców w kompozytowe Mixiny, poprawiające przejrzystość i łatwość utrzymania Twojej bazy kodu Sass. Żadne właściwości CSS ani wartości nie są przekazywane podczas używania (wywoływania) Molekuł Komórkowych, w przeciwieństwie do Atomów Komórkowych.
Jest to dość podobne w zasadzie do biblioteki Bourbon Sass (różnica polega na tym, że Molekuła Komórkowa pobiera dane wejściowe z kontekstu i wyprowadza wiele reguł sterowanych kontekstem). Biorąc pod uwagę poprzedni przykład hide/show, może to być wyabstrahowane do Molekuły Cell i użyte w następujący sposób:
…zasadniczo mówiąc Cell „Ukryj ten element, chyba że przekazany warunek jest spełniony, w tym przypadku pokaż go”. Wymagana funkcjonalność (tj. stosowanie wartości none lub block) byłaby obsługiwana pod maską przez hipotetyczny show Mixin. Powyższe byłoby cukrem syntaktycznym dla:
…odpowiednik (w zasadzie) tego wcześniejszego przykładu waniliowego Sass, który widzieliśmy:
Nie ma prawdziwego twardego sposobu na zakwalifikowanie jakiegoś zestawu CSS jako Molekuły Komórki; może to być dowolny abstrakcyjny i powtarzający się wzorzec, który wymaga domyślnego stanu, który zmienia się w oparciu o jakiś kontekst.
Cell Molecules są tylko filozofią/koncepcją; obecnie nie ma żadnej biblioteki Molekuł Cell ani niczego
Wniosek
Choć Atomy i Molekuły Cell służą różnym celom, ostatecznym celem obu jest utrzymanie stylów bardziej złożonymi. Używając Cell i identyfikując Atomy i Molekuły w twojej bazie kodu (lub przewidując je, jeśli tworzysz nowy projekt/funkcję) możesz zapewnić, że twoja baza kodu jest bardziej zwięzła i semantyczna, a mniej najeżona różnymi właściwościami CSS, które bez wątpienia zostaną wstawione w nie do końca odpowiednim porządku.
Patrząc na różne przykłady z tego artykułu obok siebie, możemy lepiej zrozumieć motywacje stojące za tymi koncepcjami (pamiętaj, że wszystkie te przykłady osiągają to samo):
W wielu przypadkach trzeba rozważyć, czy istnieje potrzeba tworzenia Molekuły dla czegoś – w powyższym przykładzie, gdzie Molekuła wpływa tylko na pojedynczą właściwość CSS, może być bardziej pragmatyczne trzymać się używania display Atomu.