Wskazówki do przeglądu kodu dla CSS, JS i HTML

Poproszono mnie o stworzenie wytycznych do recenzji CSS, JS i HTML. Wiem, że istnieją wytyczne dotyczące kodowania dla JS, ale nie wiem nic o HTML i CSS. Aby przejrzeć JS, z pewnością zastosuję się do tych wytycznych i wspomnę o nich. Ale co z CSS i HTML? Czy oprócz błędów logicznych i problemów z wcięciami muszę sprawdzić, czy sprawdzam znaczniki i / lub CSS?

Niektóre rzeczy do poszukiwania:

• Czy informacje strukturalne są identyfikowane za pomocą odpowiednich tagów HTML? H1- H6dla pozycji, UL/ OLi LIdla list itp.?
• Są żadne znaczniki HTML Legacy ( <b>, <i>, <center>, <font>) używane?
• Czy strona używa najmniejszej możliwej ilości znaczników?
• Czy informacje o stylu są uzewnętrzniane w plikach CSS?
• Czy wszystkie JavaScript jest uzewnętrznione? w tym obsługi zdarzeń?
• Czy nazwy klas CSS odnoszą się do funkcji w page ( img-caption), a nie do form ( bold-red) lub content ( pink-elephant)?
• Czy obrazy są w odpowiednim formacie (PNG lub JPEG, w zależności od typu)?
• Czy użyto zminimalizowanych wersji bibliotek JavaScript?
• Opcjonalnie, czy wszystkie lokalnie opracowane pliki Javascript i CSS zostały zminimalizowane?
• Czy HTML / CSS sprawdza poprawność?
• Czy YSlow (lub podobny) został użyty do sprawdzenia / optymalizacji wydajności?
• (głównie) [SEO] Czy strona jest dostępna z wyłączonym Javascriptem?
• [SEO] Czy najbardziej odpowiednia treść znajduje się u góry HTML?

Jednym z ważnych elementów dobrego stylu w HTML jest stopniowe ulepszanie . Oznacza to, że układ HTML będzie dobrze renderowany nawet bez CSS lub JavaScript. Następnie, po przetworzeniu JS / CSS, będzie wyglądać lepiej (np. Menu <select>rozwijane HTML w starym stylu zostanie animowane).

Ma to również związek z nieinwazyjnymi znacznikami. Zamiast <font style="color:red;font-size:16pt">Hello</font>jednego użyłby <div class="red-colored-big-fond">Hello</div>.

To samo z JavaScript. Zamiast <button onclick="javascript:alert('a');">Clickme</button>jednego określiłby klasę przycisku / identyfikator i skierowałby ją z JavaScript. Ułatwia także obsługę kodu znaczników.

Sprawdź, czy do wykonania zadania użyto najmniejszej ilości znaczników. Upewnij się, że znaczniki są również semantyczne, nie używaj, gdy tag robi dokładnie to samo i podaje więcej informacji. Sprawdź, czy rozpiętości nie są tworzone jako elementy blokowe i odwrotnie.

Dodatkowo, Alex porusza świetny punkt na rondzie. Upewnij się, że nikt nie używa nazw klas, takich jak „czerwono-duża-duża czcionka”, ponieważ około 20 sekund po wdrożeniu dla prawdziwego ktoś zmieni ją na małą niebieską czcionkę. Rzeczywiście widziałem ten CSS:

.arial12pt { font-family: Verdana; font-size: 8pt; }

Wszystkie elementy znaczników powinny opisywać, czym jest strona, a nie jak wygląda. Zdecydowanie zgadzam się co do stopniowego ulepszania, ale znowu w sposób okrężny. Strona nie ma wymagań, aby wyglądać wszędzie tak samo z CSS jak bez niego. Nie staraj się, aby wyglądały tak samo, ponieważ wrócisz do table-land i spacer.gif.

Jeśli chodzi o HTML, zawsze staram się mieć hierarchie i wcięcia w moich plikach. Na przykład, jeśli mam kilka div:

<div id="content">
   <div id="post">
     <div class="title">
       Blah Blah Title
     </div>
   </div>
</div>

Sądzę, że jest to dość oczywiste dla większości tworzących układy i szablony, ale najczęściej widzę zniekształcony HTML, który nie ma żadnej strukturalnej hierarchii, co utrudnia czytanie innej osobie. Wydaje mi się, że pochodzę z CS-a, to coś, co utkwiło mi w pamięci. To samo dotyczy CSS. Powiedzmy, że projektujesz div:

#whatever{
    background-image: url('blah.gif');
    color: #FFF000;
}

Wcięcia znacznie ułatwiają szybkie czytanie, gdy jesteś przyzwyczajony do innego języka, w którym mieszane są np. PHP / Ruby / Cokolwiek. Znowu zależy to od tego, jak pracujesz najlepiej, ale kiedy inni czytają mój HTML, lubię go porządkować :).

Ponadto, jak wspomniano powyżej, zawsze dobrym pomysłem jest nazywanie klas CSS i identyfikowanie odpowiednich nazw do swojego układu, szczególnie gdy robi się owłosiony (podobnie jak nazywanie zmiennych i metod w innych językach). Inną rzeczą, na którą należy zwrócić uwagę, jest przerażające „odgadywanie i sprawdzanie” marginesów, wypełnień i innych problemów z wyrównaniem. Często staram się unikać liczb ujemnych na marginesach i wypełnieniach. Może to być mylące, jeśli sam nie stworzyłeś układu i jeśli chcesz wrócić do niego później i zmodyfikować go, być może będziesz musiał go zmienić. Moim zdaniem zawsze dobrym pomysłem jest, aby nie próbować niczego hokey lub „kludgy” w CSS, nawet jeśli ładnie to wygląda; zazwyczaj jest lepszy sposób, aby to zrobić, nawet jeśli musisz zrestrukturyzować swój CSS!

W przypadku Javascript zawsze chciałbym, żeby sprawdził się w JSLint, mogę wymyślić tak wiele błędów, że JSLint wyłapuje, że nie używanie go jest po prostu szalone.

Natrafiłem na ten dokument standardów, który raczej mi się podobał. Powtórzę również to, co powiedziano o stopniowym ulepszaniu. Ogólnie rzecz biorąc, jeśli ktoś inny pisze HTML / CSS, powinieneś być w stanie przyjrzeć się temu później i być mile zaskoczonym, jak niezły jest znacznik, i powinien być w stanie łatwo i wydajnie wprowadzać poprawki w stylu.