To pytanie dotyczy organizowania samych dyrektyw CSS w pliku .css. Tworząc nową stronę lub zestaw stron, zwykle po prostu ręcznie dodaję dyrektywy do pliku .css, próbując je refaktoryzować, kiedy tylko mogę. Po pewnym czasie mam setki (lub tysiące) wierszy i znalezienie tego, czego potrzebuję, może być trudne podczas dostosowywania układu.

Czy ktoś ma radę, jak zorganizować dyrektywy?

• Czy powinienem spróbować zorganizować odgórnie, naśladując DOM?
• Czy powinienem zorganizować funkcjonalnie, umieszczając dyrektywy dla elementów obsługujących te same części interfejsu użytkownika razem?
• Czy powinienem sortować wszystko alfabetycznie według selektora?
• Jakieś połączenie tych podejść?

Czy istnieje ograniczenie ilości CSS, które powinienem przechowywać w jednym pliku, zanim dobrym pomysłem będzie podzielenie go na oddzielne pliki? Powiedz, 1000 linii? A może zawsze dobrze jest trzymać całość w jednym miejscu?

Powiązane pytanie: Jaki jest najlepszy sposób organizacji reguł CSS?

Na początek spójrz na te trzy prezentacje z udostępnianiem slajdów:

• Piękny, możliwy do utrzymania CSS
• Utrzymywany CSS
• Wydajny, łatwy w utrzymaniu, modułowy CSS

Po pierwsze i najważniejsze, udokumentuj swój CSS. Niezależnie od metody, której używasz do organizowania CSS, bądź spójny i udokumentuj to. Opisz u góry każdego pliku, co jest w tym pliku, być może dostarczając spis treści, być może odwołując się do łatwych do wyszukania unikalnych tagów, aby łatwo przeskakiwać do tych sekcji w edytorze.

Jeśli chcesz podzielić swój CSS na wiele plików, zrób to. Oli wspomniał już, że dodatkowe żądania HTTP mogą być kosztowne, ale możesz mieć to, co najlepsze z obu światów. Użyj jakiegoś skryptu kompilacji, aby opublikować dobrze udokumentowany, modułowy CSS w skompresowanym, pojedynczym pliku CSS. YUI Compressor może pomóc w kompresji.

W przeciwieństwie do tego, co do tej pory powiedzieli inni, wolę zapisywać każdą właściwość w osobnym wierszu i używać wcięć do grupowania reguł. Np. Idąc za przykładem Oliego:

#content {
    /* css */
}
    #content div {
        /* css */
    }
    #content span {
        /* css */
    }
    #content etc {
        /* css */
    }

#header {
    /* css */
}
    #header etc {
        /* css */
    }

Ułatwia to śledzenie struktury plików, szczególnie z wystarczającą ilością białych znaków i wyraźnie zaznaczonymi komentarzami między grupami (choć nie jest tak łatwe do szybkiego przejrzenia) i łatwe do edycji (ponieważ nie musisz przedzierać się przez pojedyncze długie linie CSS dla każdej reguły).

Zrozum i wykorzystaj kaskadę i specyfikę (więc sortowanie selektorów alfabetycznie jest od razu niemożliwe).

To, czy podzielę moje CSS na wiele plików i w jakich plikach, zależy od rozmiaru i złożoności witryny i CSS. Zawsze przynajmniej mam reset.css. layout.cssZwykle towarzyszy temu ogólny układ strony, nav.cssjeśli menu nawigacji witryny stają się trochę skomplikowane i forms.cssjeśli mam dużo CSS do stylizacji moich formularzy. Poza tym nadal sam to rozumiem. Może mam colors.cssi type.css/fonts.csspodzielić się kolorami / grafiki i typografii, base.cssaby zapewnić pełną styl bazowy dla wszystkich znaczników HTML ...

Mam tendencję do organizowania mojego CSS w ten sposób:

1. reset.css
2. base.css: Ustawiłem układ dla głównych sekcji strony
   1. ogólne style
   2. nagłówek
   3. Nav
   4. zadowolony
   5. stopka
3. dodatkowe- [nazwa strony] .css: klasy używane tylko na jednej stronie

Jednak najłatwiej jest ci to przeczytać!

Poważnie, dostaniesz miliard i pięć sugestii, ale spodoba ci się tylko kilka metod.

Jednak powiem kilka rzeczy:

• Podział pliku CSS na fragmenty pomaga uporządkować go w głowie, ale oznacza więcej żądań z przeglądarek, co ostatecznie prowadzi do wolniej działającego serwera (więcej żądań), a przeglądanie stron zajmuje więcej czasu. Miej to w pamięci.
• Rozbijanie pliku tylko dlatego, że zawiera dowolną liczbę wierszy, jest głupie (z wyjątkiem tego, że masz okropny edytor - w takim przypadku zdobądź nowy)

Osobiście koduję mój CSS w ten sposób:

* { /* css */ }
body { /* css */ }
#wrapper { /* css */ }
#innerwrapper { /* css */ }

#content { /* css */ }
#content div { /* css */ }
#content span { /* css */ }
#content etc { /* css */ }

