Hướng dẫn xem lại mã cho CSS, JS và HTML


9

Tôi đã được yêu cầu tạo hướng dẫn để xem xét CSS, JS và HTML. Tôi biết có các hướng dẫn mã hóa cho JS nhưng tôi không biết gì về HTML và CSS. Để xem lại JS, tôi chắc chắn sẽ làm theo các hướng dẫn đó và đề cập đến chúng. Nhưng còn CSS và HTML thì sao? Ngoài các lỗi logic và các vấn đề thụt lề, còn có điều gì cụ thể tôi cần kiểm tra khi xem lại đánh dấu và hoặc CSS không?


1
hôm nay chỉ là trên HN, có thể là một nơi tốt để bắt đầu. taitems.github.com/Front-End-Development- Nguyên tắc
agradl

Câu trả lời:


5

Một số điều cần tìm:

  • Là thông tin có cấu trúc được xác định bằng cách sử dụng các thẻ HTML thích hợp? H1- H6cho các tiêu đề, UL/ OLLIcho danh sách, vv?
  • Đang không có thẻ di sản HTML ( <b>, <i>, <center>, <font>) được sử dụng?
  • Trang web có sử dụng số lượng đánh dấu ít nhất có thể không?
  • Là thông tin phong cách bên ngoài vào các tệp CSS?
  • Là tất cả Javascript bên ngoài? bao gồm xử lý sự kiện?
  • Các tên lớp CSS có đề cập đến hàm trong trang ( img-caption) chứ không phải form ( bold-red) hoặc content ( pink-elephant) không?
  • Là hình ảnh ở định dạng thích hợp (PNG hoặc JPEG, tùy thuộc vào loại)?
  • Các phiên bản thu nhỏ của thư viện Javascript đã được sử dụng chưa?
  • Tùy chọn, có phải tất cả các tệp Javascript và CSS được phát triển cục bộ đã được thu nhỏ?
  • HTML / CSS có xác nhận không?
  • YSlow (hoặc tương tự) đã được sử dụng để kiểm tra / tối ưu hóa hiệu suất chưa?
  • (chủ yếu) [SEO] Trang web có thể truy cập bằng Javascript bị tắt không?
  • [SEO] Là nội dung phù hợp nhất được tìm thấy ở đầu HTML?

Tôi vừa tìm thấy cuốn sách của Steve Saunders trên các trang web nhanh hơn. Nó khá hữu ích và một số điểm được đề cập bởi bạn là tốt.
Kumar

0

Một trong những yếu tố quan trọng của một phong cách tốt trong HTML là tăng cường tiến bộ . Điều này có nghĩa là bố cục HTML sẽ hiển thị tốt ngay cả khi không có CSS ​​hoặc JavaScript. Sau đó, khi JS / CSS được xử lý, nó sẽ trông tốt hơn (ví dụ: <select>thả xuống HTML kiểu cũ sẽ trở thành hoạt hình).

Điều này cũng phải làm với đánh dấu không xâm nhập. Thay vì <font style="color:red;font-size:16pt">Hello</font>một người sẽ sử dụng <div class="red-colored-big-fond">Hello</div>.

Tương tự với JavaScript. Thay vì <button onclick="javascript:alert('a');">Clickme</button>một người sẽ chỉ định một lớp nút / ID và nhắm mục tiêu nó từ JavaScript. Nó cũng làm cho mã đánh dấu của bạn dễ dàng hơn để duy trì.


0

Xác nhận rằng số lượng đánh dấu ít nhất được sử dụng để hoàn thành nhiệm vụ. Đảm bảo đánh dấu cũng có ngữ nghĩa, không sử dụng khi thẻ thực hiện cùng một điều chính xác và cung cấp thêm thông tin. Xác thực rằng các khoảng không được tạo thành các phần tử khối và ngược lại.

Ngoài ra, alex mang đến một điểm tuyệt vời theo cách vòng vo. Hãy chắc chắn rằng không ai sử dụng các tên lớp như "phông chữ lớn màu đỏ", bởi vì khoảng 20 giây sau khi nó được triển khai thực sự, ai đó sẽ thay đổi nó thành một phông chữ nhỏ màu xanh. Tôi thực sự đã thấy CSS này:

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

Tất cả mọi thứ trong đánh dấu của bạn nên được mô tả trang là gì, không phải là nó trông như thế nào. Tôi chắc chắn đồng ý về việc tăng cường tiến bộ, nhưng một lần nữa theo cách vòng vo. Trang này không có yêu cầu để tìm bất cứ nơi nào gần giống với CSS như không có nó. Đừng cố làm cho chúng trông giống nhau, bởi vì bạn sẽ trở lại vùng đất bàn và spacer.gif.


0

Theo như HTML, tôi luôn tạo ra một điểm để có thứ bậc và thụt lề trong các tệp của mình. Ví dụ: nếu tôi có một loạt các div:

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

Tôi cho rằng điều đó khá rõ ràng đối với hầu hết những người tạo bố cục và mẫu, nhưng thường thì tôi không thấy HTML bị cắt xén không có cấu trúc phân cấp cấu trúc nào, gây khó đọc cho người khác. Tôi đoán xuất phát từ một nền tảng CS hơn, đây là một cái gì đó trong tâm trí tôi. CSS cũng vậy. Giả sử bạn đang tạo kiểu cho một div:

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

Việc thụt lề giúp đọc nhanh dễ dàng hơn rất nhiều khi bạn đã quen với một ngôn ngữ khác được trộn lẫn như PHP / Ruby / Sao cũng được. Một lần nữa, nó phụ thuộc vào cách bạn làm việc tốt nhất, nhưng khi người khác đọc HTML của tôi, tôi muốn làm cho nó thực sự có tổ chức :).

Ngoài ra, như đã nói ở trên, luôn luôn là một ý tưởng tuyệt vời để đặt tên các lớp CSS và id có liên quan đến bố cục của bạn, đặc biệt là khi nó có nhiều lông (giống như đặt tên biến và phương thức trong các ngôn ngữ khác). Một cái gì đó khác để đề phòng là "đoán và kiểm tra" đáng sợ về lề, phần đệm và các vấn đề căn chỉnh khác. Một cái gì đó tôi thường cố gắng tránh là đặt số âm vào lề và phần đệm của mình. Nó có thể gây nhầm lẫn nếu bạn không tự tạo bố cục và nếu bạn muốn quay lại sau và sửa đổi nó, bạn có thể phải đại tu nó. Theo ý kiến ​​của tôi, không nên thử bất cứ thứ gì hokey hay "kydgy" trong CSS, ngay cả khi nó trông đẹp mắt; thường là một cách tốt hơn để làm điều đó, ngay cả khi bạn phải cơ cấu lại CSS của mình!


0

Đối với Javascript, tôi luôn muốn nó xác nhận hợp lệ với JSLint, tôi có thể nghĩ ra rất nhiều lỗi mà JSLint mắc phải mà không sử dụng nó chỉ là điên rồ.


0

Tôi đã xem qua tài liệu tiêu chuẩn này mà tôi thích. Tôi cũng sẽ lặp lại những gì đã nói về tăng cường tiến bộ. Nói chung, nếu người khác viết HTML / CSS, bạn sẽ có thể xem xét nó sau khi xuống dòng và ngạc nhiên khi thấy đánh dấu không tệ và có thể thực hiện các chỉnh sửa kiểu đơn giản một cách dễ dàng và hiệu quả.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.