Zarządzanie eksplozją CSS

W przypadku witryny, nad którą pracuję, mocno polegam na CSS. W tej chwili wszystkie style CSS są stosowane dla poszczególnych tagów, więc teraz staram się przenieść je na styl zewnętrzny, aby pomóc w przyszłych zmianach.

Ale teraz problem polega na tym, że zauważyłem, że dostaję „CSS Explosion”. Trudno mi zdecydować, jak najlepiej zorganizować i wyodrębnić dane w pliku CSS.

Korzystam z dużej liczby divtagów w witrynie, przechodząc z witryny opartej głównie na tabelach. Dostaję wiele selektorów CSS, które wyglądają tak:

div.title {
  background-color: blue;
  color: white;
  text-align: center;
}

div.footer {
  /* Styles Here */
}

div.body {
  /* Styles Here */
}

/* And many more */

Nie jest jeszcze tak źle, ale jako początkujący zastanawiałem się, czy można sformułować zalecenia, jak najlepiej zorganizować różne części pliku CSS. Nie chcę mieć osobnego atrybutu CSS dla każdego elementu w mojej witrynie i zawsze chcę, aby plik CSS był dość intuicyjny i łatwy do odczytania.

Moim ostatecznym celem jest ułatwienie korzystania z plików CSS i zademonstrowanie ich siły, by przyspieszyć tworzenie stron internetowych. W ten sposób inne osoby, które mogą pracować na tej stronie w przyszłości, również zaczną ćwiczyć stosowanie dobrych praktyk kodowania, zamiast wybierać to tak, jak ja.

To jest bardzo dobre pytanie. Gdziekolwiek spojrzę, pliki CSS po pewnym czasie wymykają się spod kontroli - szczególnie, ale nie tylko, podczas pracy w zespole.

Oto zasady, których sam staram się przestrzegać (nie zawsze tak się udaje).

• Refaktoryzuj wcześnie, refaktoryzuj często. Często usuwaj pliki CSS, łącz ze sobą wiele definicji tej samej klasy. Natychmiast usuwaj przestarzałe definicje .

• Podczas dodawania CSS podczas naprawiania błędów zostaw komentarz dotyczący tego, co robi zmiana („Ma to na celu upewnienie się, że pole jest wyrównane w IE <7”)

• Unikaj zwolnień, np. Definiując to samo w .classnamei .classname:hover.

• Użyj komentarzy, /** Head **/aby zbudować przejrzystą strukturę.

• Użyj narzędzia prettifier, które pomaga utrzymać stały styl. Używam Polystyle , z którym jestem całkiem zadowolony (kosztuje 15 USD, ale to dobrze wydane pieniądze). Są też darmowe (np. Code Beautifier oparty na CSS Tidy , narzędziu open source).

• Buduj rozsądne klasy. Poniżej znajduje się kilka uwag na ten temat.

• Używaj semantyki, unikaj zupy DIV - <ul>na przykład użyj s do menu.

• Zdefiniuj wszystko na jak najniższym poziomie (np. Domyślna rodzina czcionek, kolor i rozmiar w body) i używaj, inheritjeśli to możliwe

• Jeśli masz bardzo złożony CSS, być może pomaga prekompilator CSS. Wkrótce planuję przyjrzeć się xCSS z tego samego powodu. Wokół jest kilka innych.

• Pracując w zespole, podkreśl także konieczność jakości i standardów dla plików CSS. Wszyscy znają standardy kodowania w swoim języku (językach) programowania, ale niewiele wiadomo, że jest to konieczne również dla CSS.

• W przypadku pracy w zespole, należy rozważyć użycie Version Control. Ułatwia śledzenie i znacznie łatwiejsze rozwiązywanie konfliktów. Naprawdę warto, nawet jeśli „po prostu” lubisz HTML i CSS.

• Nie współpracuj z !important. Nie tylko dlatego, że IE = <7 nie może sobie z tym poradzić. W złożonej strukturze użycie !importantczęsto kusi do zmiany zachowania, którego źródła nie można znaleźć, ale jest to trucizna dla długotrwałej konserwacji.

Budowanie rozsądnych klas

W ten sposób lubię budować rozsądne klasy.

Najpierw stosuję ustawienia globalne:

body { font-family: .... font-size ... color ... }
a { text-decoration: none; }

Następnie identyfikuję główne sekcje układu strony - np. Górny obszar, menu, treść i stopkę. Jeśli napisałem dobry znacznik, obszary te będą identyczne ze strukturą HTML.

Następnie zaczynam budować klasy CSS, określając możliwie jak najwięcej przodków, o ile jest to rozsądne, i grupując klasy pokrewne możliwie jak najbliżej.

div.content ul.table_of_contents 
div.content ul.table_of_contents li 
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber

Pomyśl o całej strukturze CSS jak o drzewie z coraz bardziej szczegółowymi definicjami, im dalej jesteś od katalogu głównego. Chcesz, aby liczba klas była jak najniższa i chcesz powtarzać się tak rzadko, jak to możliwe.