#header { /* css */ }
#header etc { /* css */ }

#footer { /* css */ }
#footer etc { /* css */ }

.class1 { /* css */ }
.class2 { /* css */ }
.class3 { /* css */ }
.classn { /* css */ }

Utrzymywanie reguł w jednej linii pozwala mi bardzo szybko przejrzeć plik i zobaczyć, jakie są zasady. Kiedy są rozszerzone, uważam to za ciężką pracę, próbując dowiedzieć się, jakie zasady są stosowane.

Istnieje wiele uznanych metod formatowania CSS. Ostatecznie od Ciebie zależy, co czujesz najbardziej komfortowo podczas pisania, ale pomogą one zarządzać CSS w przypadku większych, bardziej skomplikowanych projektów. Nie żeby to miało znaczenia, ale zazwyczaj używam kombinacji BEM i SMACSS.

BEM (blok, element, modyfikator)

BEM to bardzo przydatna, potężna i prosta konwencja nazewnictwa, która sprawia, że ​​Twój kod frontonu jest łatwiejszy do odczytania i zrozumienia, łatwiejszy w obsłudze, łatwiejszy do skalowania, bardziej niezawodny i wyraźny oraz o wiele bardziej rygorystyczny.

Blok

Samodzielna jednostka, która sama w sobie ma znaczenie, na przykład:

header, container, menu, checkbox, input

Element

Części bloku i nie mają samodzielnego znaczenia. Są semantycznie powiązane z jego blokiem:

menu item, list item, checkbox caption, header title

Modyfikator

Flagi na blokach lub elementach. Użyj ich, aby zmienić wygląd lub zachowanie:

disabled, highlighted, checked, fixed, size big, color yellow

OOCSS

Celem OOCSS jest zachęcanie do ponownego wykorzystania kodu, a ostatecznie szybszych i bardziej wydajnych arkuszy stylów, które są łatwiejsze do dodania i utrzymania.

OOCSS opiera się na dwóch głównych zasadach:

1. Oddzielenie struktury od skóry

Oznacza to zdefiniowanie powtarzających się funkcji wizualnych (takich jak style tła i obramowania) jako oddzielnych „karnacji”, które można łączyć i dopasowywać z różnymi obiektami, aby uzyskać dużą różnorodność wizualną bez dużej ilości kodu. Zobacz obiekt modułu i jego skórki.

2. Oddzielanie pojemników i zawartości

Zasadniczo oznacza to „rzadko używaj stylów zależnych od lokalizacji”. Obiekt powinien wyglądać tak samo bez względu na to, gdzie go umieścisz. Więc zamiast stylizować konkretny obiekt za pomocą .myObject h2 {...}, utwórz i zastosuj klasę, która opisuje dane pytanie, na przykład. Daje to pewność, że: (1) wszystkie niesklasyfikowane elementy będą wyglądać tak samo; (2) wszystkie elementy z klasą kategorii (zwane mixinem) będą wyglądać tak samo; i 3) nie będziesz musiał tworzyć stylu nadpisania dla przypadku, gdy faktycznie chcesz, aby .myObject h2 wyglądał jak normalny.

SMACSS

SMACSS to sposób na zbadanie procesu projektowania i dopasowanie tych sztywnych ram do elastycznego procesu myślowego. Jest to próba udokumentowania spójnego podejścia do tworzenia serwisu przy użyciu CSS.

U podstaw SMACSS leży kategoryzacja. Kategoryzując reguły CSS, zaczynamy dostrzegać wzorce i możemy zdefiniować lepsze praktyki dotyczące każdego z tych wzorców.

Istnieje pięć typów kategorii:

/* Base */

/* Layout */

/* Modules */

/* State */

/* Theme */

Baza Zawiera zresetowane i domyślne style elementów. Może również mieć podstawowe style dla elementów sterujących, takich jak przyciski, siatki itp., Które można nadpisać w dalszej części dokumentu w określonych okolicznościach.

Układ będzie zawierał całą nawigację, menu nawigacyjne, mapy witryn itp.

Moduły zawierają style specyficzne dla obszaru, takie jak style formularzy kontaktowych, kafelki strony głównej, lista produktów itp. Itp.

State Zawiera klasy stanu, takie jak isSelected, isActive, hasError, wasSuccessful itp.

Motyw Zawiera wszelkie style związane z motywami.

Jest ich zbyt wiele, by je szczegółowo opisać, ale spójrz też na te inne:

• SuitCSS
• AtomicCSS (nie Atomic Design)
• oCSS (organiczny CSS)

Idę z tym zamówieniem:

1. Ogólne reguły stylu, zwykle stosowane do gołych elementów (a, ul, ol itp.), Ale mogą to być również klasy ogólne (.button, .error)
2. Zasady układu strony stosowane do większości / wszystkich stron
3. Indywidualne zasady układu strony

W przypadku dowolnej reguły stylu, która ma zastosowanie do pojedynczej strony lub małych stron grupujących, ustawię treść na identyfikator i klasę, ułatwiając kierowanie na określone strony. Id to podstawowa nazwa pliku, a klasa to nazwa katalogu, w którym się on znajduje.

