WTF per minute - wyznacznik czystego kodu

Witam, jestem poczatkujacym programista zajmujacym sie web dev. Mam juz jakies doswiadczenie, wiec czasami jak popatrze sie na jakis kod to mam ochote sie zlapac za glowe (wczoraj mialem watpliwa przyjemnosc ogladania kodu Hindusow, ktory swoj layout zrobili w oparciu o   i <p>). Prawdopodobnie moj kod rowniez nie nalezy do najlepszych dlatego chcialbym to zmienic.

Przeczytalem ksiazke R.C.Martin's Clean Code, ale wciaz jestem glodny wiedzy. Jakie mam oczekiwania? Glownie interesuje mnie nie tyle sam kod co dobre praktyki w projektowaniu stron www. Posluze sie banalnym przykladem (moze nie koniecznie nawet on jest prawidlowy): Jak wstawiac ikony? Za pomoca znacznika <i> - tak jak praktykuje Bootstrap / Facebook - czy tez <span>, a moze :before / :after ?, menu nav powinno miec strukture nav > ul itd.

Nie chce zeby cos tylko dzialalo, ale zeby przede wszystkim ten kod byl solidny i zebym nie musial sie go wstydzic.

Na pewno warto się zapoznać z zasadami:
http://en.wikipedia.org/wiki/KISS_principle
http://en.wikipedia.org/wiki/Don%27t_repeat_yourself
http://en.wikipedia.org/wiki/Separation_of_concerns
http://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it
http://en.wikipedia.org/wiki/SOLID_%28object-oriented_design%29

To o co pytasz to reguły dot. HTML-a który ma swoją specyfikę.

Zasady ogólne (częściowo wyżej wymienione) spisałem tutaj:
http://www.foundbit.com/pl/zasoby/programowanie/podstawy/articles/zasady-kodowania.html

Zasady dot. HTML-a:

• ogólnie szukaj tematów pod hasłem "semantyczny HTML"
• możesz dodać "reponsywny HTML" - to nie do końca to samo, ale znajdziesz tam info jak się robi dzisiaj strony

Formatowanie przez

<p> i &nbsp;

stosuje się w wypadku dokumentów generowanych na podstawie czegoś. Nie jest to piękne, ale napisanie automatu który sformatuje tekst na HTML na poziomie "w miarę" nie jest proste. Przykład takiego narzędzia to wszelkie wtyczki i konwertery Markdown.

To, co dziś będzie wzorcem - za rok będzie antywzorcem - losowy przykład: http://www.paulirish.com/2010/the-protocol-relative-url/

Niech to nie wygląda jak kupa śmieci, niech będzie czytelne dla każdego - to wystarczy :)

Jak wstawiac ikony? Za pomoca znacznika <i > tak jak praktykuje Bootstrap

używanie i do ikon to nadużycie HTMLa, ale jak robisz na Bootstrapie to poświęcasz czystość kodu na rzecz szybkości tworzenia strony od zera do jakiegoś tam efektu. Możesz szkielet strony zrobić bardzo szybko (czasem chwilę, jak dużo copy-pastujesz, czy generujesz szkielet kodu z automatu). Takie strony mają być szybkie w tworzeniu* (biorąc pod uwagę również to, że szybko się tworzy responsywność) i mają być znośne wizualnie, a nie mają mieć czystego HTMLu, bo nie to jest priorytetem w przypadku Bootstrapa.

*chociaż wydaje mi się, że o ile Bootstrap jest szybki w tworzeniu, to już modyfikacje istniejącego kodu takie łatwe nie są, a to dlatego że w Bootstrapie wszystko jest wpisane w HTMLu, niesemantycznie, napaćkane jest tego HTMLa pod niebiosa itp. Jakoś nie mam dobrych doświadczeń z modyfikacją istniejących już stron pisanych na Bootstrapie.

: Jak wstawiac ikony?

zależy gdzie i jakie. Ja myslę, że ważniejsze jest, żeby je wstawiać we właściwym formacie (czyli wektorowym, dzięki temu niezależnie od wielkości ekranu czy zoomu będą wyglądać tak samo dobrze).

Wielkie dzieki za pomocne posty :)

Jeśli chodzi o wstawianie ikon to najodpowiedniejszy będzie znacznik <span> ale zawsze można stworzyć własny (HTML5 na to pozwala) <x-icon>. Było by to dość semantyczne i oddawało by sens, a sądzę, że czytniki ekranu poradziły by sobie z tym jeśli był by odpowiedni rel do tego podpięty.