8 cách thực hành tốt nhất để viết mã HTML sạch

Bạn đã bao giờ nhìn vào HTML của mình và tự hỏi

Tôi có viết mã tốt không?!

Trông nó có đủ chuyên nghiệp không? Tôi đang làm việc phải không? Đây có phải là cách mã HTML sạch sẽ trông như thế nào?

Có những câu hỏi đó là bình thường và tốt, đặc biệt nếu bạn không muốn viết mã spaghetti lộn xộn, lộn xộn, cẩu thả, trông giống như:

Viết mã sạch sẽ là một trong những mối quan tâm lớn nhất của bạn bởi vì hầu hết các trang web được trình bày qua HTML. Bạn không muốn làm rối tung nền tảng của trang web của bạn. Nó chỉ sai và lúng túng.

Tại đây, bạn sẽ tìm thấy 8 thực tiễn tuyệt vời để quên đi những nghi ngờ đó và viết HTML chính xác sẽ gây ấn tượng với tất cả những ai đọc nó.

1. Cho một f ** k

Nghiêm túc. Điều quan trọng nhất bạn cần để viết mã tốt là mong muốn của bạn để làm mọi thứ đúng. Viết mã HTML sạch sẽ dễ dàng, nhưng bạn cần quan tâm và chú ý nhiều.

Mã Clean Clean là một mã được viết bởi một người quan tâm

Mã của bạn phản ánh loại nhà phát triển bạn đang có. Bạn có thể biết ai đó có đam mê về mã hóa hay không, nếu anh ta không đưa ra một f ** k chỉ bằng cách đọc một vài dòng mã HTML của anh ta. Nó không phải là một sự trùng hợp ngẫu nhiên mà những người lười biếng không chuyên nghiệp là những người viết mã xấu và không có tổ chức.

2. thụt lề

Mã thụt lề dễ đọc hơn, dễ hiểu hơn, dễ sửa đổi hơn và dễ bảo trì hơn. Chỉ cần nhìn vào mức độ khó khăn để hiểu mối quan hệ cha-con giữa các yếu tố khi mã không được thụt lề chính xác:

Mã HTML xấu:
  
 
 
Mã HTML tốt hơn:
  
    
      

Có bao nhiêu không gian bạn nên sử dụng để thụt lề? Nhiều người nói 4 dấu cách, nhiều người khác nói 2 và hầu như mọi người đều ghét các tab.

Lời khuyên của tôi? Hãy nghĩ rằng, nó không thực sự quan trọng để sử dụng một giá trị không gian cụ thể. Điều thực sự quan trọng là LỚN

3. Chỉ cần nhất quán

Viết mã HTML sạch sẽ không phải là luôn luôn chọn cách thực hành tốt và tránh những điều xấu. Nhiều lần bạn có thể sử dụng các cách tiếp cận khác nhau để viết cùng một dòng mã.

Ví dụ:

  • Bạn có thể sử dụng dấu gạch ngang hoặc dấu gạch dưới cho id và lớp
  • Bạn có thể sử dụng trích dẫn đơn hoặc đối số trích dẫn kép
  • Bạn có thể thụt lề với 2 hoặc 4 dấu cách

Chỉ cần kiên định. Khi bạn tìm thấy một thực hành cụ thể mà bạn thích, hãy bám vào nó và sử dụng nó ở mọi nơi. Sự không nhất quán làm cho mã của bạn vô cùng khó hiểu cho bạn và cho linh hồn nghèo khổ phải đọc nó.

4. Hủy diệt tận tình

Một tên gọi vui nhộn là một tên vui cho một vấn đề phổ biến trong HTML. Chúng tôi thường lạm dụng các div, chủ yếu vì chúng tôi muốn bọc và nhắm mục tiêu tất cả các yếu tố để tạo kiểu trong CSS. Sau đó, chúng tôi cuối cùng có một danh sách các div hoàn toàn không cần thiết:

Mã HTML xấu:
  
Dòng tiêu đề   
Phụ đề   
Nội dung bài đăng   
    
          
  • Yếu tố 1       
  • Yếu tố 2        
Mã HTML tốt hơn:
  

Tiêu đề   

