Top 10 Web Development Best Practices

Vysvětlete, který div uzavíráte

Většinou při prohlížení zdrojového kódu webu vidím na samém konci stránky téměř nekonečný seznam uzavíracích značek </div>. Mnoho začátečníků si totiž myslí, že k vytvoření kvalitního kódu jim stačí používat divy místo tabulek. Divy jsou přehlednější než tabulky, ale bez správné organizace kódu mohou být stejně (nebo někdy i více) nepřehledné jako kód založený na tabulkách.

Používání odsazení je dobrý začátek. Ale tip, který vám rozhodně může ušetřit spoustu času, je okomentovat každou uzavíranou značku div, jak ukazuje následující příklad:

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

Používejte CSS reset

Pokud nejste začátečník nebo pokud jste byli posledních 6 let na dovolené na pustém ostrově, možná už víte, jak užitečný je CSS reset. Protože ve výchozím nastavení prohlížeče nepoužívají na prvky HTML stejný výchozí styl, reset CSS zajistí, že všechny prvky nebudou mít žádný konkrétní styl, takže si můžete definovat svůj vlastní bez rizika mnoha problémů s vykreslováním napříč prohlížeči.

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;}

Zdroj: https://meyerweb.com/eric/tools/css/reset/index.html

Nepoužívejte @import

Soubory CSS lze zahrnout pomocí směrnice @import. To může být užitečné, když například chcete začlenit soubor stylů do jiného. Další běžnou praxí je zahrnutí souboru CSS do dokumentu html pomocí následujícího postupu:

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

Přestože to funguje, je direktiva @import mnohem pomalejší než jiný způsob zahrnutí souborů stylů do dokumentu html:

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

Na málo navštěvovaných webových stránkách to nebude mít žádný význam, ale pokud máte možnost vlastnit populární web, neztrácejte čas návštěvníků použitím @import.
Zdroj: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

„Rozmačkejte“ své obrázky

Jako vývojář jsem vždy zjistil, že optimalizace obrázků pro web není snadná. Zkoušel jsem starý dobrý příkaz Photoshopu „Uložit pro web“, ale většinou jsem skončil s obrázky, které byly buď příliš velké, nebo bez dostatečné kvality.
V důsledku toho jsem měl zlozvyk používat na svých webových stránkách neoptimalizované obrázky. To není problém, když se nemusíte starat o šířku pásma svých stránek, ale po nedávném přechodu na můj virtuální privátní server jsem si musel dávat pozor na velikost obrázků.

V této době jsem objevil velmi skvělý nástroj s názvem Smush It: Zadáte url adresu neoptimalizovaného obrázku a Smush It pro vás vytvoří dokonale optimalizovaný obrázek. Můžete ušetřit až 70 % velikosti souboru při zachování původní kvality. Jako příklad mohu uvést všechny obrázky z mého seznamu online editorů kódu, které byly „rozmazány“.

Nemíchejte CSS s HTML

Jako značkovací jazyk je správné použití HTML k organizaci dokumentů definováním záhlaví, zápatí, seznamů, blokových citací atd. Před časem front-endoví weboví vývojáři často používali dnes již zastaralé atributy HTML pro stylování konkrétního prvku.
Dnes atribut style umožňuje vývojářům vkládat CSS přímo do html dokumentu. To je velmi užitečné při testování nebo když spěcháte. Atribut style je však špatná praxe, která jde zcela proti filozofii CSS.

Následující příklad ilustruje, jak špinavým a špatně čitelným se může stát jednoduchý řádek kódu s atributem style:

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

Nemíchejte Javascript s HTML

Stejně jako je míchání html kódu s css špatná praxe, neměli byste v html dokumentech používat žádný Javascript. Následující špatný postup ilustruje událost onclick:

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

Stejného výsledku lze dosáhnout pomocí nerušeného Javascriptu. V tomto příkladu používám populární framework jQuery:

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

Může se to zdát na první pohled trochu složitější, zejména pro začátečníky; ale rozhodně to tak není a udrží to váš html dokument čistý.

Znáte to, IE je na nic a někteří klienti jsou na nic ještě víc, protože vyžadují, abyste vytvářeli webové stránky, které jsou kompatibilní s tímto zastaralým prohlížečem. Chcete-li se zaměřit na konkrétní verze IE, můžete použít známé hacky IE, jak je uvedeno níže:

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

Tyto hacky jsou někdy nesmírně užitečné, ale nejsou nejlepším způsobem, jak se zaměřit na konkrétní verzi IE, a způsobí, že vaše validace CSS selže.

Na místo toho byste měli pro cílení na IE6 použít níže uvedený podmíněný komentář.

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

Umístěte soubor Javascriptu na konec stránky

Oblíbenou praxí konce 90. let a začátku roku 2000 bylo umístění souborů Javascriptu do značek <head> a </head>. Problém spočívá v tom, že soubory Javascriptu budou načteny jako první, a následně bude obsah načten až poté.

Umístěním souborů Javascriptu na konec dokumentů zajistíte, že soubory JS budou načteny až po řádném zobrazení obsahu.

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

Používejte HTML sémanticky

HTML není programovací jazyk. Je to značkovací jazyk, který se používá k vytváření strukturovaných dokumentů pomocí označení strukturální sémantiky textu, jako jsou nadpisy, odstavce, seznamy a další.
Pokud jste začali vytvářet webové stránky ve starých dobrých 90. letech nebo na začátku století, víte, jak špinavé bylo tehdejší značkování. Ale naštěstí se vyvinulo.
Mimo jiné je důležité používat prvky html sémanticky. Jako příklad uvedu navigační menu, které by mělo být vždy neuspořádaným seznamem:

<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>

Testujte, KDYŽ tvoříte, abyste se vyhnuli problémům napříč prohlížeči

Jednou z největších chyb, které jsem kdy při vývoji html, CSS a javascriptu udělal, bylo, že jsem své stránky během psaní netestoval ve více prohlížečích. Místo toho jsem si zvykl psát veškerý kód a ve Firefoxu si ho jen prohlížet, abych viděl, jak se vykresluje.
Teoreticky by to mělo být dobré. Ale jak víte, problémy s různými prohlížeči jsou pro front-end vývojáře velkým problémem, zejména kvůli IE. Pokud budete své dokumenty při psaní testovat ve Firefoxu/IE/Chrome, bude mnohem snazší problémy s vykreslováním napříč prohlížeči odstranit. Ztratil jsem hodiny tím, že jsem to nedělal, takže doufám, že vám tento poslední tip pomůže ušetřit váš drahocenný čas. Šťastné kódování 😉

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.