Számomra az alábbi megoldások nyújtják a legmegfelelőbb átláthatóságot a html/css kódolásnál. Elég egyszerű ahhoz, hogy meg lehessen szokni vagy észben lehessen tartani. Próbálgattam bonyolultabb megoldásokat, de azokba egy idő után könnyű bele gabalyodni. Úgy hogy szerintem ez az arany közép út. Ez most persze egy igen szubjektív poszt lesz. Szívesen várom ide azokat a véleményeket, hogy kinek mi a legjobb kódolási megoldás átláthatóság szempontjából.

Head rész előtt és után 2 sornyi távolság, elemei eggyel odébb. Ezt csak azért mert sok fő behívást innen vesz be az oldal, és szerettem ha jól elkülönül. :)

Body stb. elemek után 1 sor távolság.

Diven belüli div 1 sornyi távolság.

Belső div eggyel odébb.

Div tartalma eggyel odébb.

Div tartalmai 1 soros távolságokra egymástól ha külön kezdő/lezáró rézből álló szerkezetű parancsban vannak benne, pl. <a href=""></a>, ha nem, akkor csak egymás után pl. <br /> vagy <img src="" alt="" />.

Divek végét jelölni pl. <!--/kozepso_oszlop--> kiírással is, kivéve az egysorosokat vagy amelyeken belül csak egy sor tartalom van.

ezekre példa: kép1

Összetett, sok divben megegyező, több soros szekciók, 2 sornyi távolságra egymástól. A képen <div class="j_magasitas"></div>-al kezdődő részek.

példa: kép2

Egyéb fajta lezáró parancsoknál ugyanezek szerint.

Törekedni arra, hogy minden formázás a css fájlban legyen.

Törekedni arra, hogy a div nevéből könnyű legyen kitalálni a fő funkcióját vagy a helyét. Értelmetlen szerintem a minél rövidebb nevekre törekedni, azzal csak magunkat szopatjuk. Az a néhány bitnyi fájl méret csökkenés nem éri meg. A technika nem azért van, hogy szopasson, hanem hogy segítsen.

Nehezen értelmezhető php vagy javasript kódok mellé részletes funkció vagy hely leírást adni (hol csinálja azt hogy).

A szerkesztő programokban kikapcsolni az automatikus sortörést. :)

A css fájl

Úgy gondolom, hogy a css fájlban az én átláthatósági megoldásom százszor jobb mint bárki másé. Legalábbis számomra persze :). Minden azonnal megtalálható, és már anélkül látom hogyan épül fel az oldal nagy része és számos egyéb információt, hogy a { }-ben megadott értékekre szinte még rá se néztem.

példa: kép3

A sorrendiség fő logikája a fentről-le és balról-jobbra. A fő konténer div után először például a #fejléc majd valahol légvégén a #lábléc lesz. Vagyis minél jobban tükrözze a látható oldal felépítését.

Ahogyan az a példa képen látható, egy hosszú, szaggatott vonallal, előtte-utána 2 sor távolságot kihagyva, jól elkülönítem az egyes szekciókat, melyeken belül nevekkel külön választom a benne lévő részeket. A legáltalánosabb részeket pl. mint a body vagy a, a:hover-t veszem először.

Az /* általános */ rész után jön, általában csak a legfőbb diveket tartalmazó rész. A (html-nél lévő elhelyezés szerint) bennük lévő, például a #jobboldali_oszlop-ban lévő szöveg és mindenféle elem formázását meghatározó elemeket nem ide, hanem majd lejeb, külön szekcióba veszem a sorrendiségnek megfelelően. Azért, hogy az oldal teljes gerincét megadó főbb diveket egyben lássam.

A divek között 1 sort hagyok itt ki, kivéve a szorosan összefüggő elemeknél pl. a, a:hover, de akkor is, amikor csak 2 div van egymás után és a második benne van az elsőben pl. a képen a #kozepso_oszlop_kontener és #kozepso_oszlop.

Ha kettőnél több sornyi, erősen összefüggő fő divek vannak egymás után, akkor itt is szoktam jelezni jobbra tabolással, hogy hogyan vannak a html-nél ezek egymásba téve. A példa képen ez a /* fejléc */ résznél látható.

A nem igazán értelmezhető div név mellé, a css fájlban szintén megjegyzések fűzése, hogy később ne kelljen keresgélni, pl. f_fd { } /* fejlécben a felső díszítés */

Sokan külön sorokra veszik azt az átlag 4-5 parancsot az elemeknél. Én egy sorba írom őket. Szerintem így jobb és nem kell kilométereket fel-le görgetni. Én a {} belül is követek egy fajta sorrendiséget az átláthatóság kedvéért. A logikája, hogy az elhelyezkedést legjobban befolyásoló parancsok előre, ezután a méretek, egyéb formázások, végül pedig a színek. És ezeken belül is a fentről-le, balról-jobbra sorrendiség.

[position]
[float]
[margin, padding]
[left, right, top, bottom]
[width, height]
[border]
[background-image, background-repeat, background-color]
[line-height, font-family, font-size, font-weight, color]
[text-decoration, outline, display]