Top 10 Web Development Best Practices

Wyjaśnij, który div zamykasz

W większości przypadków, gdy przeglądam źródło strony internetowej, widzę na samym dole strony prawie niekończącą się listę zamykających się znaczników </div>. W rzeczywistości, wielu początkujących myśli, że po prostu muszą używać divów zamiast tabel, aby produkować kod wysokiej jakości. Divy są czystsze niż tabele, ale bez odpowiedniej organizacji kodu, może on być tak samo (a nawet czasami bardziej) niechlujny jak kod oparty na tabelach.

Używanie wcięć to dobry początek. Ale wskazówka, która z pewnością pozwoli ci zaoszczędzić dużo czasu, to komentowanie każdego znacznika div, który zamykasz, jak pokazano w poniższym przykładzie:

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

Użyj resetu CSS

Jeśli nie jesteś początkujący lub jeśli byłeś na wakacjach na bezludnej wyspie przez ostatnie 6 lat, możesz już wiedzieć jak użyteczny jest reset CSS. Ponieważ domyślnie przeglądarki nie stosują tej samej domyślnej stylizacji do elementów HTML, reset CSS zapewni, że wszystkie elementy nie mają określonego stylu, więc możesz zdefiniować swój własny bez ryzyka wystąpienia wielu problemów z renderowaniem między przeglądarkami.

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

Źródło: https://meyerweb.com/eric/tools/css/reset/index.html

Nie używaj @import

Pliki CSS mogą być dołączane przy użyciu dyrektywy @import. Może to być przydatne, gdy na przykład chcesz dołączyć arkusz stylów do innego. Inną powszechną praktyką jest dołączanie pliku CSS do dokumentów html za pomocą następujących metod:

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

Choć działa, dyrektywa @import jest znacznie wolniejsza niż inne sposoby dołączania arkuszy stylów do dokumentu html:

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

Nie będzie to miało znaczenia na stronach o małym natężeniu ruchu, ale jeśli masz szansę być właścicielem popularnej strony, nie marnuj czasu odwiedzających, używając @import.
Źródło: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

„Smush” your images

Będąc deweloperem, zawsze stwierdzałem, że optymalizacja moich obrazów dla sieci nie była łatwa. Próbowałem starego dobrego polecenia Photoshopa „Zapisz dla sieci”, ale przez większość czasu, kończyłem z obrazami, które były albo zbyt duże, albo bez wystarczającej jakości.
W rezultacie, miałem zły nawyk używania niezoptymalizowanych obrazów na moich stronach internetowych. To nie jest problem, gdy nie musisz dbać o przepustowość witryny, ale po moim ostatnim przełączniku na moim wirtualnym serwerze prywatnym, musiałem być ostrożny z rozmiarami obrazów.

W tym czasie znalazłem bardzo fajne narzędzie o nazwie Smush It: Wprowadzasz swój niezoptymalizowany adres url obrazu, a Smush It stworzy dla ciebie idealnie zoptymalizowany obraz. Możesz zaoszczędzić do 70% rozmiaru pliku, zachowując przy tym oryginalną jakość. Jako przykład, wszystkie obrazy z mojej listy edytorów kodu online zostały „zmiażdżone”.

Nie mieszaj CSS z HTML

Jako język znaczników, właściwym zastosowaniem HTML jest organizowanie dokumentów poprzez definiowanie nagłówka, stopki, list, cytatów blokowych, itp. Jakiś czas temu, programiści front-end często używali obecnie przestarzałych atrybutów HTML do stylizacji konkretnego elementu.
Obecnie atrybut style pozwala programistom na wstawianie CSS bezpośrednio do dokumentu html. Jest to bardzo przydatne do testowania lub gdy się spieszysz. Ale atrybut style jest złą praktyką, która jest całkowicie sprzeczna z filozofią CSS.

Następujący przykład ilustruje, jak brudna i trudna do odczytania może stać się prosta linia kodu, z atrybutem style:

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

Nie mieszaj Javascript z HTML

Tak jak mieszanie kodu html z css jest złą praktyką, nie powinieneś używać Javascript w swoich dokumentach html. Poniższa zła praktyka ilustruje zdarzenie onclick:

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

Ten sam rezultat można osiągnąć używając niezakłóconego Javascript. W tym przykładzie, używam popularnego frameworka jQuery:

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

To może wydawać się nieco trudniejsze na początku, szczególnie dla początkujących; ale zdecydowanie nie jest, i utrzyma twój dokument html w czystości.

Wiesz to, IE jest do bani, a niektórzy klienci są jeszcze bardziej do bani, wymagając od ciebie tworzenia stron internetowych, które są kompatybilne z tą przestarzałą przeglądarką. Aby targetować konkretne wersje IE, możesz użyć dobrze znanych hacków IE, jak pokazano poniżej:

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

Te hacki są czasami bardzo przydatne, ale nie są najlepszym sposobem na targetowanie konkretnej wersji IE, i spowodują, że walidacja CSS nie powiedzie się.

Następnie, powinieneś użyć komentarza warunkowego pokazanego poniżej, aby kierować się na IE6.

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

Umieść plik Javascript na dole

Popularną praktyką późnych lat 90-tych/wczesnych 2000 było umieszczanie plików Javascript wewnątrz znaczników <head> i </head>. Problem polega na tym, że twoje pliki javascript zostaną załadowane jako pierwsze, a w konsekwencji twoja treść zostanie załadowana później.

Umieszczając pliki Javascript na dole twoich dokumentów, zapewnisz, że pliki JS zostaną załadowane dopiero wtedy, gdy treść zostanie poprawnie wyświetlona.

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

Używaj HTML semantycznie

HTML nie jest językiem programowania. Jest to język znaczników, używany do tworzenia uporządkowanych dokumentów poprzez oznaczanie semantyki strukturalnej dla tekstu, takiego jak nagłówki, akapity, listy i inne.
Jeśli zacząłeś tworzyć strony internetowe w starych dobrych latach 90-tych lub na początku wieku, wiesz jak brudny był wtedy znacznik. Ale szczęśliwie, to ewoluowało.
Wśród innych rzeczy, ważne jest, aby używać elementu html semantycznie. Jako przykład, menu nawigacyjne powinno być zawsze nieuporządkowaną listą:

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

Testuj WHILE you build to avoid cross-browser issues

Jednym z największych błędów jaki kiedykolwiek popełniłem przy tworzeniu html, CSS, i javascript, było nie testowanie moich stron na wielu przeglądarkach podczas ich pisania. Zamiast tego, pisałem cały mój kod i po prostu przeglądałem go w Firefoxie, aby zobaczyć jak jest renderowany.
W teorii, to powinno być dobre. Ale jak wiesz, problemy z przeglądarką są poważnym problemem dla programistów front-end, szczególnie z powodu IE. Jeśli przetestujesz swoje dokumenty na Firefox/IE/Chrome podczas pisania go, problemy z renderowaniem w różnych przeglądarkach będą znacznie łatwiejsze do naprawienia. Straciłem wiele godzin nie robiąc tego, więc mam nadzieję, że ta ostatnia wskazówka pomoże Ci zaoszczędzić Twój cenny czas. Szczęśliwego kodowania 😉

.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.