Jak uporządkować kod HTML z wykorzystaniem CSS?

Kaskadowe arkusze stylów to jedno z najbardziej przydatnych narzędzi wykorzystywanych podczas tworzenia stron WWW. W jaki sposób najefektywniej pracować z CSS-ami? Trzeba zawsze kierować się zasadą KISS – „keep it simple, stupid”

Nie ma sensu tworzyć zaawansowanych, wymagających napisania wielu linii kodu rozwiązań. Większość użytkowników nie doceni tego – poczuje się przytłoczona zawartością strony i jej ograniczoną użyteczność

Aby kod HTML pozostał prosty i przejrzysty, należy unikać zbyt częstego stosowania elementu <div>. W założeniu powinien on być wykorzystywany tylko tam, gdzie żadne inne polecenie nie działa.

Oto przykład nadużywania <div>:

<div id="naglowek">
<div class="bold">Tytuł</div>
</div>
<div id="podtytul">
<div class="bold">Podtytuł</div>
</div>
<div>Treść</div>

Kod mógłby tymczasem wyglądać tak:

<h1>Tytuł</h1>
<h2>Podtytuł</h2>
<p>Treść</p>

To samo dotyczy klas. Wielu webmasterów nie potrafi logicznie podzielić swojej strony WWW i dlatego tworzy nieekonomiczny kod. Oto przykład:

CSS:
a.link{color:red;text-decoration:none}

HTML:

<ul>
<li><a class="link" href="#">Link1</a></li>
<li><a class="link" href="#">Link2</a></li>
<li><a class="link" href="#">Link3</a></li>
</ul>

Zamiast tego można zastosować przecież taką składnię:

CSS:
#nav a {color:red;text-decoration:none}

HTML:
<ul id="nav">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>

Pracując z kaskadowymi arkuszami stylów trzeba pamiętać o marginesach i dopełnieniach (padding). Większość przeglądarek ustawia te parametry automatycznie. Dlatego trzeba modyfikować je z dużą ostrożnością. Warto też unikać bezwzględnego (absolute) pozycjonowania. Zakotwiczone w ten sposób obiekty mogą łatwo zasłonić lub przesunąć inne rzeczy na stronie.

Cały czas trzeba mieć przed oczami zasadę KISS. Pisząc kod warto zastanowić się od czasu do czasu czy dany fragment jest faktycznie niezbędny i czy nie może zostać zastąpiony jakimś prostszym rozwiązaniem. Do tego warto pamiętać o elastyczności - unikać sytuacji, gdy dane elementy w witrynie są rozmieszczone na „sztywno”.

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

2 skomentuj »

Komentarze

#1 sawka 2009-06-03 10:26:05 0
przykład z H1 to bzdura. SEO nakazuje tylko jeden raz wystąpienie H1 a jeśli takich bloczków jest wiele na stronie to poradę mozna wyrzucić do kosza.

Druga sprawa - li jest beznadziejne do stylowania, czesto konczy sie na if'ach i oddzielnych stylach. Lepiej miec wszystko w jednym css i wystylowac co do pixela na div'ach niz skakac po css'ach i robic na li.

Poza tym ti mit ze li jest takie dobre. ot zwykly znacznik. google tak samo znajdzie linki czy menu w li jak i w div. Porady na poziomie przedszkola. Napisane aby cos napisac.
IP: 212.180.184.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
#2 brad 2009-06-05 22:43:15 0
mi sie ten krotki artykul podobal i zastosowalem od razu co trzeba, poprosze o wiecej takich praktycznych rad, co do komentarza powyzej ... a kto tu mowi, zeby uzywac kilka razy h1
IP: 84.10.165.[...] Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30618)

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.