01/10/2018, 16:38

Thắc mắc về chuẩn viết HTML/CSS

Em hay làm việc nhóm chung với nhau nhưng mỗi lần gộp file lại thì ôi thôi, mỗi thằng viết một kiểu
Không biết mọi người có chuẩn viết nào về HTML/CSS để tất cả viết chung 1 chuẩn để dễ đọc, dễ bảo trì không ạ

Đặng Trung Nhân viết 18:50 ngày 01/10/2018

Mình thì vầy:
CSS:

  1. body{ thay vì body { trông gọn hơn.
  2. Đừng cứ 1 hàng cách 1 dòng, gây nặng cho file CSS và load chậm hơn.
  3. Tab, đừng có space.
  4. Chép code từ SO hay từ mạng về sẽ mất trật tự về hàng, chịu khó chỉnh là nữa sửa rất dễ.
    HTML:
  5. Cái bự phải nằm thụt ngoài, cái đc bự bao bọc phải thụt vô, cả tag mở và đóng phải thẳng hàng với nhau.
  6. Theo thứ tự nhất định: ví dụ <input type="text" name="name" id="id" placeholder="Nhập vào đây"> rồi các phần sau cũng vậy, đừng loạn cào cào lên như cái id trước, cái name trước.
    Nếu có gì mình bổ sung tiếp.
Nguyen Kien viết 18:46 ngày 01/10/2018

Mình nghĩ cả nhóm nên dùng một editor chẳng hạn như sublime_text sau formatting code dễ lắm

Phan Bá Hải viết 18:52 ngày 01/10/2018

HTML thì chỉ có một chuẩn thôi. Nhưng id, class có chuẩn đàng hoàng để dễ làm việc. Khuyên bạn nên tìm hiểu BEM
https://getbem.com

Aragami1408 viết 18:43 ngày 01/10/2018

HTML:

  • Đặt id class rõ ràng và có sự nhất quán
  • Code phải được tab rõ ràng chứ đừng thẳng tắp 1 dòng
  • dùng div thay thẻ p
  • không được css inline kiểu: <h1 style="blah blah blah"></h1>
  • không dùng thẻ style trong head
  • Set tab indent là 4 thay vì 2

CSS:

*Tránh xuống dòng vô dụng kiểu:

body {
    
    properties1: value1;

    properties2: value2;

    ....................

    ....................
}
  • không duplicate thuộc tính hay selector:
a {
    code;
}

a {
    code;
}

/*sao cái dòng a thứ hai không gộp vào cái nhất đi?!!*/
  • Đừng dùng space vì tốn kích thước file

Ngoài ra thì

gộp file lại thì ôi thôi,

Bạn làm dự án dùng USB à? Đấy là thất bại của lập trình đó! Sao cả team bạn không học sử dụng git và github luôn đi(tiện cả CI/CD nữa)

Trần Hoàn viết 18:41 ngày 01/10/2018

Hoặc là dùng editor của Visual Studio và chọn nút Format Document

null viết 18:48 ngày 01/10/2018

htmllint + stylelint là những gì bạn cần. Chúng cho phép bạn ràng buộc quy tắc bem, cách thụt đầu dòng, xuống dòng, … Nếu cẩn thận bạn có thể quy định đến từng tiểu tiết như cách đặt khoảng trắng, thứ tự xắp xếp thuộc tính.
Chúc may mắn

Bài liên quan
0