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


9

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?


1
to było właśnie na HN dzisiaj, może być dobrym miejscem do rozpoczęcia. taitems.github.com/Front-End-Development-Guidelines
agradl

Odpowiedzi:


5

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?

Właśnie znalazłem książkę Steve'a Saundersa na szybszych stronach internetowych. Jest to dość pomocne, a niektóre wymienione przez ciebie punkty są dobre.
Kumar

0

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.


0

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.


0

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!


0

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.


0

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.