Wypróbowałem kilka różnych strategii i zawsze wracam do tego stylu:

.class {border: 1px solid #000; padding: 0; margin: 0;}

To jest najbardziej przyjazne, jeśli chodzi o dużą ilość deklaracji.

Pan Snook pisał o tym prawie cztery lata temu :) .

Weź pod uwagę popularne style. Nie style, które właśnie stało się to samo, style, które są przeznaczone do być taka sama - gdzie zmieniając styl dla jednego selektora najprawdopodobniej znaczy, że chcesz zmienić drugi również. Przykład tego stylu umieściłem w innym poście: Utwórz zmienną w pliku CSS do użycia w tym pliku CSS .

Oprócz tego zgrupuj powiązane zasady. I podziel swoje reguły na wiele plików ... chyba że każda strona faktycznie potrzebuje każdej reguły.

Ponieważ faktyczna kolejność jest istotną częścią sposobu stosowania CSS, stosowanie sugestii „alfabetycznej” wydaje się nieco głupie.

Ogólnie rzecz biorąc, chcesz pogrupować elementy razem według obszaru strony, którego dotyczą. Np. Główne style, które mają wpływ na wszystko, idą najpierw, potem style nagłówka i stopki, potem style nawigacji, potem style treści głównej, a na końcu style treści drugorzędnych.

W tym momencie uniknąłbym włamania do wielu plików, ponieważ może to być trudniejsze w utrzymaniu. (Bardzo trudno jest utrzymać kaskadowy porządek w głowie, gdy masz otwartych sześć plików CSS). Jednak na pewno zacząłbym przenosić style do różnych plików, gdyby miały one zastosowanie tylko do podzbioru stron, np. Style formularzy są łączone ze stroną tylko wtedy, gdy strona faktycznie zawiera formularz.

Martwiłem się o to nieustannie, ale z pomocą przyszedł Firebug.

W dzisiejszych czasach znacznie łatwiej jest przyjrzeć się powiązaniom między stylami za pomocą Firebuga i na tej podstawie dowiedzieć się, co należy zrobić.

Jasne, zdecydowanie upewnij się, że istnieje rozsądna struktura grupująca powiązane style, ale nie przesadzaj. Firebug sprawia, że ​​śledzenie rzeczy jest o wiele łatwiejsze, że nie musisz się martwić o stworzenie idealnej struktury CSS z góry.

Oto co robię. Mam stronę indeksu CSS bez dyrektyw i która wywołuje różne pliki. Oto krótka próbka:

@import url("stylesheet-name/complete-reset.css");
@import url("stylesheet-name/colors.css");
@import url("stylesheet-name/structure.css");
@import url("stylesheet-name/html-tags.css");
@import url("stylesheet-name/menu-items.css");
@import url("stylesheet-name/portfolio.css");
@import url("stylesheet-name/error-messages.css");

Zaczyna się od całkowitego resetu. Następny plik definiuje paletę kolorów dla łatwego odniesienia. Potem styl główne <div/>s, które określają układ, nagłówek, stopkę, liczbę kolumn, gdzie pasuje, itp ... znaczniki HTML definses <body/>, <h1/>, <p/>, t itd ... Dalej są sekcje konkretne witryny.

Jest bardzo skalowalny i bardzo wyraźny. O wiele łatwiejsze do znalezienia kodu do zmiany i dodania nowych sekcji.

Pliki CSS są buforowane na kliencie. Dlatego dobrą praktyką jest przechowywanie wszystkich stylów w jednym pliku. Ale podczas programowania uważam, że przydatne jest uporządkowanie mojego CSS według domen.

Na przykład: reset.css, design.css, text.cssi tak dalej. Kiedy wypuszczam produkt końcowy, łączę wszystkie style w jeden plik.

Inną przydatną wskazówką jest skupienie się na zasadach, a nie stylach.

Podczas:

ul li
{
    margin-left: 10px;
    padding: 0;
}

Wygląda dobrze, nie jest łatwo znaleźć zasady, gdy masz, powiedzmy, 100 linii kodu.

Zamiast tego używam tego formatu:

rule { property: value; property: value; }

rule { property: value; property: value; }

ITCSS

Przez Harry Roberts (CSS Wizardry)

Definiuje globalną przestrzeń nazw i kaskadę oraz pomaga utrzymać niską specyficzność selektorów.

Struktura

Pierwsze dwa mają zastosowanie tylko wtedy, gdy używasz preprocesora.

1. (Ustawienia)
2. (Przybory)
3. Generics
4. Elementy
5. Obiekty
6. składniki
7. Atuty

Zwykle robię to:

1. <link rel="stylesheet" href="css/style.css">

2. W style.css importuję:

   @import url(colors.css);
   @import url(grid.css);
   @import url(custom.css); + some more files (if needed)
   

3. W colors.cssI @importnastępujące (podczas korzystania z niestandardowych właściwości CSS):

   @import url(root/variable.css);
   

Wszystko jest w porządku i łatwo jest uzyskać dowolną część kodu do edycji. Będę zadowolony, jeśli to jakoś pomoże.