Top 10 legjobb webfejlesztési gyakorlat

Magyarázza meg, melyik div-et zárja le

A legtöbbször, amikor egy weboldal forrását nézem, az oldal legalsó részén a záró </div> címkék szinte végtelen listáját látom. Valójában sok kezdő azt hiszi, hogy a minőségi kód előállításához csak div-eket kell használniuk a táblázatok helyett. A div-ek tisztábbak, mint a táblázatok, de megfelelő kódszervezés nélkül ugyanolyan (sőt néha még rendetlenebb) lehet, mint a táblázat alapú kód.

A behúzás használata jó kezdet. De egy tipp, amivel biztosan sok időt spórolhatsz, hogy minden div taget, amit bezársz, kommentálj, ahogy az alábbi példában látható:

<div> <div class="first left"> ... </div><!-- #sub.first.left --></div><!-- #header -->

CSS reset használata

Hacsak nem vagy kezdő, vagy ha az elmúlt 6 évben egy lakatlan szigeten nyaraltál, talán már tudod, milyen hasznos a CSS reset. Mivel alapértelmezés szerint a böngészők nem ugyanazt az alapértelmezett stilizálást alkalmazzák a HTML elemekre, a CSS visszaállítása biztosítja, hogy minden elemnek ne legyen külön stílusa, így sok böngészők közötti megjelenítési probléma kockázata nélkül határozhatod meg a sajátodat.

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}/* remember to define focus styles! */:focus {outline: 0;}/* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;}/* tables still need 'cellspacing="0"' in the markup */table {border-collapse: collapse;border-spacing: 0;}

Forrás: https://meyerweb.com/eric/tools/css/reset/index.html

Ne használd a @importot

A CSS-fájlok a @import direktíva használatával vonhatók be. Ez akkor lehet hasznos, ha például egy stílustáblát be akarunk vonni egy másikba. Egy másik elterjedt gyakorlat, hogy a CSS-fájlt a html-dokumentumokba a következőkkel illesztik be:

<style type="text/css> @import url('a.css'); @import url('b.css');</style>

A @import direktíva ugyan működik, de sokkal lassabb, mint a stíluslapok html-dokumentumba való beillesztésének másik módja:

<link rel='stylesheet' type='text/css' href='a.css'><link rel='stylesheet' type='text/css' href='proxy.css'>

A kis forgalmú webhelyeken ez nem jelent különbséget, de ha van esélye egy népszerű webhely tulajdonosa lenni, ne vesztegesse a látogatók idejét a @import használatával.
Forrás: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

“Smush” your images

Fejlesztőként mindig is úgy tapasztaltam, hogy a képeim webes optimalizálása nem egyszerű. Próbálkoztam a jó öreg “Mentés webre” Photoshop-paranccsal, de legtöbbször vagy túl nagy, vagy nem megfelelő minőségű képeket kaptam.
Az eredmény az lett, hogy rossz szokásom volt optimalizálatlan képeket használni a webhelyeimen. Ez nem jelent problémát, amikor nem kell törődnöd a webhelyed sávszélességével, de miután nemrég átálltam a virtuális privát szerveremre, óvatosnak kellett lennem a képméretekkel.

Akkor találtam egy nagyon klassz eszközt, a Smush It-et: Megadod az optimalizálatlan kép url-jét, és a Smush It létrehoz neked egy tökéletesen optimalizált képet. Akár 70%-ot is megtakaríthatsz a fájlméretből, miközben megtartod az eredeti minőséget. Példaként az online kódszerkesztők listáján szereplő összes képet “smusholtam”.

Ne keverd a CSS-t a HTML-sel

A HTML mint jelölőnyelv helyes használata a dokumentumok rendszerezésére szolgál fejléc, lábléc, listák, blokkidézetek stb. meghatározásával. Néhány évvel ezelőtt a front-end webfejlesztők gyakran használták a ma már elavult HTML-attribútumokat egy adott elem stílusához.
Most a style attribútum lehetővé teszi a fejlesztők számára, hogy CSS-t közvetlenül a html-dokumentumba illesszenek be. Ez nagyon hasznos teszteléskor, vagy amikor sietünk. A style attribútum azonban rossz gyakorlat, amely teljesen ellentétes a CSS filozófiájával.