Załóżmy na przykład, że masz trzy poziomy menu nawigacyjnych. Te trzy menu wyglądają inaczej, ale mają też pewne cechy. Na przykład wszystkie są wszystkie <ul>, wszystkie mają ten sam rozmiar czcionki, a wszystkie elementy znajdują się obok siebie (w przeciwieństwie do domyślnego renderowania an ul). Ponadto żadne z menu nie ma żadnych punktów wypunktowanych ( list-style-type).

Najpierw zdefiniuj wspólne cechy w klasie o nazwie menu:

div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }

następnie zdefiniuj specyficzne cechy każdego z trzech menu. Poziom 1 ma 40 pikseli wysokości; poziomy 2 i 3, 20 pikseli.

Uwaga: możesz również użyć do tego wielu klas, ale program Internet Explorer 6 ma problemy z wieloma klasami , więc w tym przykładzie użyto ids.

div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }

Znaczniki dla menu będą wyglądać następująco:

<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>

Jeśli masz semantycznie podobne elementy na stronie - takie jak te trzy menu - spróbuj najpierw ustalić podobieństwa i umieść je w klasie; następnie opracuj określone właściwości i zastosuj je do klas lub, jeśli musisz obsługiwać Internet Explorer 6, identyfikatory.

Różne wskazówki HTML

Jeśli dodasz tę semantykę do danych wyjściowych HTML, projektanci mogą później dostosować wygląd stron internetowych i / lub aplikacji za pomocą czystego CSS, co jest wielką zaletą i oszczędnością czasu.

• Jeśli to możliwe, nadaj treściom każdej strony wyjątkową klasę: <body class='contactpage'>dzięki temu bardzo łatwo dodasz zmiany strony do arkusza stylów:

  body.contactpage div.container ul.mainmenu li { color: green }

• Podczas automatycznego budowania menu dodaj jak najwięcej kontekstu CSS, aby umożliwić później obszerne stylizowanie. Na przykład:

  <ul class="mainmenu">
   <li class="item_first item_active item_1"> First item </li> 
   <li class="item_2"> Second item </li> 
   <li class="item_3"> Third item </li> 
   <li class="item_last item_4"> Fourth item </li> 
  </ul>

  W ten sposób można uzyskać dostęp do każdego elementu menu w celu stylizacji zgodnie z jego kontekstem semantycznym: Czy jest to pierwszy czy ostatni element na liście; Czy jest to obecnie aktywny element; i według numeru.

Zauważ, że to przypisywanie wielu klas, jak opisano w powyższym przykładzie , nie działa poprawnie w IE6 . Istnieje obejście umożliwiające IE6 radzenie sobie z wieloma klasami. Jeśli obejście nie jest możliwe, musisz ustawić klasę, która jest dla Ciebie najważniejsza (numer pozycji, aktywny lub pierwszy / ostatni), lub zastosować identyfikatory.

Oto tylko 4 przykłady:

• Konwencje CSS / Modele układu kodu
• Czy są jakieś standardy CSS, których powinienem przestrzegać podczas pisania pierwszego arkusza stylów?
• Jaka jest najlepsza metoda porządkowania CSS?
• Najlepsze praktyki - Formatowanie arkuszy stylów CSS

Na wszystkich 4 moja odpowiedź zawierała porady dotyczące pobierania i czytania systemów CSS PDF Natalie Downe . (Plik PDF zawiera mnóstwo notatek, których nie ma na slajdach, więc przeczytaj plik PDF!). Zwróć uwagę na jej sugestie dotyczące organizacji.

EDYCJA (2014/02/05) cztery lata później powiedziałbym:

• Użyj preprocesora CSS i zarządzaj plikami jako częściowymi (osobiście wolę Sass z kompasem, ale Less też jest całkiem dobry i są inne)
• Przeczytaj o pojęciach takich jak OOCSS , SMACSS i BEM lub getbem .
• Zobacz, jak zbudowane są popularne frameworki CSS, takie jak Bootstrap i Zurb Foundation . I nie pomijaj mniej popularnych ram - Inuit jest interesujący, ale jest wiele innych.
• Połącz / zminimalizuj swoje pliki z krokiem kompilacji na serwerze ciągłej integracji i / lub programie uruchamiającym zadania, takim jak Grunt lub Gulp.

Nie pisz nagłówków w CSS

Po prostu podziel sekcje na pliki. Wszelkie komentarze CSS powinny być tylko komentarzami.

reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css

Użyj skryptu, aby połączyć je w jeden; Jeśli to konieczne. Możesz nawet mieć ładną strukturę katalogów i po prostu skanować rekursywnie skrypt w poszukiwaniu .cssplików.

Jeśli musisz pisać nagłówki, na początku pliku przygotuj spis treści

Nagłówki w spisie treści powinny być idealnie równe nagłówkom, które napiszesz później. Szukanie nagłówków jest uciążliwe. Aby dodać do problemu, jak dokładnie ktoś powinien wiedzieć, że masz inny nagłówek po pierwszym nagłówku? ps. nie dodawaj podobnej do doc * * (gwiazdki) na początku każdego wiersza podczas pisania spisu treści, po prostu bardziej denerwuje go wybór tekstu.

