Zrozumienie metodologii pisania CSS

W tym poście zobaczymy jakie są metodyki pisania CSS, niektóre dobrze znane metodologie i ich przydatność w optymalizacji naszego kodu CSS. Zacznijmy od najprostszego pytania, aby rzucić piłkę. Jaka jest metodologia?

Metodologia jest system metod. Pomyśl o metodzie jako po prostu sposobie robienia czegoś w sposób systematyczny, w pewnym z góry ustalonym sposobie robienia rzeczy, aby osiągnąć pożądany rezultat.

Aby uzyskać lepsze wyniki, ulepszamy nasze metody, lepiej je planując, zmiana kolejności, uproszczenie kroków - cokolwiek to działa szybciej i jest więcej wydajny.

Metodologia CSS

Porozmawiajmy teraz o metodologii CSS. Podobnie jak w przypadku niemal wszystkiego w życiu, mamy też metodę pisania CSS: niektóre zapisują najpierw reset CSS, niektóre style układu miejsca trwają, niektóre zaczynają się od dwóch do trzech klas do stylizacji elementu, inne zapisują wszystkie kody CSS w pojedynczy plik.

Nasze preferowane metody zostały ustalone na własną rękę z czasem lub pod wpływem innych lub wymagane w naszym miejscu pracy lub ze względu na wszystkie powyższe. Ale z czasem weterani CSS sformułowali metodologie pisania CSS to więcej elastyczny, zdefiniowany, wielokrotnego użytku, zrozumiały i posłuszny.

Przyjrzymy się tym sformułowanym metodologiom, które obejmą:

1. OOCSS (Object Oriented CSS)
2. BEM (blok, element, modyfikator)
3. ACSS (Atomic CSS)
4. SMACSS (Scalable and Modular Architecture for CSS)

Uwaga: Żadna z poniższych koncepcji nie powinna być mylona z żadną strukturą, biblioteką lub narzędziem, które może mieć taką samą nazwę i koncepcję jak te metodologie. Ten post dotyczy tylko metodologii pisania CSS.

1. OOCSS

Kluczowe pojęcia OOCSS (Object Oriented CSS) opracowane przez Nicole Sullivan w 2008 roku obejmują CSS obiekt identyfikacja, rozdzielenie struktury i stylów wizualnych oraz unikanie stylów opartych na lokalizacji.

W OOCSS pierwszym krokiem proponowanym przez Nicole jest identyfikuj obiekty w CSS.

“Zasadniczo „obiekt” CSS jest powtarzającym się wzorem wizualnym, który można streścić w niezależny fragment kodu HTML, CSS i prawdopodobnie JavaScript. Ten obiekt można następnie ponownie wykorzystać w całej witrynie. - Nicole Sullivan, Github (OOCSS)“

Weźmy na przykład tę strukturę z tej strony. Oto coś, co jest powtarzającym się wzorem wizualnym i ma swój własny niezależny HTML i / lub CSS:

Mamy tutaj dwa rodzaje obiektów, większy podgląd tytułów, które nazwiemy post-podglądowy oraz pasek boczny z tytułami, które nazwiemy post-podgląd-drugorzędny.

Musimy oddzielna struktura i skóra (tj. style, które tworzą wygląd obiektów). Dwa typy obiektów mają różne struktury, jedna znajduje się w większym polu, chociaż wyglądają podobnie, z obrazami po lewej i tytułami po prawej.

Dajmy obrazom obu obiektów klasę obraz po zapowiedzi i dodaj kod, który umieszcza obraz po lewej stronie. To powstrzymuje nas od konieczności powtarzania kodu gdzie umieścić obraz wewnątrz obiektów w CSS. Jeśli istnieją inne podobne obiekty, ponownie je wykorzystujemy obraz po zapowiedzi dla nich.

Separacja skóry może być również wykonana dla prostszych stylów granice lub tła. Jeśli masz wiele obiektów z tą samą niebieską ramką, tworzenie osobnej klasy dla niebieskiej ramki i dodawanie go do obiektów będzie zmniejsz liczbę przypadków, w których niebieskie granice muszą być kodowane w CSS.

Nicole również sugeruje nie dodawać style na podstawie lokalizacji, na przykład zamiast kierować wszystkie linki w określonym div, aby je podświetlić, podaj te linki klasa wyróżnienia z odpowiednimi stylami CSS. W ten sposób, gdy musisz podświetlić link w innej części strony, możesz ponownie użyć klasy wyróżnienia.

Zalety OOCSS: Kody wizualne wielokrotnego użytku, elastyczne kody lokalizacji, redukcja w głęboko zagnieżdżonych selektorach.

Cons OOCSS: Bez sporej liczby powtarzających się wzorców wizualnych struktura podziału i kody stylu wizualnego wydają się niepotrzebne.

2. BEM

Kluczowe koncepcje BEM (Block, Element, Modifier) ​​opracowane przez deweloperów w Yandex w 2009 roku obejmują identyfikację blok, element & modyfikator i odpowiednio nazywając je.

ZA “blok” jest zasadniczo taki sam jak “obiekt”(z wcześniejszego przykładu), a “element” odnosi się do komponentów bloku (obraz, tytuł, tekst podglądu w powyższym przykładzie) Poprzedni post- obiekty). ZA “modyfikator” może być używany, gdy zmienia się stan bloku lub elementu, na przykład gdy dodajesz aktywną klasę do elementu menu, aby ją podświetlić, aktywna klasa działa jako modyfikator.