Phụ đề   

Nội dung bài đăng   

        
  • Yếu tố 1     
  • Yếu tố 2   

Giống như các nhà văn chỉnh sửa bản nháp của họ nhiều lần trong quá trình viết, bạn nên liên tục cấu trúc lại hoặc viết lại HTML của mình. Giảm số lượng div và dọn sạch mã của bạn xóa tất cả các yếu tố không cần thiết.

5. Tránh bình luận

HTML không phải là ngôn ngữ lập trình, các bình luận không cần thiết vì đánh dấu HTML rất tự giải thích. Nếu bạn thấy mình nhận xét HTML của mình rất nhiều, bạn nên xem lại tham chiếu các yếu tố HTML.

Nhận xét mã nguồn của Google. Viết lại nó. Juli - Brian W. Kernighan

Mã của bạn đã thắng dễ dàng hơn chỉ vì bạn thêm nhận xét ở mọi nơi. Bạn có thể sử dụng chúng để làm cho mọi thứ rõ ràng hơn một chút (ví dụ: để hiển thị cho bạn cách đóng một div sau nhiều dòng mã). Nhưng don lồng nhận xét những điều rõ ràng hoặc mã được viết xấu.

6. Class =

Class = không có nghĩa là gì?

Đoạn rộng? WordPress? Whopper?! Mã HTML sạch sẽ không giống như một trò chơi đố.

Sử dụng tên có ý nghĩa cho Id và Lớp học của bạn. Chúng nên ngắn gọn, mô tả và chỉ đại diện cho một khái niệm. Nó làm cho HTML của bạn rõ ràng hơn và quá trình tạo kiểu dễ dàng hơn.

Bạn có nghĩ rằng nó sẽ tốt hơn nếu bạn đặt tên cho lớp của bạn

7. Sử dụng khoảng trắng

Nhiều người viết mã đập vào nhau mà không sử dụng khoảng trắng. Kết quả? Nó giống như đọc một cuốn sách không có dấu câu hoặc đoạn văn:

Địa ngục:

Bảng Dữ liệu 1 Dữ liệu 2 Calcutta Cam

Mã tốt hơn:

Bảng


  
     Dữ liệu 1 
     Dữ liệu 2 
  
  
     Calcutta 
     Cam 
  

Sử dụng khoảng trắng: thụt lề, dòng trống, ngắt dòng. Những người khác (bao gồm cả bạn) sẽ có thể đọc mã của bạn trong tương lai mà không phải đau đầu. Nó có thể thu nhỏ các tệp của bạn để làm cho chúng nhỏ hơn SAU KHI bạn đã viết mã HTML có thể đọc được.

8. Sao chép từ tốt nhất

Các nghệ sĩ giỏi nhất trên thế giới đã học nghề của họ bằng cách tái tạo tác phẩm của những người mà họ ngưỡng mộ. Bạn có thể sử dụng cùng một chiến lược để viết mã HTML sạch (đây cũng là một quá trình sáng tạo). Cách dễ nhất để học cách viết mã sạch đẹp rất đơn giản: đọc mã sạch đẹp, sau đó sao chép mã.

Những người không muốn bắt chước bất cứ thứ gì, không sản xuất được gì. Mít - Salvador Dalí

Bạn có thể:

  • Khám phá các dự án nguồn mở. Một trong những lý do chúng tồn tại là, vì vậy tất cả chúng ta có thể học hỏi và cải thiện việc nhìn vào công việc của nhau.
  • Đọc blog và các bài viết dạy cho bạn các thực hành mã hóa tốt nhất.
  • Tham gia các khóa học dành cho nhà phát triển của Udemy. Chọn những người có đánh giá tuyệt vời.

Bạn có thể thấy rằng, đó không phải là một cách đúng đắn để thực hiện mọi thứ, nhưng bạn cũng sẽ phát hiện ra rằng có một sự khác biệt lớn giữa mã HTML sạch và lộn xộn.

Và bạn không muốn mã của bạn trông giống như một mớ hỗn độn, phải không? ;)

*** Bạn có thích nó không? Vui lòng cho tôi một vài tiếng vỗ tay để những người khác có thể khám phá bài viết này ***