/* Table of Contents
   - - - - - - - - -
   Header stuff
   Body Stuff
   Some other junk
   - - - - - - - - -
 */
...
/* Header Stuff 
 */
...
/* Body Stuff 
 */

Pisz komentarze zgodnie z regułami lub wewnątrz nich, nie poza blokiem

Po pierwsze, kiedy edytujesz skrypt, istnieje szansa 50/50, że zwrócisz uwagę na to, co znajduje się poza blokiem reguł (szczególnie jeśli jest to duży glob tekstu;)). Po drugie (prawie) nie ma przypadku, w którym potrzebowałbyś „komentarza” na zewnątrz. Jeśli jest na zewnątrz, jest to 99% czasu tytuł, więc zachowaj go w ten sposób.

Podziel stronę na komponenty

Komponenty powinny mieć position:relative, nie paddingi nie margin, przez większość czasu. Upraszcza% rządzi los, jak również pozwala na znacznie prostsze absolute:position„ing elementów, ponieważ jeśli istnieje absolutna pozycjonowane pojemnik absolutny elementu pozycjonowanego użyje pojemnik przy obliczaniu top, right, bottom, leftwłaściwości.

Większość DIV w dokumencie HTML5 jest zwykle składnikiem.

Składnik jest również czymś, co można uznać za niezależną jednostkę na stronie. W kategoriach laików traktuj coś jak komponent, jeśli ma sens traktowanie czegoś jak blackbox .

Powtarzając przykład strony QA:

#navigation
#question
#answers
#answers .answer
etc.

Dzieląc stronę na komponenty, dzielisz swoją pracę na łatwe do zarządzania jednostki.

Umieść reguły z łącznym efektem na tej samej linii.

Na przykład border, margini padding(nie outline) wszystko dodać do wymiarów i wielkości elementu jesteś stylizacji.

position: absolute; top: 10px; right: 10px;

Jeśli nie są one tak czytelne w jednym wierszu, przynajmniej umieść je w pobliżu:

padding: 10px; margin: 20px;
border: 1px solid black;

Jeśli to możliwe, używaj stenografii:

/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;

Nigdy nie powtarzaj selektora

Jeśli masz więcej instancji tego samego selektora, istnieje duża szansa, że ​​nieuchronnie skończysz z wieloma instancjami tych samych reguł. Na przykład:

#some .selector {
    margin: 0;
    font-size: 11px;
}
...
#some .selector {
    border: 1px solid #000;
    margin: 0;
}

Unikaj używania TAG jako selektorów, kiedy możesz użyć id / klas

Po pierwsze tagi DIV i SPAN są wyjątkiem: nigdy nie powinieneś ich używać, nigdy! ;) Używaj ich tylko do dołączania klasy / identyfikatora.

To...

div#answers div.answer table.statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
    outline: 3px solid #000;
}

Powinny być napisane w ten sposób:

#answers .answer .statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

Ponieważ dodatkowe zwisające DIV nie dodają nic do selektora. Wymuszają także niepotrzebną regułę tagów. Jeśli było zmieniać, na przykład, .answerod A divdo articleswojego stylu pęknie.

Lub jeśli wolisz większą przejrzystość:

#answers .answer .statistics {
    color: pink;
    border: 1px solid #000;
}
#answers .answer table.statistics {
    border-collapse: collapsed;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

Powodem tego border-collapsejest własność specjalna, która ma sens tylko w przypadku zastosowania do table. Jeśli .statisticsnie jest, nie tablepowinno mieć zastosowania.

Ogólne zasady są złe!

• jeśli możesz, unikaj pisania ogólnych / magicznych zasad
• chyba że dotyczy to resetu / resetu CSS, cała twoja ogólna magia powinna dotyczyć co najmniej jednego głównego komponentu

Nie oszczędzają czasu, powodują wybuch głowy; a także uczynić utrzymanie koszmarem. Pisząc regułę, możesz wiedzieć, gdzie mają one zastosowanie, jednak nie ma gwarancji, że reguła nie zadziała z tobą później.

Dodanie do tego ogólnych zasad jest mylące i trudne do odczytania, nawet jeśli masz pojęcie o dokumencie, który projektujesz. Nie oznacza to, że nie powinieneś pisać ogólnych reguł, po prostu ich nie używaj, chyba że naprawdę zamierzasz, aby były ogólne, a nawet dodają tyle informacji o zakresie do selektora, ile możesz.

Takie rzeczy ...

.badges {
    width: 100%;
    white-space: nowrap;
}

address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

... ma ten sam problem, co używanie zmiennych globalnych w języku programowania. Musisz dać im zakres!

#question .userinfo .badges {
    width: 100%;
    white-space: nowrap;
}

#answers .answer .userinfo address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

Zasadniczo brzmi to:

components                   target
---------------------------- --------
#answers .answer   .userinfo address
-------- --------- --------- --------
domain   component component selector 

Lubię używać identyfikatorów za każdym razem, gdy znany mi element jest singletonem na stronie; twoje potrzeby mogą być inne.

Uwaga: Najlepiej byłoby napisać tylko tyle. Wymienienie większej liczby komponentów w selektorze jest jednak bardziej wybaczającym błędem w porównaniu z wymienianiem mniejszej liczby komponentów.

Załóżmy, że masz paginationkomponent. Używasz go w wielu miejscach w swojej witrynie. Byłby to dobry przykład, kiedy piszesz ogólną regułę. Powiedzmy, że display:blockposzczególne linki do numerów stron nadają im ciemnoszare tło. Aby były widoczne, musisz mieć takie zasady:

.pagination .pagelist a {
    color: #fff;
}

Załóżmy teraz, że używasz paginacji do listy odpowiedzi, możesz napotkać coś takiego

#answers .header a {
    color: #000;
}
...
.pagination .pagelist a {
    color: #fff;
}

To sprawi, że twoje białe linki będą czarne, czego nie chcesz.

Niepoprawny sposób to naprawić:

.pagination .pagelist a {
    color: #fff !important;
}

Prawidłowy sposób to naprawić:

#answers .header .pagination .pagelist a {
    color: #fff;
}

Złożone komentarze „logiczne” nie działają :)

Jeśli napiszesz coś w stylu: „ta wartość zależy od bla-bla w połączeniu z wysokością bla-bla”, to jest nieuniknione, że popełnisz błąd i wszystko spadnie jak domek z kart.

Uprość swoje komentarze; jeśli potrzebujesz „operacji logicznych”, rozważ jeden z tych języków szablonów CSS, takich jak SASS lub LESS .

Jak mam napisać paletę kolorów?

Zostaw to na koniec. Przygotuj plik dla całej palety kolorów. Bez tego pliku Twój styl powinien nadal zawierać użyteczną paletę kolorów w regułach. Twoja paleta kolorów powinna nadpisać. Łączymy selektory za pomocą komponentu nadrzędnego bardzo wysokiego poziomu (np. #page), A następnie piszemy swój styl jako samowystarczalny blok reguł. Może to być tylko kolor lub coś więcej.

na przykład.

#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
    color: #222; background: #fff; 
    border-radius: 10px;
    padding: 1em;
}

Pomysł jest prosty, paleta kolorów jest arkuszem stylów niezależnym od stylu podstawowego, do którego kaskadujesz .

Mniej nazw, wymaga mniej pamięci, dzięki czemu kod jest łatwiejszy do odczytania

Używanie mniejszej liczby nazw jest lepsze. Najlepiej użyj bardzo prostych (i krótkich!) Słów: tekst, treść, nagłówek.

Uważam również, że kombinacja prostych słów jest łatwiejsza do zrozumienia niż zupa z długimi „odpowiednimi” słowami: postbody, posthead, userinfo itp.

Utrzymuj słownictwo w ten sposób, nawet jeśli jakiś nieznajomy przychodzi, aby przeczytać twoją zupę (jak ty po kilku tygodniach;)) musi tylko zrozumieć, gdzie używane są słowa, a gdzie każdy selektor. Na przykład używam.this gdy element jest rzekomo „wybranym elementem” lub „bieżącym przedmiotem” itp.

Posprzątaj po sobie

Pisanie CSS jest jak jedzenie, czasem zostawiasz za sobą bałagan. Upewnij się, że posprzątasz ten bałagan, inaczej kod śmieci po prostu się zbierze. Usuń klasy / identyfikatory, których nie używasz. Usuń reguły CSS, których nie używasz. Upewnij się, że wszystko jest w porządku, a nie masz sprzecznych lub zduplikowanych reguł.

Jeśli, tak jak zasugerowałem, traktowałeś niektóre kontenery jako czarne skrzynki (komponenty) w swoim stylu, używałeś tych komponentów w swoich selektorach i trzymałeś wszystko w jednym dedykowanym pliku (lub właściwie podzieliłeś plik z TOC i nagłówkami), wtedy twój praca jest znacznie łatwiejsza ...

Możesz użyć narzędzia, takiego jak rozszerzenie firefox Dust-Me Selectors (wskazówka: skieruj go na swoją stronę sitemap.xml), aby pomóc Ci znaleźć część śmieci ukrytych w twoich css nuklearnych i carnies.

Zachowaj unsorted.cssplik

Załóżmy, że projektujesz witrynę kontroli jakości i masz już arkusz stylów dla „strony odpowiedzi”, którą nazwiemy answers.css. Jeśli musisz teraz dodać dużo nowego css, dodaj go do unsorted.cssarkusza stylów, a następnie ponownie prześlij do swojegoanswers.css arkusza stylów.

Kilka powodów:

