Organizacja klas, kod html, css - co stosować i jak to robić lepiej

Question

Cześć.

Napisałem ostatnio pierwszą nieco bardziej skomplikowaną stronę firmową (strona główna i podstrony typu o nas kontakt itp). Idea była taka, żeby menu, footer i niektóre elementy jak nagłówki, przyciski powtarzały się (pod wzgledem wizualnym)  również na podstronach. Niestety gdy pisałem kolejną podstronę po użyciu bloków kodu z poprzedniej wszystko już zaczęło się sypać w RWD i wgl. Zauważyłem, że popełniłem wiele błędów podczas grupowania elementów w klasy, że gdyby niektóre elementy jak np. nagłówki były poklasowane osobno czy nawet gdybym kroje czcionek i wielkość zklasował osobno to ich użycie na podstronie byłoby dużo łatwiej aplikowalne. Oglądając kod innych stron zauważyłem że dużo elementów html miało wiele klas podczas gdy ja robiłem to jakoś tak, że moje tagi html miały po jednej klasie a później stylowałem z użyciem selektorów typu >, +, nth child, last of type itp.

Czy moglibyscie polecić mi coś do nauki organizacji pracy z html i css? Napisali czego powinienem się nauczyć, jakich narzędzi używać, jakich standardów używać żeby to robić możliwie jak lepiej? To moje początki z kodem i pomyślałem, że chciałbym się z tym uporać zanim ruszę dałej, Dziękuję serdecznie za odpowiedzi .

Answer 1

http://getbem.com/introduction/

To Ci pomoże w organizacji.

A cała reszta przyjdzie z doświadczeniem. Gdyby to było takie proste, jak przeczytanie kilku poradników, to wszyscy byliby seniorami. Jeszcze wiele razy zakopiesz się we własnych błędach, ale następnym razem ich nie popełnisz.

Comments

Dziękuję za odpowiedż! ;)

Answer 2

Ja proponuję BEM, ale dodatkowo: preprocesor typu Sass + przerzucenie możliwie jak największej liczby wartości (czcionki, kolory, domyślne wielkości…) do zmiennych. Dzięki temu będzie można łatwo konfigurować komponenty dla konkretnych projektów.

Comments

Dziękuję za odpowiedż! ;) Własnie zmiennych nauczyłem się używać w trakcie ,,realizacji" tego projektu. ;)