Po zidentyfikowaniu komponentów nazwij je odpowiednio. Na przykład:

• blok menu będzie miał klasę menu
• jego przedmioty będą miały klasę pozycja w menu (blok i element są oddzielone podwójnym podkreśleniem)
• modyfikator stanu wyłączenia menu może mieć klasę menu_disabled (modyfikator ograniczony pojedynczym podkreśleniem)
• modyfikatorem stanu wyłączenia elementu menu może być menu__item_disabled.

Dla modyfikatorów możemy również użyć kluczowa wartość format nazewnictwa. Na przykład, aby odróżnić dowolne pozycje menu, które łączą się z przestarzałymi artykułami, możemy dać im klasę menu__item_status_obsolete, i do stylizowania dowolnych elementów menu, które wskazują na oczekujące dokumenty, nazwa klasy może być menu__item_status_pending.

Nazwy mogą być modyfikowane do tego, co działa dla Ciebie. Chodzi o to, aby móc identyfikacja, bloki, elementy i modyfikatory z nazw klas. Sprawdź niektóre systemy nazewnictwa wymienione na stronie BEM.

Strona BEM zawiera również listę jak segregację bloków, elementów i modyfikatorów można również wprowadzić do systemu plików CSS. Bloki lubią “guziki” i “wejścia” mogą mieć swoje własne foldery składające się z plików (.css, .js), które są powiązane z tymi blokami, co ułatwia sprawę, gdy chcemy zaimportować te bloki w innych projektach.

Zalety BEM:Łatwe w użyciu nazwy klas i redukcja głębokich selektorów CSS.

Wady BEM:Aby nazwy wyglądały rozsądnie, BEM radzi, abyśmy blokowali element zagnieżdżający się płytko.

3. ACSS

Stał się sławny przez Yahoo, gdzieś pod koniec pierwszego dekada 21^ul wiek, kluczowe koncepcje ACSS polegają na tworzeniu klas dla najbardziej atomowego poziomu stylizacji, tj. pary wartości nieruchomości, a następnie stosowaniu ich w HTML w razie potrzeby.

Trudno jest określić, kiedy ACSS (Atomic CSS) został po raz pierwszy opracowany, ponieważ koncepcja jest już używana od jakiegoś czasu. Deweloperzy używają takich klas jak .clearfix overflow: hidden przez długi czas. Pomysł w ACSS polega na mieć klasę dla prawie każdej wielokrotnej wielokrotnej niezwiązanej z treścią pary wartości nieruchomości będziemy potrzebować w naszej witrynie i dodawać te klasy, gdy będą potrzebne, do elementów HTML.

Poniżej znajduje się przykład klas opartych na ACSS i sposób ich użycia w HTML.

 .mr-8 margin-right: 8px; .fl-r float: right; 
 

Jak widać, liczba klas wzrośnie dzięki tej metodzie, a HTML będzie zatłoczony przez wszystkie te klasy. Ta metoda nie jest w 100% skuteczna, ale może być użyteczna, jeśli jest taka potrzeba. Yahoo używa tego w końcu.

Zalety ACSS:Stylowanie HTML bez pozostawiania HTML.

Wady ACSS:Zbyt wiele klas, niezbyt zadbanych i możesz tego nienawidzić.

4. SMACSS

Opracowany w 2011 roku przez Jonathana Snooka SMACSS (Scalable and Modular Architecture for CSS) działa poprzez identyfikację 5 różnych typów reguł stylu. Na ich podstawie tworzone są nazwy klas i system archiwizacji.

“SMACSS to sposób na sprawdzenie procesu projektowania i na dopasowanie tych sztywnych ram do elastycznego procesu myślowego. - Jonathan Snook”

SMACSS identyfikuje 5 typów reguł stylu, a mianowicie baza, układ, moduł, stan, i motyw.

• Style bazowe to domyślne style kierowane na podstawowe znaczniki HTML, takie jak

  , .

• Style układu są stylami używanymi do definiowania układu strony, np. Kodowania, w którym będą wyświetlane nagłówek, stopka i menu boczne.
• Style modułu są specyficzne dla modułu takiego jak galeria lub pokaz slajdów.
• Style stanów służą do wyróżniania elementów ze zmiennymi stanami, takimi jak ukryte lub wyłączone.
• Motyw służy do zmiany schematu wizualnego strony.

Różne reguły stylu można zidentyfikować za pomocą przedrostka w nazwie klasy, na przykład nagłówek l (dla układu) lub nagłówek t (dla kompozycji). Możemy również organizować te różne typy reguł, umieszczając je w oddzielnych plikach i folderach.

Plusy SMACSS:Lepszy zorganizowany kod.

Wady SMACSS: Nic, o czym mogę pomyśleć.

Istnieje bezpłatna książka online, którą możesz przeczytać o SMACSS, lub możesz kupić jej wersję ebooka, aby dowiedzieć się więcej.

Wniosek

Powyższe metodologie CSS dadzą ci system zarządzaj i optymalizuj swoje kody CSS. Można je łączyć razem, np. OOCSS-SMACSS, OOCSS-BEM lub BEM-SAMCSS, w zależności od potrzeb.

Istnieją także frameworki i biblioteki, jeśli chcesz zautomatyzowany system do wykonywania metodologii CSS, takich jak:

• Ramy OOCSS
• Narzędzia BEM
• Organiczny framework CSS (zgodny z koncepcją atomową).