• szybciej jest refaktoryzować po zakończeniu, a następnie szukać reguł (które prawdopodobnie nie istnieją) i wstrzykiwać kod
• będziesz pisać rzeczy, które usuniesz, wstrzykiwanie kodu utrudnia jego usunięcie
• dołączanie do oryginalnego pliku z łatwością prowadzi do powielania reguły / selektora

Spójrz na 1. SASS 2. Kompas

Najlepszym sposobem, w jaki widziałem przeciwdziałanie CSSwzdęciom, jest stosowanie zorientowanych obiektowo zasad CSS.

Istnieje nawet platforma OOCSS , która jest całkiem niezła.

Niektóre ideologie są sprzeczne z wieloma wypowiedziami tutaj zawartymi w najważniejszych odpowiedziach, ale gdy już wiesz, jak tworzyć architekturę CSSw sposób obiektowy, zobaczysz, że faktycznie działa to na rzecz zachowania szczupłości i złośliwości kodu.

Kluczową kwestią jest tutaj identyfikacja „Obiektów” lub wzorów bloków konstrukcyjnych w witrynie i architekta z nimi.

Facebook zatrudnił twórcę OOCSS, Nicole Sullivan, aby uzyskać wiele oszczędności w kodzie frontonu (HTML / CSS). Tak rzeczywiście można uzyskać oszczędności nie tylko w CSS, ale w HTML też, co przez niego dźwięk jest bardzo możliwe dla ciebie jak wspomniałeś przekształcenie tableukładu opartego na wiele div„s

Inne świetne podejście jest podobne w niektórych aspektach do OOCSS, polega na zaplanowaniu i napisaniu CSS, aby był skalowalny i modułowy od samego początku. Jonathan Snook napisał genialny artykuł na temat SMACSS - Scalable and Modular Architecture for CSS

Pozwól mi połączyć Cię z kilkoma linkami:
5 błędów ogromnego CSS - (Wideo)
5 błędów ogromnego CSS - (Slajdy)
CSS Bloat - (Slajdy)

Powinieneś także zrozumieć kaskadę, wagę i sposób ich działania.

Zauważyłem, że używasz tylko identyfikatorów klas (div.title). Czy wiesz, że możesz również używać identyfikatorów i że identyfikator ma większą wagę niż klasa?

Na przykład,

#page1 div.title, #page1 ul, #page1 span {
  // rules
}

sprawi, że wszystkie te elementy będą miały taki sam rozmiar czcionki, powiedzmy lub kolor, lub jakikolwiek inny będzie twój przepis. Możesz nawet sprawić, aby wszystkie DIV, które są potomkami # page1, otrzymały określone reguły.

Jeśli chodzi o wagę, pamiętaj, że osie CSS przemieszczają się od najbardziej ogólnych / najlżejszych do najbardziej specyficznych / najcięższych. Oznacza to, że w selektorze CSS specyfikator elementu jest zastępowany przez specyfikator klasy, jest zastępowany przez specyfikator ID. Liczby się liczą, więc selektor z dwoma specyfikatorami elementów (ul li) będzie miał większą wagę niż jeden z tylko jednym specyfikatorem (li).

Pomyśl o tym jak o cyfrach. 9 w kolumnie jedynek jest wciąż mniejsze niż jeden w kolumnie dziesiątek. Selektor ze specyfikatorem ID, specyfikatorem klasy i specyfikatorami dwóch elementów będzie miał większą wagę niż selektor bez identyfikatora, 500 specyfikatorów klas i 1000 specyfikatorów elementów. Jest to oczywiście absurdalny przykład, ale masz pomysł. Chodzi o to, że zastosowanie tej koncepcji pomaga oczyścić wiele CSS.

BTW, dodanie specyfikatora elementu do klasy (div.title) nie jest konieczne, chyba że wystąpią konflikty z innymi elementami, które mają class = "title". Nie dodawaj zbędnego ciężaru, ponieważ może być konieczne użycie tego ciężaru później.

Czy mogę zasugerować mniej dynamiczne środowisko CSS

Jest podobny do SASS, jak wspomniano wcześniej.

Pomaga utrzymać CSS według klas nadrzędnych.

Na przykład

 #parent{     
  width: 100%;

    #child1
    {    
     background: #E1E8F2;    
     padding: 5px;    
    }

    #child2
   {
     background: #F1F8E2;
     padding: 15px
   }
 }

Co to robi: stosuje szerokość: 100% zarówno do # child1 i # child2.

Ponadto # CSS specyficzny dla # child1 należy do #parent.

To by renderowało

#parent #child1
{
 width: 100%;
 background: #E1E8F2;
 padding: 5px;
}

#parent #child2
{
 width: 100%;
 background: #F1F8E2;
 padding: 15px;
}

Uważam, że trudną rzeczą jest przełożenie wymaganego projektu witryny na szereg reguł. Jeśli projekt witryny jest przejrzysty i oparty na regułach, z tego mogą wynikać nazwy klas i struktura CSS. Ale jeśli ludzie z czasem losowo dodają do witryny małe fragmenty, które nie mają większego sensu, w CSS niewiele można na to poradzić.

