Zarządzanie CSS Explosion

Oto tylko 4 przykłady:

• konwencje CSS / modele układu kodu
• czy są jakieś standardy CSS, których powinienem przestrzegać podczas pisania mojego pierwszego arkusza stylów?
• Jaka jest najlepsza metoda porządkowania CSS?
• najlepsze praktyki-formatowanie arkusza stylów CSS

Na wszystkich 4 moja odpowiedź zawierała poradę, aby pobrać i przeczytać PDF CSS Systems. (PDF zawiera mnóstwo notatek Nie w slajdy, więc przeczytaj PDF!). Zapoznaj się z jej sugestiami dotyczącymi organizacji.

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

• użyj pre-procesora CSS i zarządzaj plikami jako częściowymi (osobiście wolę Sass z kompasem, ale Less też jest całkiem dobry i są inne)
• poczytaj o takich pojęciach jak OOCSS, SMACSS i BEM lub getbem .
• Spójrz jak popularne frameworki CSS lubią Bootstrap i Zurb Foundation są skonstruowane. I nie lekceważ mniej popularnych frameworków - Inuici jest interesujący, ale jest wiele innych.
• Połącz / minifikuj swoje pliki z etapem kompilacji na serwerze ciągłej integracji i / lub runnerze zadań, takim jak Grunt lub Gulp.

Nie pisz nagłówków w CSS

Po prostu podziel sekcje na pliki. Wszelkie komentarze CSS, powinny być po prostu, komentarze.

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, a Twój skrypt skanuje rekurencyjnie w poszukiwaniu plików .css.

Jeśli musisz pisać nagłówki, miej TOC na początku pliku

Nagłówki w TOC powinny być idealnie równe nagłówkom, które napiszesz później. To jest ból w poszukiwaniu nagłówków. Aby dodać do problemu, skąd dokładnie ktokolwiek ma wiedzieć, że masz inny nagłówek po pierwszym nagłówku? ps. nie dodawaj doc-like * (gwiazdka) na początku każdej linii podczas pisania TOCs, to tylko sprawia, że bardziej irytujące zaznaczanie tekstu.

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

Pisz komentarze z lub w ramach zasad, a nie poza blokiem

Po pierwsze, kiedy edytujesz skrypt jest szansa 50/50, że zwrócisz uwagę na to, co jest poza blokiem reguł (szczególnie jeśli to wielki glob tekstu ;)). Po drugie nie ma (prawie) żadnego przypadku, w którym potrzebowałbyś" komentarza " na zewnątrz. Jeśli jest na zewnątrz, to w 99% przypadków jest to tytuł, więc tak trzymaj.

Podziel stronę na komponenty

Komponenty powinny mieć position:relative, no padding i No margin, przez większość czasu. To znacznie upraszcza reguły % , a także pozwala na znacznie prostsze absolute:position'ING elementów, ponieważ jeśli istnieje absolutny kontener pozycjonowany, element pozycjonowany bezwzględnie użyje kontener podczas przetwarzania top, right, bottom, left właściwości.

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

Komponent jest również czymś, co można uznać za niezależną jednostkę na stronie. W terminologii laików traktuj coś jak komponent, jeśli ma to sens traktować coś jak blackbox .

Kolejny przykład strony QA:

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

Dzieląc stronę na komponenty, dzielisz swoją pracę na zarządzalne jednostki.

Umieść Zasady o łącznym działaniu na tej samej linii.

Na przykład border, margin i padding (ale nie outline) Wszystkie dodają do wymiarów i wielkości elementu, który stylizujesz.

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

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

Użyj skrótu, jeśli to możliwe:

/* 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 nieuniknione kończy się wieloma instancjami tych samych zasad. Na przykład:

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

Unikaj używania tagów jako selektorów, gdy możesz używać id / classes

Po pierwsze znaczniki Div I SPAN są wyjątkiem: nigdy nie powinieneś ich używać, nigdy! ;) Używaj ich tylko do dołączania klasy / id.

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;
}

Powinno być napisane tak:

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

Ponieważ dodatkowe zwisające divy nie dodają nic do selektora. Wymuszają też niepotrzebną regułę tagowania. Gdybyś był aby zmienić, na przykład, .answer Z div na article Twój styl ulegnie złamaniu.

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

#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 jest właściwość border-collapse jest specjalną właściwością, która ma sens tylko wtedy, gdy jest zastosowana do table. Jeśli .statistics nie jest table, nie powinno mieć zastosowania.

Ogólne zasady są złe!

• unikaj pisania ogólnych / magicznych zasad, jeśli możesz
• chyba, że chodzi o CSS-reset/unreet, cała Twoja ogólna Magia powinna mieć zastosowanie do at co najmniej jeden element główny

Nie oszczędzają czasu, powodują, że głowa eksploduje; a także sprawiają, że konserwacja staje się koszmarem. Kiedy piszesz regułę, możesz wiedzieć, gdzie mają one zastosowanie, jednak nie ma to gwarancji, że Twoja zasada nie zadziera z Tobą później.

Aby dodać do tego ogólne zasady są mylące i trudne do odczytania, nawet jeśli masz jakieś pojęcie o dokumencie, który stylizujesz. Nie oznacza to, że nie powinieneś pisać ogólnych reguł, po prostu nie używaj ich, chyba że naprawdę mają być ogólne, a nawet dodają do selektora jak najwięcej informacji o zakresie.

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 zasięg!

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

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

W Zasadzie to brzmi jak:

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

Lubię używać identyfikatorów, gdy komponent, o którym wiem, jest singletonem na stronie; twoje potrzeby mogą być inne.

Uwaga: najlepiej pisać tylko tyle. Wspominając więcej komponentów w selektorze jest jednak tym bardziej wyrozumiałym błędem, w porównaniu z pominięciem mniejszej liczby komponentów.

Załóżmy, że masz pagination Składnik. Używasz go w wielu miejscach na swojej stronie. To byłby dobry przykład, kiedy piszesz ogólną regułę. Powiedzmy, że[39]} poszczególne numery stron łączą się i nadają im ciemnoszare tło. Aby były widoczne, musisz mieć takie zasady: {]}

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

Teraz powiedzmy, że używasz paginacji dla lista odpowiedzi, możesz spotkać się z czymś takim

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

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

Nieprawidłowy sposób naprawienia to:

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

Poprawny sposób naprawienia to:

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

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

Jeśli napiszesz coś w stylu: "ta wartość jest zależna od bla-bla w połączeniu z wysokością bla-bla", to po prostu nieuniknione, że popełnisz błąd i wszystko spadnie jak Dom karty.

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

Jak napisać paletę kolorów?

Eg.

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

Pomysł jest prosty, twoja paleta kolorów jest arkuszem stylów niezależnym od stylu bazowego, w który ty kaskadowo .

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

Używanie mniejszej liczby imion jest lepsze. Najlepiej używać bardzo proste (i krótkie!) słowa: tekst, treść, nagłówek.

Znajduję również połączenie prostych słów jest łatwiejsze do zrozumienia, a następnie posiadanie zupy długich "odpowiednich" słów: postbody, posthead, userinfo itp.

Zachowaj małe słownictwo, w ten sposób nawet jeśli jakiś nieznajomy przychodzi przeczytać twój styl-zupa (jak ty po kilku tygodniach ;)) tylko musi zrozumieć, gdzie słowa są używane, a gdzie każdy Selektor jest używany. Na przykład używam .this gdy element jest rzekomo "wybranym elementem" lub "bieżącym elementem", itp.

Posprzątać po yourself

Pisanie CSS jest jak jedzenie, czasami zostawiasz bałagan po sobie. Upewnij się, że posprzątasz ten bałagan, albo kod śmieci będzie się piętrzył. Usuń klasy / identyfikatory, których nie używasz. Usuń reguły CSS, których nie używasz. Upewnij się, że wszystko jest ładne i nie masz sprzecznych lub zduplikowanych reguł.

Jeśli, jak sugerowałem, potraktowałeś niektóre kontenery jako czarne skrzynki (komponenty) w swoim stylu, użyłeś tych komponentów w swoich selektorach i trzymałeś wszystko w jednym dedykowanym plik (lub odpowiednio podzielić plik z TOC i nagłówków), a następnie praca jest znacznie łatwiejsze...

Możesz użyć narzędzia, takiego jak selektory rozszerzenia Firefox Dust-Me (wskazówka: wskaż go na swoją mapę witryny.xml), aby pomóc Ci znaleźć niektóre śmieci ukryte w atomówkach css i carnies.

Zachowaj unsorted.css plik

Powiedzmy, że stylizujesz stronę QA, a masz już arkusz stylów dla "strony odpowiedzi", którą nazwiemy answers.css. Jeśli teraz musisz dodać dużo nowego css, dodaj go do arkusz stylów unsorted.css następnie refaktoruje do arkusza stylów answers.css.

Kilka powodów tego:

Po skończeniu pracy, szybciej jest refaktorować, a następnie wyszukać reguły (które prawdopodobnie nie istnieją) i wprowadzić kod
• będziesz pisać rzeczy, które usuniesz, wstrzykiwanie kodu tylko utrudnia usunięcie tego kodu
• dołączenie do oryginalnego pliku łatwo prowadzi do powielania reguł / selektora

Zobacz 1. SASS 2. Kompas

Najlepszym sposobem, jaki widziałem, aby przeciwdziałać CSS wzdęcia jest użycie zorientowanych obiektowo zasad CSS.

Istnieje nawetoocss framework, który jest całkiem niezły.

Niektóre ideologie są sprzeczne z wieloma tym, co zostało powiedziane tutaj w najlepszych odpowiedziach, ale gdy już wiesz, jak zaprojektować CSS w sposób zorientowany obiektowo, zobaczysz, że faktycznie działa to na utrzymanie kodu lean & mean.

Kluczową rzeczą jest identyfikacja "obiektów" lub wzorców bloków konstrukcyjnych w witrynie i architekt z nimi.

Facebook zatrudnił twórcę OOCSS, Nicole Sullivan , aby uzyskać dużo oszczędności w ich kodzie front-end (HTML / CSS). Tak, możesz uzyskać oszczędności nie tylko w CSS, ale także w HTML, co jest dla ciebie bardzo możliwe, ponieważ wspominasz o konwersji układu table na wiele div's

Innym świetnym podejściem jest podobne w niektórych aspektach do OOCSS, jest zaplanowanie i napisanie CSS, aby był skalowalny i modułowy od samego początku. Jonathan Snook napisał genialną książkę / ebook o SMACSS-skalowalna i modułowa architektura dla CSS

Pozwól mi podłączyć kilka linków:
5 błędy masywnego CSS - (wideo)
5 błędy masywnego CSS - (slajdy)
CSS Bloat - (slajdy)

Powinieneś także zrozumieć kaskadę, wagę i jak działają.

Zauważyłem, że używasz tylko identyfikatorów klas (div.tytuł). 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ą współdzielić rozmiar czcionki, powiedzmy, lub kolor, czy jakiekolwiek są Twoje zasady. Możesz nawet sprawić, że wszystkie Div, które są potomkami #page1, otrzymają określone reguły.

Co do wagi, pamiętaj, że osie CSS przesuwają się z najbardziej ogólnych/najlżejszych do najbardziej specyficznych/najcięższych. Oznacza to, że w selektorze CSS specyfik elementu jest pomijany przez specyfik klasy jest pomijany przez specyfik 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).

BTW, dodanie specyfikacji elementu do klasy (div.title) nie jest konieczne, chyba że występują konflikty z innymi elementami, które mają class = "title". Nie dodawaj zbędnej wagi, ponieważ może być konieczne użycie tej wagi później.

Mogę zaproponować mniej CSS Dynamic framework

Jest podobny do SASS, jak wspomniano wcześniej.

Pomaga utrzymać CSS w poszczególnych klasach nadrzędnych.

Np.

 #parent{     
  width: 100%;

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

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

Co to robi: Stosuje Szerokość: 100% zarówno do # child1 jak i #child2.

Również, #child1 specyficzny CSS należy do # parent.

To by renderowało do

#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 strony na serię zasad. Jeśli projekt witryny jest przejrzysty i oparty na regułach, mogą z niego wypływać nazwy klas i struktura CSS. Ale jeśli ludzie, z czasem, losowo dodają do witryny małe kawałki, które nie mają większego sensu, nie ma wiele do zrobienia w CSS.

Mam tendencję do porządkowania plików CSS mniej więcej tak:

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

2. / align = "left" / CSS (Bazuję na 960.gs)

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

4. Style Dla komponentów, które są używane w różnych miejscach na całym strona

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

Jak widać, większość z tego zależy od projektu strony. Jeśli projekt jest przejrzysty i zorganizowany, Twój CSS może być. Jeśli nie, masz przerąbane.

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

Wydajesz się być na dobrej drodze z nazewnictwo semantyki, ale można pójść o krok dalej. Sekcje HTML, które pojawiają się wielokrotnie w witrynie bez modyfikacji strukturalnych (znane jako "moduły"), można uznać za korzenie selektora, a stamtąd można objąć wewnętrzny układ względem tego katalogu głównego. Jest to podstawowa zasada zorientowanego obiektowo CSS i możesz przeczytać / obejrzeć więcej na ten temat w tej rozmowie inżyniera Yahoo .

Ważne jest, aby pamiętać, że to czyste podejście może przebiegać odwrotnie niż troska o wydajność, która faworyzuje krótkie selektory oparte na identyfikatorze lub nazwie tagu . Znalezienie tej równowagi zależy od ciebie, ale o ile nie masz ogromnej witryny, powinien to być tylko przewodnik z tyłu głowy przypominający, abyś trzymał selektory krótkie. więcej o wydajności tutaj .

Wreszcie, czy będziesz mieć pojedynczy plik CSS dla całej witryny, lub wiele plików (jeden plik podstawowy używany z plikami na stronę lub sekcję)? Pojedynczy plik jest lepszy dla wydajność, ale może być trudniejsza do zrozumienia/utrzymania z wieloma członkami zespołu i może być trudniejsza do przetestowania. Do testowania, polecam mieć pojedyncza strona testowa CSS , która zawiera każdy obsługiwany moduł CSS do testowania kolizji i niezamierzonych kaskadowych.

Alternatywnie możesz zastosować podejście do wielu plików , aby dopasować reguły CSS do strony lub sekcji. Wymaga to, aby przeglądarka pobierała wiele plików, co jest problemem wydajności. Możesz użyć po stronie serwera programowanie określające i agregujące (i minifikujące) pliki CSS w jeden plik dynamicznie. Ale ponieważ te pliki są oddzielne, a testy dla nich byłyby oddzielne, wprowadzasz możliwość niespójnego wyglądu i stylu między stronami / sekcjami. W ten sposób testowanie staje się trudniejsze.

To do ciebie należy analiza specyficznych potrzeb klienta, odpowiednio wyważenie tych obaw.

Jak powiedziałem przede mną: dostać się do OOCSS. Użycie SASS/Less / Compass jest kuszące, ale dopóki nie zostanie użyty vanilla CSS, właściwy sposób Sass / Less / Compass tylko pogorszy sprawę.

Przede wszystkim poczytaj o efektywnym css. spróbuj Google Page Speed i przeczytaj, co Souders napisał o efektywnym css.

Następnie wprowadź OOCSS.

Naucz się pracować z kaskadą. (W końcu nazywamy to kaskadowymi arkuszami stylów).
• dowiedz się, jak uzyskać ziarnistość (oddolnie zamiast odgórnie)
• dowiedz się, jak oddzielić strukturę i skórę (co jest unikalne i jakie są odmiany tych obiektów?)
• dowiedz się, jak oddzielić kontener od zawartości.
• Naucz się kochać siatki.

Zrewolucjonizuje każdy bit o pisaniu css. Jestem całkowicie odnowiony i kocham to.

UPDATE: SMACSS jest podobny do OOCSS, ale łatwiejsze do dostosowania ogólnie rzecz biorąc.

Podstawowe zasady sensownego CSS, wyodrębnione z refaktoryzacji CSS: od append-only do modularnego CSS

Napisz w SASS.Byłabyś szalona rezygnując z zalet zmiennych, mieszanek 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łkowite przeciwieństwo re-usability - jeden z najbardziej podstawowych towarów w rozsądna Inżynieria. Ponadto, naprawdę trudno jest obejść selektory zawierających identyfikatory i często jedynym sposobem na obezwładnienie jednego identyfikatora HTML jest Utwórz inny ID, powodując, że IDs propaguje się w bazie kodowej, tak jak są szkodnikami. Lepiej zostawić ID HTML dla niezmiennego Javascript lub haki do testów integracyjnych.

Nazywaj swoje klasy CSS według ich funkcji wizualnej, a nie według ich funkcji specyficznej dla aplikacji. na przykład, powiedz ".highlight-box" zamiast ".bundle-product-discount-box". Kodowanie w ten sposób oznacza że można ponownie użyć istniejących arkuszy stylów, gdy poboczne firmy. Na przykład, zaczęliśmy od sprzedaży notatek prawnych, ale niedawno przeniósł się na korepetycje z prawa. Nasze stare klasy CSS miały takie nazwy jak ".download_document_box", nazwa klasy, która ma sens podczas rozmowy o dokumentach cyfrowych, ale tylko mylić, gdy stosuje się do nowych domena prywatnych korepetytorów. Lepsza nazwa, która pasuje zarówno do istniejących usługi - i wszelkie przyszłe-byłyby ".pretty_callout_box"

Unikaj nazywania klas CSS po określonych informacjach o siatce. był (i nadal jest) okropny anty-wzorzec w CSS społeczności, gdzie projektanci i twórcy frameworków CSS ([20]} Twitter Bootstrap ) wierz, że "span-2 "lub" cols-8 " są rozsądnymi nazwami dla CSS klasy. Celem CSS jest umożliwienie modyfikacji Twój projekt bez wpływu na znaczniki (dużo). Hardcoding grids rozmiary do HTML ten cel, więc jest to odradzane w każdym projekt ma trwać dłużej niż weekend. Więcej o tym, jak unikaliśmy klasy siatki później.

Podziel swój CSS na pliki. Najlepiej podzielić wszystko na "komponenty" / "Widżety", a następnie skomponować strony z tych atomów design. Realistycznie jednak zauważysz, że niektóre z twojej strony strony mają osobliwe cechy (np. specjalny układ lub dziwne zdjęcie galeria, która pojawia się tylko w jednym artykule). W takich przypadkach możesz Utwórz plik związany z tą konkretną stroną, tylko refaktoryzując do Pełnowymiarowy widget, gdy stanie się jasne, że element będzie ponownie używane gdzie indziej. Jest to kompromis, który jest motywowany praktyczne problemy budżetowe.

Minimalizuj zagnieżdżanie. wprowadzenie nowych klas zamiast zagnieżdżania selektorów. Fakt, że SASS usuwa ból powtarzających się selektorów kiedy gniazdowanie nie oznacza, że trzeba zagnieżdżać pięć poziomów głęboko. Nigdy nie przekroczył kwalifikacji a selektor (np. nie używaj " ul.nav "gdzie".nav" mógłby zrobić to samo.) I nie podawaj elementów HTML obok niestandardowa nazwa klasy (np. " h2.highlight"). Zamiast tego po prostu Użyj klasy sama nazwa i upuść selektor bazowy (np. poprzedni przykład powinno być ".highlight"). Over-qualifying selectors nie dodaje żadnych wartość.

Tworzenie stylów dla elementów HTML (np. "h1") tylko wtedy, gdy stylizujemy podstawowe komponenty, które powinny być spójne w całej aplikacji. Unikaj szerokie selektory jak "header ul", ponieważ jest prawdopodobne, że ty i tak muszę je obejść w niektórych miejscach. Jak powtarzamy, większość czasu, kiedy chcesz użyć konkretnej, dobrze nazwanej klasy, gdy chcesz konkretnego stylu.

Poznaj podstawy modyfikatora bloków-elementów-elementów. możesz o tym przeczytać na przykład tutaj. Użyliśmy go dość lekko, ale mimo to pomógł nas dużo w organizowaniu stylów CSS.

Wiele razy będę widział 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.

To działa całkiem dobrze i może ułatwić wrócić później i znaleźć to, nad czym pracujesz.

Powinieneś spojrzeć na BEM .

Teoria

Bem jest próbą dostarczenia zestawu instrukcji do organizowania i nazywania selektorów css w celu uczynienia rzeczy bardziej powtarzalnymi i modularnymi oraz uniknięcia kolizji między selektorami, które często prowadzą do bólu głowy kodu spaghetti i specyfiki.

Kiedy jest używany poprawnie, ma bardzo pozytywne efekty.

• Style robią to, czego oczekujesz, gdy zostaną dodane do element
• Style nie przeciekają i działają tylko na to, do czego są dodawane
• style są całkowicie oddzielone od struktury dokumentu
• Style nie muszą być zmuszeni do przejechania się nawzajem

BEM dobrze współpracuje z SASS, aby wprowadzić niemal obiektowy styl do CSS. Możesz tworzyć 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. A hardcore OO programista mógłby się z tym nie zgodzić, w rzeczywistości zastosowane koncepcje wprowadzają wiele ładniejszych części struktur OO, takich jak modułowość, luźne sprzężenie i ścisła spójność i bezkontekstowa ponowna użyteczność. Można nawet zbudować w sposób, który wygląda jak obiekt zamknięty za pomocą Sass i & operatoR.

Bardziej dogłębny artykuł z Smashing Magazine można znaleźć tutaj ; i jeden z Harry ' ego Robertsa z CCS Wizardry (kogo każdy zaangażowany w css powinien przeczytać z) jest tutaj .

W Praktyce

Używałem tego kilka razy, wraz z używaniem SMACSS i OOCSS, co oznacza, że mam też coś do porównania. Pracowałem też w wielkich bałaganach, często własnej, niedoświadczonej twórczości.

Kiedy używam Bema w realnym świecie, rozszerzam technikę o kilka dodatkowych zasad. Używam klas użyteczności - dobrym przykładem jest klasa wrapper:

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

I również polegam nieco na kaskadzie i specyficzność. Tutaj moduł BEM będzie .primary-box, a .header będzie kontekstem dla konkretnej przejazdu

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

(staram się, aby wszystko było jak najbardziej ogólne i wolne od kontekstu, co oznacza, że dobry projekt prawie wszystko jest w modułach, które można ponownie wykorzystać) {]}

Ostatnią kwestią, którą chciałbym tutaj poruszyć jest to, że niezależnie od tego, jak mały i nie skomplikowany może się wydawać Twój projekt, powinieneś to zrobić od początku, z dwóch powodów:]}

• projekty zwiększają złożoność, więc tworzenie dobrych fundamentów jest ważne, css zawiera
• nawet projekt, który wydaje się prosty, ponieważ jest zbudowany na Wordpressie ma niewiele JavaScript może być nadal bardzo złożony w CSS-OK, nie musisz robić żadnego kodowania po stronie serwera, więc ta część jest prosta, ale broszura-wear front end ma dwadzieścia modułów i trzy odmiany każdego: masz bardzo złożony css tam!

Web Components

W 2015 roku zaczynamy przyglądać się komponentom internetowym. Nie wiem. wiem ogromną ilość o nich jeszcze, ale wyglądają, aby przynieść wszystkie funkcje front end razem w samodzielnych modułów, skutecznie starając się zastosować rodzaje zasad od BEM do front end jako całości i Komponenty rozproszone, ale w pełni sprzężone elementy, takie jak fragmenty DOM, JS (MVC)i CSS, które wszystkie budować ten sam widżet UI.

W ten sposób theb zajmie się niektórymi oryginalnymi problemami, które istnieją z css, które próbowaliśmy rozwiązać za pomocą rzeczy takich jak BEM, podczas gdy wzdłuż sposób, aby niektóre z innych front end architektury bardziej rozsądne.

Jest kilka dalszych lektur tutaj a także framework Polimer tutaj który warto zajrzeć

Wreszcie

Myślę również, że jest to doskonały, nowoczesny przewodnik po najlepszych praktykach css - zaprojektowany specjalnie do powstrzymania dużych projektów css przed bałaganem. Staram się śledzić większość z nich.

Polecam spojrzeć na "Compass Style" CSS framework .

Jest tu kilka świetnych materiałów 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, chciałbym przejść z oddzielnymi plikami do rozwoju, a następnie przejść do aby wszystkie generyczne css używane w całej lokalizacji połączyły się w jeden plik po wdrożeniu.

W ten sposób masz najlepsze z obu światów, zwiększa wydajność (Mniej żądań HTTP jest wymagane z przeglądarki) i oddzielenie problemów z kodem podczas rozwijam się.