A következő példa jól szemlélteti, hogy a style attribútummal mennyire piszkos és nehezen olvashatóvá válhat egy egyszerű kódsor:

<a href="https://catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">Cats Who Code</a>

Ne keverd a Javascriptet a HTML-szel

Ahogyan a html-kódodat css-szel keverni rossz gyakorlat, úgy a html-dokumentumokban sem szabad Javascriptet használni. A következő rossz gyakorlat egy onclick eseményt illusztrál:

<a href="https://catswhocode.com" onclick="alert('I love this site!');">Cats Who Code</a>

Az ugyanezt az eredményt el lehet érni akadálytalan Javascript használatával is. Ebben a példában a népszerű jQuery keretrendszert használom:

$(document).ready(function() { $('#cwc').click(function() { alert('I love this website'); });});

Ez elsőre kicsit nehezebbnek tűnhet, különösen kezdők számára; de határozottan nem az, és tisztán tartja a html-dokumentumot.

Tudod, az IE szívás, és néhány ügyfél még jobban szívja azzal, hogy olyan weboldalakat kell készítened, amelyek kompatibilisek ezzel az elavult böngészővel. Az IE bizonyos verzióinak megcélzásához használhatod a jól ismert IE hackeket, ahogy az alább látható:

height: 200px; /* normal browsers */_height: 300px; /* IE6 */.height: 250px; /* IE7 */*height: 350px; /* All IEs */

Ezek a hackek néha rendkívül hasznosak, de nem a legjobb módja annak, hogy az IE egy bizonyos verzióját megcélozd, és ez a CSS-érvényesítésed sikertelenségét fogja okozni.

Ehelyett az alább látható feltételes megjegyzést kell használnia az IE6 megcélzásához.

<link href="style.css" rel="stylesheet" type="text/css" /><!--> <link href="ie.css" rel="stylesheet" type="text/css" /><!-->

A Javascript fájl elhelyezése az alján

A 90-es évek végén/ 2000-es évek elején népszerű gyakorlat volt a Javascript fájlok elhelyezése a <head> és </head> címkéken belül. A probléma az, hogy a Javascript-fájlok először töltődnek be, és következésképpen a tartalom csak utána töltődik be.

Azzal, hogy a Javascript-fájlokat a dokumentumok aljára helyezi, biztosítja, hogy a JS-fájlok csak akkor töltődjenek be, amikor a tartalom már megfelelően megjelenik.

 ... <script type='text/javascript' src='jquery.js?ver=1.3.2'></script> </body></html>

A HTML szemantikus használata

A HTML nem programozási nyelv. Ez egy jelölőnyelv, amelyet strukturált dokumentumok létrehozására használnak a szöveg szerkezeti szemantikájának jelölésével, mint például a címsorok, bekezdések, listák és így tovább.
Ha a jó öreg 90-es években vagy a század elején kezdtél el weboldalakat készíteni, akkor tudod, milyen piszkos volt akkoriban a jelölés. De szerencsére fejlődött.
Egyebek mellett fontos, hogy a html elemeket szemantikusan használjuk. Például egy navigációs menü mindig rendezetlen lista legyen:

<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li></ul>

Tesztelj, amíg építesz, hogy elkerüld a böngészők közötti problémákat

Az egyik legnagyobb hiba, amit html, CSS és javascript fejlesztésekor elkövettem, hogy nem teszteltem az oldalaimat több böngészőn, miközben írtam őket. Ehelyett az összes kódomat megírtam, és csak a Firefoxban néztem meg, hogy lássam, hogyan jelenik meg.
Elméletileg ennek jónak kellene lennie. De mint tudjuk, a böngészők közötti problémák komoly problémát jelentenek a front-end fejlesztők számára, különösen az IE miatt. Ha írás közben Firefox/IE/Chrome-on teszteled a dokumentumaidat, a böngészők közötti renderelési problémákat sokkal könnyebb lesz javítani. Órákat vesztegettem el, amikor nem tettem meg, ezért remélem, hogy ez az utolsó tipp segít megspórolni a drága időt. Boldog kódolást 😉

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.