Zwykle organizuję swoje pliki CSS mniej więcej tak:

1. Reset CSS na podstawie Erica Meyera . (Ponieważ w przeciwnym razie uważam, że w przypadku większości elementów mam co najmniej jedną lub dwie reguły, które resetują tylko domyślne style przeglądarki - na przykład większość moich list nie wygląda jak domyślny styl HTML dla list).

2. System grid CSS, jeśli strona tego wymaga. ( Opieram moją na 960.gs )

3. Style komponentów pojawiających się na każdej stronie (nagłówki, stopki itp.)

4. Style komponentów używanych w różnych miejscach witryny

5. Style, które są istotne tylko na poszczególnych stronach

Jak widać, większość z nich zależy od projektu witryny. Jeśli projekt jest przejrzysty i zorganizowany, twój CSS może być. Jeśli nie, to jesteś pieprzony.

Moja odpowiedź jest na wysokim szczeblu, aby odpowiedzieć na obawy wysokiego szczebla, które poruszyłeś w swoim pytaniu. Mogą istnieć sztuczki organizacyjne na niskim poziomie i poprawki, które możesz zrobić, aby były ładniejsze, ale żaden z nich nie może naprawić braków metodologicznych. Istnieje kilka rzeczy, które wpływają na wybuch CSS. Oczywiście ogólna złożoność witryny, ale także takie rzeczy jak semantyka nazewnictwa, wydajność CSS, organizacja plików CSS oraz testowalność / akceptowalność.

Wygląda na to, że podążasz właściwą semantyką, ale możesz pójść o krok dalej. Fragmenty HTML, które pojawiają się wielokrotnie na stronie bez modyfikacji strukturalnych (znane jako „moduły”), można uznać za katalogi główne selektorów, a stamtąd można zawrzeć wewnętrzny układ względem tego katalogu głównego. Jest to podstawowa zasada obiektowego CSS i możesz przeczytać / obejrzeć więcej na ten temat w tym wykładzie inżyniera Yahoo .

Należy zauważyć, że to czyste podejście może działać odwrotnie niż w przypadku wydajności, co faworyzuje krótkie selektory oparte na identyfikatorze lub nazwie tagu . Znalezienie równowagi zależy od ciebie, ale jeśli nie masz ogromnej witryny, powinien to być po prostu przewodnik z tyłu głowy przypominający o tym, aby Twoje selektory były krótkie. Więcej informacji o wydajności tutaj .

Na koniec, czy będziesz mieć jeden plik CSS dla całej witryny, czy wiele plików (pojedynczy plik podstawowy używany z plikami na stronę lub sekcję)? Pojedynczy plik jest lepszy pod względem wydajności, ale może być trudniejszy do zrozumienia / utrzymania w przypadku wielu członków zespołu i może być trudniejszy do przetestowania. Do testowania zalecam posiadanie pojedynczej strony testowej CSS, która zawiera każdy obsługiwany moduł CSS do testowania kolizji i niezamierzonego kaskadowania.

Alternatywnie możesz zastosować wiele plików , aby zawęzić reguły CSS do strony lub sekcji. Wymaga to od przeglądarki pobrania wielu plików, co stanowi problem z wydajnością. Możesz użyć programowania po stronie serwera, aby dynamicznie określać i agregować (i minimalizować) pliki CSS w jeden plik. Ale ponieważ te pliki są osobne, a ich testowanie osobne, wprowadzasz możliwość niespójnego wyglądu na różnych stronach / sekcjach. W ten sposób testowanie staje się trudniejsze.

To do Ciebie należy analiza konkretnych potrzeb klienta, odpowiednie zrównoważenie tych obaw.

Jak powiedziałem wcześniej: wejdź do OOCSS. Sass / Less / Compass kusi do użycia, ale dopóki nie użyjesz waniliowego CSS we właściwy sposób, Sass / Less / Compass tylko pogorszy sytuację.

Przede wszystkim przeczytaj o wydajnym css. wypróbuj Google Page Speed ​​i przeczytaj, co napisali Souders o wydajnym css.

Następnie wpisz OOCSS.

• Naucz się pracować z kaskadą. (W końcu nazywamy to Kaskadowymi Arkuszami Stylów).
• Dowiedz się, jak uzyskać odpowiedni poziom szczegółowości (od dołu do góry, a nie od góry do dołu)
• Dowiedz się, jak oddzielić strukturę i skórę (co jest unikalne i jakie są odmiany tych obiektów?)
• Dowiedz się, jak oddzielić pojemnik i zawartość.
• Naucz się kochać siatki.

Zrewolucjonizuje każdy kawałek pisania css. Jestem całkowicie odnowiony i uwielbiam to.

AKTUALIZACJA: SMACSS jest podobny do OOCSS, ale ogólnie łatwiejszy do dostosowania.

Podstawowe zasady rozsądnego CSS, wyodrębnione z refaktoryzacji CSS: od tylko append do modułowego CSS

Napisz w SASS. Byłbyś szalony, aby zrezygnować z zalet zmiennych, miksów i tak dalej.

