Jak powinienem uporządkować zawartość moich plików CSS?

80

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?

css 
— Adam Bellaire
źródło
1
Do Twojej wiadomości - zadałem <a href=" stackoverflow.com/questions/72911/ ... to samo pytanie</a>, na wypadek gdybyś chciał przeczytać więcej odpowiedzi.
— Nathan Long
1
świetne pytanie, wygenerowało świetne odpowiedzi. Znalazłem wiele przydatnych rzeczy. Dzięki.
— Sebastien

Odpowiedzi:

54

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

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 ...

— mercator
źródło
Uwaga: reset.cssstał się martwym łączem
— Braden Best
@BradenBest, dzięki, zaktualizowano linki YUI. Nie jestem jednak pewien, czy ten link reset.css nadal zawiera te same informacje, co pierwotnie. I YUI nie jest już aktualizowany , więc pewnie lepiej z pewnym Googling.
— mercator
18

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
— wusher
źródło
Jeśli zamierzasz dodać CSS, który jest używany tylko na jednej stronie, dlaczego po prostu nie umieścić CSS na tej jednej stronie, bez użycia pliku CSS?
— rozkład jazdy
O Boże, dlaczego o tym nie pomyślałem?
— Sebastien
2
@ user371699 Niektórzy twierdzą, że używanie <link>jest bardziej wydajne niż zaśmiecanie pliku HTML <style>znacznikiem.
— DylRicho
1
@Sebastien Możesz łatwo przełączać się między różnymi stylami, jeśli utrzymujesz swój css w plikach css. Za pomocą tagu <style> musisz wszystko przepisać.
— reinaldoluckman
1
@AlexLeung Łatwiejsze w utrzymaniu. Zły dobór słów z mojej strony!
— DylRicho,
9

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.

— Oli
źródło
Tworzenie jednego dużego pliku CSS (lub dowolnego innego) do celów programistycznych jest całkowicie złą praktyką. Czy kiedykolwiek pracowałeś np. Z plikami CSS lub JavaScript o długości ponad 5000 linii? Prawdopodobnie nie. Istnieją jednak narzędzia, które minimalizują i łączą wszystkie CSS w jeden duży dla środowiska produkcyjnego (i innych plików), aby wykonać tę pracę za Ciebie, bez takich problemów na etapie tworzenia.
— forsberg
Zwróć uwagę, że ta odpowiedź ma 9 lat. Narzędzia, które istniały wtedy, naprawdę nie były tak zaawansowane, jak te, których używasz dzisiaj (np. Preprocesory LESS / SASS). Ale w każdym razie, jeden duży arkusz stylów nie był wtedy rzadkością ... Stąd styl w odpowiedzi. Gdyby nie były liniowe, miałyby 10 000 linii. Obecnie robię rzeczy inaczej, ale mam różne narzędzia i mamy takie rzeczy, jak HTTP2, aby zminimalizować opóźnienia między pobieraniem.
— Oli
9

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.

  1. 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:

— Chris Spittles
źródło
4

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.

— Jonathan Arkell
źródło
Zwykle się z tym zgadzam, z niewielkimi różnicami w sposobie, w jaki bym to opisał ... 1) Zasady globalne (takie same, jak opisałeś, ale wpływają na prawie wszystko w witrynie), nagłówek, stopka, obszar zawartości i ewentualne paski boczne, które stanowią większość lub wszystkie strony, oraz 3) indywidualne reguły strony, w razie potrzeby, podzielone na pliki dla odpowiednich stron. Pojawiły się komentarze, że dzielenie arkuszy stylów w ten sposób skutkuje zbyt wieloma żądaniami, ale w rzeczywistości są to tylko dwa żądania i zapewnia, że ​​niepotrzebne style nie są ładowane na każdej stronie.
— MQuiggGeorgia
Ta oryginalna odpowiedź ma 10 lat i nie powinna być w żaden sposób uznawana za najnowszą.
— Jonathan Arkell
Nie zamierzam edytować, po prostu dodam zastrzeżenie, biorąc pod uwagę jego wiek. To wszystko.
— Jonathan Arkell
4

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 :) .

— Nick Sergeant
źródło
Niedawno ... Dwa lata temu =)
— Oli
ha! rzeczywiście tak zrobił - ciekawe :) Musiał zamieścić link do tego z niedawnego artykułu. a może jestem po prostu szalony.
— Nick Sergeant
2

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.

— Shog9
źródło
1

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.

— Tim Booker
źródło
1

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.

— Sarhanis
źródło
1

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.

— allesklar
źródło
7
Oznacza to, że przeglądarki muszą wysłać 9 żądań do serwera, zanim zaczną renderować stronę! Należy pamiętać, że większość przeglądarek nie zezwala na więcej niż dwa połączenia z serwerem na raz! To jest dobre dla programistów, ale chcesz skompresować to do jednego pliku do produkcji! To samo dotyczy JS
— Oli
3
link jest znacznie wydajniejszy niż @import. Zasada Yahoo YSlow # 13
— scunliffe
1

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; }
— cllpse
źródło
0

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
— Eric Harms
źródło
-2

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.

— htmlstrap
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.