Najlepszy sposób na strukturyzowanie arkusza stylów CSS

Question

Jestem względnie nowy w CSS, ale wydaje mi się, że język jest dość dobry dla początkującego. Jednakże, podczas gdy wiele samouczków, które przeczytałem, często ostrzega o "uporządkowaniu i uporządkowaniu twojego arkusza stylów" (i mogę z pewnością zobaczyć, dlaczego teraz stworzyłem kilka dość długich arkuszy stylów) nie mogę się doczekać życia, aby znaleźć jakiekolwiek informacje o znormalizowany format arkusza stylów lub wzór logiczny układu ułatwiający późniejsze czytanie.

Na przykład, czy mogę utworzyć sekcję z komentarzem dla każdej sekcji "geograficznej" mojej strony (nagłówek, wiersz1, wiersz2, artykuł1 itd.) I zachować wszystkie style dla tej sekcji w obrębie tych granic komentarza? Problem pojawia się, gdy mam style, które są ponownie używane w innych sekcjach - i umieszczenie ich w sekcji dla stylów obejmujących całą stronę, a następnie neguje cel grupowania ich według sekcji. Podobnie, strukturyzowanie mojego arkusza stylów poprzez grupowanie na podstawie stylów tekstu, stylów układu itp. Wydaje się jeszcze bardziej mylące.

Czy istnieje "dobra praktyka"? Wiem, że to brzmi głupio, ale wydaje się, że bez względu na to, co zrobisz z HTML i CSS, ktoś jest gotów powiedzieć ci o swojej złej, złej praktyce lub niesemisjonalnej i jestem zdezorientowany. Chcę, aby mój kod był dobrym przykładem mojej pracy na wypadek, gdyby pracodawca chciał to sprawdzić w przyszłości.

Answer 1

Jeszcze nigdy mnie nie nauczono, ale mogę Ci powiedzieć, jak organizować swoje dokumenty CSS. Jak sam mówisz, lubię dzielić je na "geograficzne" obszary ... tj. Reguły odnoszące się do nagłówka, pasków bocznych, głównej treści, stopki itp. A potem, poniżej nich, dodaję bardzo szczegółowe zasady , powiedz jeśli potrzebuję naszkicować formularz lub tabelę na konkretnej stronie. Na koniec dodam sekcję "Ogólne Gubbins" na dole, gdy dodaję ogólne zasady, które mogą mieć zastosowanie w całym tekście.

O tak, lubię też dodawać paletę projektanta na górę, by szybko się z nim zapoznać.

Na przykład ...

/* 
PALETTE: 
dark grey : #555555; 
pink  : #d93575; 
*/ 

/* HEADER */ 
#header {...} 
#header ul {...} 

/* SIDE BAR */ 
#side {...} 
#side ul {....} 

/* CONTENT */ 
#content{...} 
#content p {....} 

/* FOOTER */ 
#footer{...} 
#footer div {....} 

/* FORMS */ 
form {...} 
input {...} 

/* GENERAL GUBBINS */ 
.center {...} 
strong {...} 
floatleft {...} 

Answer 2

Oni radzę "Porządkowanie arkusza stylów z top-down" (http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/ Structure). Często używam wielu arkuszy stylów. Na przykład w MVC - możesz zmieniać style registratora na podstawie widoku. W ten sposób możesz umieścić style specyficzne dla widoku w określonym arkuszu stylów, jednocześnie nie mieszając się do swojego "udostępnionego" lub "układu".