Nigdy nie używaj identyfikatora HTML do stylizacji; zawsze używaj klas . Identyfikatory HTML, jeśli są używane poprawnie, pojawiają się tylko raz na całej stronie, co jest całkowitym przeciwieństwem ponownego wykorzystania - jednego z najbardziej podstawowych towarów w rozsądnej inżynierii. Co więcej, naprawdę trudno jest przesłonić selektory zawierające identyfikatory i często jedynym sposobem na obezwładnienie jednego identyfikatora HTML jest utworzenie innego identyfikatora, co powoduje, że identyfikatory rozprzestrzeniają się w bazie kodu jak szkodniki. Lepiej zostawić identyfikatory HTML dla niezmiennych haków JavaScript lub testów integracji.

Nazwij swoje klasy CSS według ich funkcji wizualnej, a nie funkcji specyficznej dla aplikacji. Na przykład powiedz „.highlight-box” zamiast „.bundle-product-discount-box”. Kodowanie w ten sposób oznacza, że ​​możesz ponownie użyć istniejących arkuszy stylów, gdy odgrywasz rolę w firmach pobocznych. Na przykład zaczęliśmy sprzedawać noty prawne, ale niedawno przeszliśmy do tutorów prawa. Nasze stare klasy CSS miały nazwy takie jak „.download_document_box”, nazwa klasy, która ma sens przy mówieniu o dokumentach cyfrowych, ale myliłaby się tylko w przypadku zastosowania do nowej domeny prywatnych korepetytorów. Lepszą nazwą, która pasuje zarówno do istniejących, jak i przyszłych usług, byłoby „.pretty_callout_box”.

Unikaj nazywania klas CSS po określonych informacjach siatki. W społecznościach CSS istniała (i nadal istnieje) straszna anty-wzorzec, w której projektanci i twórcy frameworków CSS (kaszel Twitter Bootstrap ) uważają, że „span-2” lub „cols-8” to rozsądne nazwy klas CSS. CSS ma na celu dać ci możliwość modyfikowania projektu bez wpływu na znaczniki (dużo). Twarde kodowanie rozmiarów siatek w HTML udaremnia ten cel, dlatego odradza się go w każdym projekcie, który ma trwać dłużej niż weekend. Więcej o tym, jak później unikaliśmy klas gridowych.

Podziel swój CSS na pliki . Idealnie byłoby podzielić wszystko na „komponenty” / „widżety”, a następnie skomponować strony z tych atomów projektu. Jednak realistycznie zauważysz, że niektóre strony Twojej witryny mają osobliwości (np. Specjalny układ lub dziwna galeria zdjęć, która pojawia się tylko w jednym artykule). W takich przypadkach możesz utworzyć plik związany z tą konkretną stroną, refaktoryzując go do pełnowymiarowego widżetu, gdy stanie się jasne, że element zostanie ponownie użyty w innym miejscu. Jest to kompromis motywowany praktycznymi obawami budżetowymi.

Minimalizuj zagnieżdżanie. Wprowadź nowe klasy zamiast zagnieżdżania selektorów. Fakt, że SASS usuwa ból związany z powtarzaniem selektorów podczas zagnieżdżania, nie oznacza, że ​​musisz zagnieździć pięć poziomów w głąb. Nigdy nie przekwalifikowuj selektora (np. Nie używaj „ul.nav”, gdzie „.nav” może wykonać tę samą pracę.) I nie określaj elementów HTML obok niestandardowej nazwy klasy (np. „H2.highlight”). Zamiast tego po prostu użyj samej nazwy klasy i upuść selektor podstawowy (np. Poprzednim przykładem powinno być „.highlight”). Przekwalifikowanie selektorów nie wnosi żadnej wartości.

Twórz style dla elementów HTML (np. „H1”) tylko podczas stylizowania podstawowych komponentów, które powinny być spójne w całej aplikacji. Unikaj szerokich selektorów, takich jak „nagłówek ul”, ponieważ prawdopodobnie i tak musisz je przesłonić w niektórych miejscach. Jak powtarzamy, przez większość czasu chcesz używać określonej, dobrze nazwanej klasy, kiedy tylko chcesz określonego stylu.

Poznaj podstawy Block-Element-Modifier. Możesz przeczytać o tym na przykład tutaj. Użyliśmy go dość lekko, ale nadal bardzo nam pomógł w organizacji stylów CSS.

Wiele razy widzę osoby dzielące plik na sekcje, z komentarzem nagłówka między sekcjami.

Coś jak

/* Headings and General Text */

.... stuff here for H1, etc..

/* Main page layout */

.... stuff here for layout page setup etc.

Działa całkiem nieźle i może ułatwić późniejsze odnalezienie tego, nad czym pracujesz.

Powinieneś spojrzeć na BEM .

Teoria

BEM to próba dostarczenia zestawu instrukcji do organizowania i nazywania selektorów css w celu uczynienia rzeczy bardziej nadającymi się do ponownego wykorzystania i modułowymi oraz uniknięcia konfliktów między selektorami tego rodzaju, które często prowadzą do kodu spaghetti i specyficznych problemów głowy.

Prawidłowe użycie powoduje naprawdę bardzo pozytywne efekty.

• Style robią to, czego oczekujesz, gdy zostaną dodane do elementu
• Style nie przeciekają i wpływają tylko na to, do czego zostały dodane
• Style są całkowicie oddzielone od struktury dokumentu
• Style nie muszą się wzajemnie na siebie nakładać

BEM dobrze współpracuje z SASS, zapewniając CSS styl niemal obiektowy. Możesz budować pliki modułowe, które obsługują wyświetlanie pojedynczego elementu interfejsu użytkownika i zawierają zmienne, takie jak kolory i „metody”, takie jak sposób obsługi elementów wewnętrznych. Podczas gdy hardcorowy programista OO może mieć kłopoty z tym pomysłem, zastosowane koncepcje wprowadzają wiele ładniejszych części struktur OO, takich jak modułowość, luźne sprzężenie i ścisła spójność oraz możliwość ponownego użycia bez kontekstu. Możesz nawet budować w sposób przypominający zamknięty obiekt, używając Sassa i &operatora .

Bardziej szczegółowy artykuł ze Smashing Magazine można znaleźć tutaj ; i jeden z Harry'ego Robertsa z CCS Wizardry (o którym każdy zaangażowany w css powinien przeczytać) jest tutaj .

W praktyce

Użyłem tego kilka razy, wraz z użyciem SMACSS i OOCSS, co oznacza, że ​​też mam coś do porównania. Pracowałem także w kilku wielkich bałaganach, często własnych, niedoświadczonych.

Kiedy używam BEM w prawdziwym świecie, wzbogacam tę technikę o kilka dodatkowych zasad. Korzystam z klas narzędzi - dobrym przykładem jest klasa opakowania:

.page-section {
    width: 100%;
}
@media screen and (min-width: 1200px) {
    margin: 0 auto;
    width: 1200px;
}

I trochę polegam na kaskadzie i specyficzności. Tutaj byłby moduł BEM .primary-boxi .headerbyłby kontekstem dla konkretnego przekroczenia

.header {
  .primary-box {
    color: #000;
  }
}

(Dokładam wszelkich starań, aby wszystko było jak najbardziej ogólne i wolne od kontekstu, co oznacza, że ​​dobry projekt prawie wszystko znajduje się w modułach, które można ponownie wykorzystać)

Ostatnią kwestią, o której tu wspomnę, jest to, że bez względu na to, jak mały i nieskomplikowany może się wydawać twój projekt, powinieneś to zrobić od samego początku, z dwóch powodów:

• projekty stają się coraz bardziej złożone, dlatego ważne jest położenie dobrych fundamentów, w tym css
• nawet projekt, który wydaje się prosty, ponieważ jest oparty na WordPress, ma niewielką liczbę skryptów JavaScript, wciąż może być bardzo skomplikowany w CSS - OK, nie musisz wykonywać żadnego kodowania po stronie serwera, więc ta część jest prosta, ale nakładka na broszury ma dwadzieścia modułów i trzy odmiany każdego: masz tam bardzo skomplikowany css!

Komponenty sieciowe

W 2015 roku zaczynamy przyglądać się składnikom sieciowym. Nie wiem jeszcze o nich zbyt wiele, ale chcą połączyć wszystkie funkcje front-endu w samodzielne moduły, skutecznie próbując zastosować zasady od BEM do front-endu jako całości i rozproszyć komponenty, ale całkowicie połączone elementy, takie jak fragmenty DOM, Js (MVC) i CSS, które budują ten sam widget interfejsu użytkownika.

W ten sposób zajmą się niektórymi oryginalnymi problemami związanymi z css, które próbowaliśmy rozwiązać za pomocą takich rzeczy jak BEM, a jednocześnie sprawią, że niektóre inne architektury frontonu będą bardziej rozsądne.

Jest tu trochę dalszych lektur , a także tutaj szkielet Polimer, który jest warty obejrzenia

Wreszcie

Myślę też, że jest to doskonały, nowoczesny przewodnik po najlepszych praktykach css - zaprojektowany specjalnie w celu zapobiegania bałaganowi dużych projektów css. Staram się przestrzegać większości z nich.

Polecam przyjrzeć się frameworkowi CSS „Compass Style” .

jest tu jakiś świetny materiał i niektórzy poświęcili dużo czasu, aby odpowiedzieć na to pytanie, jednak jeśli chodzi o oddzielne lub indywidualne arkusze stylów, poszedłbym z oddzielnymi plikami do programowania, a następnie przestawiłem się na użycie wszystkich ogólnych plików css w połączonych lokalizacjach do jednego pliku po wdrożeniu.

w ten sposób uzyskasz to, co najlepsze z obu światów, zwiększysz wydajność (mniej żądań HTTP z przeglądarki) i rozwiążesz problemy z kodem podczas programowania.