Trong bài viết này, Tigran Vardanyan, Kỹ sư phần mềm hành nghề tự do hàng đầu, đề cập đến kiểu dáng mã, các phương pháp thực hành HTML và CSS thiết yếu và tại sao mã sạch vẫn quan trọng

Nội dung chính Show

• Hậu quả của mã lộn xộn và bẩn
• Cơ bản về kiểu dáng mã
• Hãy chú ý đến cấu trúc từ ngày đầu tiên
• Sử dụng trình xác thực để kiểm tra mã của bạn
• Sử dụng văn bản thay thế trên các thẻ

  H1 title

  7 để đảm bảo tính hợp lệ của nguyên tắc mã sạch
• Sử dụng kebab-case (spinal-case)
• Sử dụng những cái tên có ý nghĩa mà bất kỳ ai cũng có thể hiểu được, giữ cho chúng ngắn gọn
• Không viết thuộc tính loại cho biểu định kiểu và tập lệnh trong HTML5
• Sử dụng các lớp cụ thể khi cần thiết
• Thêm một lớp vào phần tử cha nếu bạn muốn tạo một kiểu khác cho cùng một khối
• Giảm đơn vị từ giá trị 0
• Đừng viết
  8 trong CSS nếu bạn có thể thêm thẻ
  9
• Sử dụng bộ chọn A > B
• Cách viết HTML sạch
• Cố gắng có một giao diện người dùng dựa trên đánh dấu nhất có thể
• Tránh sử dụng các hàm bao không cần thiết trong HTML
• Sử dụng các lớp nguyên tử để tạo kiểu
• Sử dụng các yếu tố ngữ nghĩa
• Sử dụng thẻ HTML5
• CSS. Mã sạch và tiền xử lý
• Sử dụng bộ tiền xử lý CSS
• Nhóm bộ chọn của bạn. Sử dụng @extend trong SASS
• Sử dụng đơn vị rem thay vì pixel trong CSS
• Cố gắng tránh cố định chiều cao hoặc chiều rộng trong CSS
• Đảm bảo chỉ sử dụng mục gốc một lần trong SCSS
• Hãy suy nghĩ về những yếu tố nào sẽ bị ảnh hưởng trước khi viết quy tắc CSS
• Cố gắng tìm kiếm các quy tắc và biến CSS hiện có trước khi viết những cái mới
• Sử dụng các quy tắc cụ thể
• Sử dụng các thuộc tính và giá trị tốc ký
• Sử dụng
  Expand details

  All content goes here

  09 thay vì p { font: 400 inherit/1.125 serif; } 00 cho chiều cao của dòng
• Sử dụng các lớp Bootstrap càng nhiều càng tốt
• Tùy chỉnh khuôn khổ của bạn đúng cách
• Không ghi đè chiều rộng p { font: 400 inherit/1.125 serif; } 03
• Sử dụng các lớp Bootstrap 4 và viết ít CSS hơn
• Sử dụng p { font: 400 inherit/1.125 serif; } 07 nếu p { font: 400 inherit/1.125 serif; } 08 và p { font: 400 inherit/1.125 serif; } 09 có cùng giá trị cho X
• Không sử dụng p { font: 400 inherit/1.125 serif; } 16
• Không sử dụng p { font: 400 inherit/1.125 serif; } 20;
• Làm theo hướng dẫn, ngay cả khi chúng không phải là phương pháp hay nhất
• kết thúc
• Đọc thêm trên Blog Kỹ thuật Toptal
• Hiểu những điều cơ bản
• Mã sạch là gì?
• Làm thế nào để viết mã sạch?
• Bình luận
• Làm cách nào để xóa mã HTML?
• Dọn dẹp và tối ưu hóa mã HTML là gì?

Qua

Tigran Vardanyan

Tigran là một nhà phát triển front-end giàu kinh nghiệm với niềm đam mê mã CSS rõ ràng và hiệu quả. Anh ấy thích giữ cho nó đơn giản và nhanh chóng

CHIA SẺ

CHIA SẺ

Trong 15 năm kinh nghiệm phát triển web của mình, tôi đã làm việc với nhiều công ty khác nhau, từ cấp doanh nghiệp đến công ty mới thành lập và tôi đã làm việc với rất nhiều kỹ sư phần mềm đồng nghiệp trong suốt chặng đường. Một trong những vấn đề phổ biến và quan trọng nhất mà tôi gặp phải trong các dự án của mình là không viết được mã rõ ràng và dễ hiểu

Ngay cả những nhà phát triển giỏi nhất từ ​​các công ty hàng đầu cũng không phải lúc nào cũng tuân theo các phương pháp hay nhất và viết mã có thể được làm sạch và tối ưu hóa

Hậu quả của mã lộn xộn và bẩn

Để trích dẫn một bài đăng blog cũ nhưng vẫn có liên quan thảo luận về các nguyên tắc mã sạch

Mã nguồn giống như nợ tài chính. Giả sử bạn muốn mua một ngôi nhà để ở. Hầu hết mọi người không có khả năng tài chính để trả tiền mặt cho một ngôi nhà, vì vậy thay vào đó, bạn phải thế chấp. Nhưng bản thân thế chấp không phải là một điều tuyệt vời để có. Đó là trách nhiệm pháp lý. Bạn phải trả lãi cho khoản nợ của mình hàng tháng…

Trong phát triển web cũng vậy. Mã có chi phí liên tục. Bạn phải hiểu nó, bạn phải duy trì nó, bạn phải điều chỉnh nó theo các mục tiêu mới theo thời gian. Bạn càng có nhiều mã, những chi phí liên tục đó sẽ càng lớn. Lợi ích tốt nhất của chúng tôi là có càng ít mã nguồn càng tốt trong khi vẫn có thể hoàn thành các mục tiêu kinh doanh của mình

p {
  font: 400 inherit/1.125 serif;
}

mã tốt

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

p {
  font-weight: 400;
  font-size: inherit;
  line-height: 1.125;
  font-family: serif;
}

Sử dụng văn bản thay thế trên các thẻ

H1 title

7 để đảm bảo tính hợp lệ của nguyên tắc mã sạch

Thuộc tính này đóng vai trò quan trọng đối với SEO, công cụ tìm kiếm, trình thu thập dữ liệu web, trình đọc màn hình, v.v.

Mã xấu

mã tốt

Sử dụng kebab-case (spinal-case)

Đối với tên, hãy cố gắng sử dụng

  
H1 title

  
H1 title

Mã xấu

p {
  font: 400 inherit/1.125 serif;
}

mã tốt

  
H1 title

  
H1 title

Sử dụng những cái tên có ý nghĩa mà bất kỳ ai cũng có thể hiểu được, giữ cho chúng ngắn gọn

Tên của các lớp sẽ giống như

Cố gắng sử dụng tên chung của các lớp thay vì viết tên nội dung cụ thể. Nó làm cho mã dễ đọc hơn

Mã xấu

mã tốt

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

Không viết thuộc tính loại cho biểu định kiểu và tập lệnh trong HTML5

Chúng không bắt buộc với HTML5, nhưng được yêu cầu bởi các tiêu chuẩn W3C trong HTML4/XHTML

Mã xấu

p {
  font: 400 inherit/1.125 serif;
}

mã tốt

p {
  font: 400 inherit/1.125 serif;
}

Sử dụng các lớp cụ thể khi cần thiết

Giữ bộ chọn CSS cụ thể hơn và chọn các thành phần bạn cần; . Nó sẽ cho phép mã kết xuất nhanh hơn và loại bỏ mọi trở ngại quản lý trong tương lai

Mã xấu

p {
  font: 400 inherit/1.125 serif;
}

mã tốt

p {
  font: 400 inherit/1.125 serif;
}

Mặc dù áp dụng một lớp cho phần tử được nhắm mục tiêu có thể tạo ra nhiều mã hơn trong HTML, nhưng nó sẽ cho phép mã hiển thị nhanh hơn và sẽ loại bỏ mọi trở ngại về quản lý

Thêm một lớp vào phần tử cha nếu bạn muốn tạo một kiểu khác cho cùng một khối

Nếu bạn cần sử dụng cùng một khối nhưng với kiểu dáng khác nhau, hãy cố gắng giữ cho HTML càng nguyên vẹn càng tốt. Chỉ cần thêm một lớp vào phần tử gốc và áp dụng tất cả các kiểu mới cho phần tử con của lớp đó trong CSS

Mã xấu

p {
  font: 400 inherit/1.125 serif;
}

p {
  font: 400 inherit/1.125 serif;
}

mã tốt

p {
  font: 400 inherit/1.125 serif;
}

p {
  font: 400 inherit/1.125 serif;
}

Giảm đơn vị từ giá trị 0

Thêm đơn vị là không cần thiết và không cung cấp giá trị bổ sung. Không có sự khác biệt giữa 0px, 0em, 0% hoặc bất kỳ giá trị 0 nào khác. Các đơn vị không quan trọng vì giá trị vẫn bằng không

Mã xấu

p {
  font: 400 inherit/1.125 serif;
}

mã tốt

p {
  font: 400 inherit/1.125 serif;
}

Đừng viết

8 trong CSS nếu bạn có thể thêm thẻ

9

Sử dụng thẻ

Mã xấu

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

mã tốt

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

Sử dụng bộ chọn A > B

Sẽ rất hữu ích khi sử dụng bộ chọn

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

Mã xấu

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

mã tốt

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

Cách viết HTML sạch

Chuyển sang HTML, ưu tiên sẽ là đảm bảo giao diện người dùng mạnh mẽ và dễ bảo trì

Cố gắng có một giao diện người dùng dựa trên đánh dấu nhất có thể

Tạo mã đánh dấu mặt trước của bạn dựa trên đánh dấu thay vì viết quá nhiều CSS

Điều này sẽ giúp các công cụ tìm kiếm và làm cho mã của bạn dễ đọc hơn, có khả năng nâng cao thứ hạng tìm kiếm và trải nghiệm người dùng

Mã xấu

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

mã tốt

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

Tránh sử dụng các hàm bao không cần thiết trong HTML

Cố gắng không sử dụng các phần tử bao bọc không cần thiết trong HTML. Có hàng tấn phần tử

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

Mã xấu

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

mã tốt

p {
  font-weight: 400;
  font-size: inherit;
  line-height: 1.125;
  font-family: serif;
}

Sử dụng các lớp nguyên tử để tạo kiểu

Không sử dụng bất kỳ màu sắc hoặc kích thước phông chữ tùy chỉnh nào (nếu màu sắc hoặc kích thước phông chữ không có trong khung, chỉ cần thêm các lớp nguyên tử của bạn). Các lớp nguyên tử là các đơn vị kiểu dáng đơn giản, có mục đích duy nhất. Giống như kiểu nội tuyến, kiểu nguyên tử chỉ áp dụng một khai báo kiểu duy nhất

Mã xấu

p {
  font-weight: 400;
  font-size: inherit;
  line-height: 1.125;
  font-family: serif;
}

p {
  font-weight: 400;
  font-size: inherit;
  line-height: 1.125;
  font-family: serif;
}

mã tốt

p {
  font-weight: 400;
  font-size: inherit;
  line-height: 1.125;
  font-family: serif;
}

Cố gắng giữ các lớp hạt và nguyên tử và sử dụng chúng khi cần thiết. Kết quả là giao diện người dùng của bạn sẽ trở nên dựa trên đánh dấu nhiều hơn

Sử dụng các yếu tố ngữ nghĩa

Sử dụng ngữ nghĩa cung cấp một cấu trúc tốt hơn và làm cho mã và nội dung dễ đọc hơn

Mã xấu

p {
  font-weight: 400;
  font-size: inherit;
  line-height: 1.125;
  font-family: serif;
}

mã tốt

p {
  font-weight: 400;
  font-size: inherit;
  line-height: 1.125;
  font-family: serif;
}

Sử dụng thẻ HTML5

Các thẻ mới cho phép bạn tự do biểu đạt hơn và chuẩn hóa các yếu tố chung, giúp cải thiện quá trình xử lý tài liệu tự động. Đây là một danh sách vững chắc của tất cả các yếu tố. Tôi đã phát hiện ra rằng rất nhiều nhà phát triển luôn sử dụng rất nhiều

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

Mã xấu

p {
  font-weight: 400;
  font-size: inherit;
  line-height: 1.125;
  font-family: serif;
}

mã tốt

p {
  font-weight: 400;
  font-size: inherit;
  line-height: 1.125;
  font-family: serif;
}

dòng dưới cùng. Tìm hiểu và sử dụng các yếu tố mới trong HTML5. Nó rất đáng để nỗ lực

CSS. Mã sạch và tiền xử lý

Khi nói đến CSS, thật khó để không bắt đầu với một số lời khuyên không nguyên bản nhưng hỗn xược

Sử dụng bộ tiền xử lý CSS

Sass là ngôn ngữ mở rộng CSS chuyên nghiệp hoàn thiện, ổn định và mạnh mẽ nhất trên thế giới

Có hai cú pháp có sẵn cho Sass. Đầu tiên, được gọi là SCSS (Sassy CSS) và được sử dụng xuyên suốt tài liệu tham khảo này, là một phần mở rộng của cú pháp CSS. Cú pháp thứ hai và cũ hơn, được gọi là cú pháp thụt lề (hoặc đôi khi chỉ là “Sass”), cung cấp một cách viết CSS ngắn gọn hơn

Nhóm bộ chọn của bạn. Sử dụng @extend trong SASS

Bằng cách nhóm các bộ chọn của bạn hoặc sử dụng

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

Mã xấu

p {
  font-weight: 400;
  font-size: inherit;
  line-height: 1.125;
  font-family: serif;
}

mã tốt

Sử dụng đơn vị rem thay vì pixel trong CSS

Sử dụng REM cho kích thước và khoảng cách, ví dụ như kích thước phông chữ mà nó tạo ra dựa trên

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

Bạn sẽ viết ít mã hơn cho chế độ xem đáp ứng

Mã xấu

mã tốt

Cố gắng tránh cố định chiều cao hoặc chiều rộng trong CSS

Cố gắng tránh cố định chiều cao hoặc chiều rộng trong CSS. Chiều cao có thể được tạo bằng cách có nội dung bên trong + phần đệm và chiều rộng có thể được xác định bởi hệ thống lưới (sử dụng lưới lồng nhau nếu cần)

Mã xấu

mã tốt

Đảm bảo chỉ sử dụng mục gốc một lần trong SCSS

Khi bạn đang sử dụng bộ tiền xử lý CSS và dự định viết kiểu dáng cho bất kỳ phần nào, hãy đảm bảo chỉ sử dụng mục gốc trong CSS một lần và bao gồm tất cả các phần tử con cũng như truy vấn phương tiện bên trong dấu ngoặc của nó. Điều này sẽ cho phép bạn dễ dàng tìm và sửa đổi phần tử cha chính ở một nơi khi thực hiện các thay đổi trong tương lai

Mã xấu

mã tốt

Hãy suy nghĩ về những yếu tố nào sẽ bị ảnh hưởng trước khi viết quy tắc CSS

Luôn nghĩ về yếu tố nào sẽ bị ảnh hưởng trước khi viết bất kỳ quy tắc CSS nào. Nếu các thay đổi của bạn không phổ biến, thì hãy viết các quy tắc của bạn theo cách chỉ ảnh hưởng đến một yếu tố nhất định và không ảnh hưởng gì khác

Mã xấu

mã tốt

Cố gắng tìm kiếm các quy tắc và biến CSS hiện có trước khi viết những cái mới

Luôn tìm các quy tắc hiện có phù hợp với kiểu dáng mong muốn, cả trong CSS tùy chỉnh và trong khung. Chỉ khi không có gì phù hợp, hãy tiến hành viết một cái mới

Điều này đặc biệt quan trọng khi làm việc với các ứng dụng lớn

Mã xấu

mã tốt

Sử dụng các quy tắc cụ thể

Nếu nền có một thuộc tính, chúng tôi chỉ định thuộc tính đó, nhưng nếu nó có các thuộc tính nền khác nhau, chúng tôi có thể khai báo cho nó một

Mã xấu

mã tốt

Sử dụng các thuộc tính và giá trị tốc ký

Cố gắng hết sức để sử dụng nhiều thuộc tính và giá trị tốc ký hơn. Sử dụng thuộc tính tốc ký, bạn có thể viết các biểu định kiểu ngắn gọn và thường xuyên hơn, dễ đọc hơn nhiều, tiết kiệm thời gian và năng lượng quý báu

Mã xấu

mã tốt

Sử dụng

Expand details

All content goes here

09 thay vì p { font: 400 inherit/1.125 serif; } 00 cho chiều cao của dòng

Sử dụng các đơn vị

  

  
  



  
  
  




  
  
Expand details
  
All content goes here

p {
  font: 400 inherit/1.125 serif;
}

Mã xấu

mã tốt

Sử dụng các lớp Bootstrap càng nhiều càng tốt

Mặc dù quy tắc này có thể áp dụng cho các khung giao diện người dùng nói chung, nhưng tôi đang sử dụng Bootstrap làm ví dụ, vì đây là thư viện thành phần giao diện người dùng phổ biến nhất thế giới

Bootstrap cho phép bạn sử dụng rất nhiều lớp sẵn sàng, giúp công việc của bạn dễ dàng hơn. Cố gắng sử dụng các lớp Bootstrap càng nhiều càng tốt để tạo thêm đánh dấu dựa trên HTML

Mã xấu

p {
  font: 400 inherit/1.125 serif;
}

mã tốt

p {
  font: 400 inherit/1.125 serif;
}

Tùy chỉnh khuôn khổ của bạn đúng cách

Bootstrap dựa vào các biến. scss, cho phép bạn dễ dàng định cấu hình và tùy chỉnh giao diện người dùng của mình mà không cần viết một dòng mã nào. Mặt khác, nếu bạn định tự viết tất cả các tùy chỉnh theo cách thủ công, thì tốt hơn hết là bạn không nên sử dụng một khung nào cả

Một số nhà phát triển tránh thay đổi biến. scss, nghĩ rằng họ vẫn có thể nâng cấp Bootstrap lên phiên bản mới mà không gặp nhiều rắc rối, nhưng đó có thể là một công việc tẻ nhạt. Ngay cả các bản cập nhật nhỏ cũng yêu cầu nhà phát triển đọc nhật ký thay đổi, xem qua tất cả các đánh dấu và CSS cũng như chuyển sang phiên bản mới theo cách thủ công

Mã xấu

p {
  font: 400 inherit/1.125 serif;
}

mã tốt

p {
  font: 400 inherit/1.125 serif;
}

Không ghi đè chiều rộng p { font: 400 inherit/1.125 serif; } 03

Cố gắng không ghi đè lên chiều rộng của

p {
  font: 400 inherit/1.125 serif;
}

p {
  font: 400 inherit/1.125 serif;
}

p {
  font: 400 inherit/1.125 serif;
}

Mã xấu

p {
  font: 400 inherit/1.125 serif;
}

mã tốt

p {
  font: 400 inherit/1.125 serif;
}

Sử dụng các lớp Bootstrap 4 và viết ít CSS hơn

Bắt đầu sử dụng Bootstrap 4, mặc dù nó đang ở giai đoạn thử nghiệm. Nó bao gồm nhiều lớp mới sẽ giúp bạn tạo bố cục nhanh hơn, đặc biệt là Flexbox và miếng đệm

Mã xấu

p {
  font: 400 inherit/1.125 serif;
}

p {
  font: 400 inherit/1.125 serif;
}

mã tốt

p {
  font: 400 inherit/1.125 serif;
}

Bây giờ chúng ta có thể gán các lớp cho một phần tử để loại bỏ tất cả các đường viền hoặc một số đường viền

Mã xấu

p {
  font: 400 inherit/1.125 serif;
}

  
H1 title

mã tốt

  
H1 title

  
H1 title

Sử dụng p { font: 400 inherit/1.125 serif; } 07 nếu p { font: 400 inherit/1.125 serif; } 08 và p { font: 400 inherit/1.125 serif; } 09 có cùng giá trị cho X

Đừng viết

p {
  font: 400 inherit/1.125 serif;
}

p {
  font: 400 inherit/1.125 serif;
}

p {
  font: 400 inherit/1.125 serif;
}

p {
  font: 400 inherit/1.125 serif;
}

p {
  font: 400 inherit/1.125 serif;
}

p {
  font: 400 inherit/1.125 serif;
}

Mã xấu

  
H1 title

mã tốt

  
H1 title

Không sử dụng p { font: 400 inherit/1.125 serif; } 16

Không dùng

p {
  font: 400 inherit/1.125 serif;
}

p {
  font: 400 inherit/1.125 serif;
}

p {
  font: 400 inherit/1.125 serif;
}

Mã xấu

  
H1 title

mã tốt

  
H1 title

Không sử dụng p { font: 400 inherit/1.125 serif; } 20;

Nếu bạn đang dùng Bootstrap thì đã gộp sẵn

p {
  font: 400 inherit/1.125 serif;
}

Làm theo hướng dẫn, ngay cả khi chúng không phải là phương pháp hay nhất

Vì mục đích nhất quán, tốt hơn hết là luôn tuân theo các quy tắc và hướng dẫn mà bạn đã bắt đầu (cho dù đó là về cách đặt tên, kiểu mã hay cấu trúc tệp)

kết thúc

Tôi hy vọng bạn đã có thể học được điều gì đó hữu ích và bạn sẽ suy nghĩ nhiều hơn về việc viết mã HTML và CSS tối thiểu bằng các phương pháp hay nhất

Đối với các công ty lớn, rất khó để duy trì các ứng dụng lớn khi có mã lộn xộn. Và tất nhiên, các công ty lớn có tiền để trả cho chất lượng tốt. Nếu bạn tuân theo các nguyên tắc mã hóa sạch, bạn sẽ cải thiện cơ hội có được một công việc tốt. Nó cũng đáng để đưa ra khía cạnh tự do. Các chuyên gia tung hứng nhiều dự án và khách hàng phải cung cấp mã sạch để có thể chuyển cho các nhà phát triển khác ngay lập tức

Tôi hy vọng sẽ mở rộng sang các chủ đề nâng cao hơn trong các bài đăng trong tương lai, vì tôi dự định nói về việc tự động hóa quy trình mã hóa, sử dụng các tác vụ Gulp/Grunt, Linters, trình cắm Trình chỉnh sửa, công cụ tạo mã, công cụ AI viết mã thay bạn, v.v.

Tôi hy vọng đây là một bài đọc thú vị và nhiều thông tin. Chúc may mắn trong nỗ lực mã hóa của bạn

Đọc thêm trên Blog Kỹ thuật Toptal

• Cách tiếp cận Hoạt ảnh SVG trong CSS

Hiểu những điều cơ bản

Mã sạch là gì?

Mã sạch là mã dễ đọc và dễ hiểu cũng như dễ dàng cho bất kỳ nhà phát triển nào duy trì và sửa đổi. Có nghĩa là những cái tên được gán có ý nghĩa nhưng không quá dài. Không có phần nào của mã được lặp lại và hầu hết mọi thứ phải nhất quán

Làm thế nào để viết mã sạch?

Các nguyên tắc "Đừng lặp lại chính mình" (DRY), "trừu tượng" và "giữ cho nó đơn giản, ngu ngốc" (KISS) là những phương pháp hay nhất hữu ích nhất trong việc viết mã sạch. Cần đảm bảo tính nhất quán và dễ đọc, đồng thời phải tuân theo các hướng dẫn và quy ước về phong cách

thẻ

Người làm việc tự do? Tìm công việc tiếp theo của bạn.

Việc làm Lập trình viên Front-End

Xem thông tin đầy đủ

Tigran Vardanyan

Kỹ sư phần mềm tự do

Giới thiệu về tác giả

Tigran là một freelancer và nhà phát triển front-end giàu kinh nghiệm. Anh ấy mong muốn được làm việc với các nhà phát triển tuyệt vời và trong các dự án chất lượng cao. Anh ấy đánh giá cao mã sạch và đơn giản, đồng thời mang lại chất lượng đẳng cấp thế giới nhờ hơn 17 năm kinh nghiệm. Tigran luôn đáng tin cậy và nhạy bén, vì vậy bạn nên thuê anh ấy cho những dự án phức tạp nhất của mình

Thuê Tigran

Bình luận

Diego Díaz Ogni

công việc tốt đẹp. Tôi đồng ý với hầu hết. Chỉ có một điều tôi không hiểu là tại sao thẻ p trên các mẫu CSS lại được viết hoa. có lẽ một lỗi đánh máy?

Diego Díaz Ogni

công việc tốt đẹp. Tôi đồng ý với hầu hết. Chỉ có một điều tôi không hiểu là tại sao thẻ p trên các mẫu CSS lại được viết hoa. có lẽ một lỗi đánh máy?

Chris Tapay

bài báo rất hay. Tôi chỉ không đồng ý với ví dụ tại "Đảm bảo chỉ sử dụng mục gốc một lần trong SCSS. " tiết diện. mặc dù đúng là chúng ta nên sử dụng mục cha mẹ một lần (nếu có thể), khi sử dụng các điểm dừng cho các bố cục cụ thể, lý tưởng nhất là chúng sẽ được chuyển vào một tệp riêng biệt (e. g. di động. css, đáp ứng. css, v.v.), vì điều đó dễ đọc và dễ bảo trì hơn

Chris Tapay

bài báo rất hay. Tôi chỉ không đồng ý với ví dụ tại "Đảm bảo chỉ sử dụng mục gốc một lần trong SCSS. " tiết diện. mặc dù đúng là chúng ta nên sử dụng mục cha mẹ một lần (nếu có thể), khi sử dụng các điểm dừng cho các bố cục cụ thể, lý tưởng nhất là chúng sẽ được chuyển vào một tệp riêng biệt (e. g. di động. css, đáp ứng. css, v.v.), vì điều đó dễ đọc và dễ bảo trì hơn

Chris Tapay

Tôi cũng nhận ra những điều đó và tôi nghĩ rằng chúng có thể là lỗi chính tả (hoặc mục đích của tác giả, để tạo ra cuộc thảo luận). Tên thẻ và thuộc tính không phân biệt chữ hoa chữ thường (tuy nhiên, việc sử dụng chữ thường được ưu tiên hơn). "Tất cả cú pháp CSS không phân biệt chữ hoa chữ thường trong phạm vi ASCII (i. e. , [a-z] và [A-Z] là tương đương), trừ những phần không chịu sự kiểm soát của CSS. Ví dụ: phân biệt chữ hoa chữ thường của các giá trị thuộc tính HTML "id" và "class", tên phông chữ và URI nằm ngoài phạm vi của thông số kỹ thuật này. Đặc biệt lưu ý rằng tên phần tử không phân biệt chữ hoa chữ thường trong HTML, nhưng phân biệt chữ hoa chữ thường trong XML. " -> https. //www. w3. tổ chức/TR/CSS2/syndata. html#ký tự

Chris Tapay

Tôi cũng nhận ra những điều đó và tôi nghĩ rằng chúng có thể là lỗi chính tả (hoặc mục đích của tác giả, để tạo ra cuộc thảo luận). Tên thẻ và thuộc tính không phân biệt chữ hoa chữ thường (tuy nhiên, việc sử dụng chữ thường được ưu tiên hơn). "Tất cả cú pháp CSS không phân biệt chữ hoa chữ thường trong phạm vi ASCII (i. e. , [a-z] và [A-Z] là tương đương), trừ những phần không chịu sự kiểm soát của CSS. Ví dụ: phân biệt chữ hoa chữ thường của các giá trị thuộc tính HTML "id" và "class", tên phông chữ và URI nằm ngoài phạm vi của thông số kỹ thuật này. Đặc biệt lưu ý rằng tên phần tử không phân biệt chữ hoa chữ thường trong HTML, nhưng phân biệt chữ hoa chữ thường trong XML. " -> https. //www. w3. tổ chức/TR/CSS2/syndata. html#ký tự

Máy tính xách tay bỏ túi

Ý của bạn là đề xuất SRCSET trong thành phần hình ảnh và sau đó không bao gồm nó?

Máy tính xách tay bỏ túi

Ý của bạn là đề xuất SRCSET trong thành phần hình ảnh và sau đó không bao gồm nó?

brentgreeff

Bài viết hay, nhưng rất lớn. chắc vài ngày mới đọc hết. )

brentgreeff

Bài viết hay, nhưng rất lớn. chắc vài ngày mới đọc hết. )

Tigran Vardanyan

@Pocket Notebooks. disqus, cảm ơn vì đã nắm bắt, sẽ sửa lỗi đánh máy sớm

Tigran Vardanyan

@Pocket Notebooks. disqus, cảm ơn vì đã nắm bắt, sẽ sửa lỗi đánh máy sớm

Tigran Vardanyan

@brentgreeff. disqus Cảm ơn, Yea, đó là một chủ đề lớn. Tôi đã cố gắng giữ phần còn lại cho các lần xuất bản tiếp theo, như đã đề cập trong phần -Wrapping Up-. )

Tigran Vardanyan

@brentgreeff. disqus Cảm ơn, Yea, đó là một chủ đề lớn. Tôi đã cố gắng giữ phần còn lại cho các lần xuất bản tiếp theo, như đã đề cập trong phần -Wrapping Up-. )

Tigran Vardanyan

@diegodazogni. disqus, Cảm ơn rất nhiều vì đã nắm bắt, chúng đã được thay đổi tự động do plugin của bên thứ 3. đã sửa

Tigran Vardanyan

@diegodazogni. disqus, Cảm ơn rất nhiều vì đã nắm bắt, chúng đã được thay đổi tự động do plugin của bên thứ 3. đã sửa

Tigran Vardanyan

@christapay. disqus Cảm ơn bạn đã bình luận. Điện thoại di động riêng biệt. css hoặc đáp ứng. css đã được sử dụng trong Bootstrap v2 ( https. //prnt. sc/h2mazi ). Nhưng bắt đầu từ v3, họ đã đi đến quyết định không có tệp riêng biệt, ( e. g. Bootstrap v4. http. //prntscr. com/h2m9q2) Cái nào thực sự tốt hơn, vì chẳng hạn như khi bạn muốn thay đổi thứ gì đó trong. jumbotron, bạn Tìm trong Tệp `. jumbotron` và nó chỉ cho một kết quả. Bạn không cần phải tìm hiểu các tệp khác nhau, các truy vấn phương tiện khác nhau để tìm ra chính xác nơi bạn cần thực hiện các thay đổi của mình. Nó làm cho mã sạch sẽ và ít nỗ lực hơn để duy trì. Hy vọng nó có ý nghĩa

Tigran Vardanyan

@christapay. disqus Cảm ơn bạn đã bình luận. Điện thoại di động riêng biệt. css hoặc đáp ứng. css đã được sử dụng trong Bootstrap v2 ( https. //prnt. sc/h2mazi ). Nhưng bắt đầu từ v3, họ đã đi đến quyết định không có tệp riêng biệt, ( e. g. Bootstrap v4. http. //prntscr. com/h2m9q2) Cái nào thực sự tốt hơn, vì chẳng hạn như khi bạn muốn thay đổi thứ gì đó trong. jumbotron, bạn Tìm trong Tệp `. jumbotron` và nó chỉ cho một kết quả. Bạn không cần phải tìm hiểu các tệp khác nhau, các truy vấn phương tiện khác nhau để tìm ra chính xác nơi bạn cần thực hiện các thay đổi của mình. Nó làm cho mã sạch sẽ và ít nỗ lực hơn để duy trì. Hy vọng nó có ý nghĩa

Chris Tapay

Ồ, tôi không biết về nó. Có ý nghĩa. Đã đến lúc kiểm tra lại lõi Bootstrap, cảm ơn

Chris Tapay

Ồ, tôi không biết về nó. Có ý nghĩa. Đã đến lúc kiểm tra lại lõi Bootstrap, cảm ơn

Tigran Vardanyan

Cảm ơn. @christapay. disqus

Tigran Vardanyan

Cảm ơn. @christapay. disqus

Vijay Thirugnanam

Thực sự rất nhiều thông tin. Tôi đồng ý với tất cả các điểm với một ngoại lệ. Sử dụng bootstrap mọi lúc mọi nơi. Với khả năng linh hoạt mới trong CSS3, tốt hơn hết là tránh mọi khuôn khổ mà hãy viết thứ gì đó được tùy chỉnh. Tôi mong chờ một bài đăng tương tự trên JavaScript. Có rất nhiều kẻ nói dối ngoài kia. Nhưng luôn có thể nói điều gì đó về mã JS sạch, không bị che lấp bởi các linters

Vijay Thirugnanam

Thực sự rất nhiều thông tin. Tôi đồng ý với tất cả các điểm với một ngoại lệ. Sử dụng bootstrap mọi lúc mọi nơi. Với khả năng linh hoạt mới trong CSS3, tốt hơn hết là tránh mọi khuôn khổ mà hãy viết thứ gì đó được tùy chỉnh. Tôi mong chờ một bài đăng tương tự trên JavaScript. Có rất nhiều kẻ nói dối ngoài kia. Nhưng luôn có thể nói điều gì đó về mã JS sạch, không bị che lấp bởi các linters

Tigran Vardanyan

Xin chào Vijah, cảm ơn vì phản hồi. Phải, có lẽ đối với các ứng dụng nhỏ có giao diện người dùng đơn giản, tốt hơn hết là không nên sử dụng bootstrap, nhưng về tổng thể, bootstrap giúp ích rất nhiều và nó mang lại nhiều tiêu chuẩn hóa hơn cho ứng dụng vì nó được hầu hết các nhà phát triển sử dụng. Để tùy chỉnh bootstrap, tôi thực sự khuyên bạn nên tùy chỉnh nó trong lõi của nó (SCSS/LESS) và biên dịch thành CSS. Trong trường hợp đó, rất nhiều nội dung không sử dụng sẽ bị xóa và sẽ không cần thiết phải sao chép mã (một mã là mặc định của bootstrap, một mã khác là tùy chỉnh). Ngoài ra BS4 được viết lại hoàn toàn bằng flexbox và nó thực sự mạnh mẽ

Tigran Vardanyan

Xin chào Vijah, cảm ơn vì phản hồi. Phải, có lẽ đối với các ứng dụng nhỏ có giao diện người dùng đơn giản, tốt hơn hết là không nên sử dụng bootstrap, nhưng về tổng thể, bootstrap giúp ích rất nhiều và nó mang lại nhiều tiêu chuẩn hóa hơn cho ứng dụng vì nó được hầu hết các nhà phát triển sử dụng. Để tùy chỉnh bootstrap, tôi thực sự khuyên bạn nên tùy chỉnh nó trong lõi của nó (SCSS/LESS) và biên dịch thành CSS. Trong trường hợp đó, rất nhiều nội dung không sử dụng sẽ bị xóa và sẽ không cần thiết phải sao chép mã (một mã là mặc định của bootstrap, một mã khác là tùy chỉnh). Ngoài ra BS4 được viết lại hoàn toàn bằng flexbox và nó thực sự mạnh mẽ

marco_vega

Cảm ơn bạn đã đặt điều này lại với nhau, Tigran. Tôi hy vọng rằng bạn có thể kết hợp một cái gì đó trong tương lai cho những thứ như Thành phần được tạo kiểu cho JavaScript. tôi rất muốn biết ý kiến ​​của bạn

marco_vega

Cảm ơn bạn đã đặt điều này lại với nhau, Tigran. Tôi hy vọng rằng bạn có thể kết hợp một cái gì đó trong tương lai cho những thứ như Thành phần được tạo kiểu cho JavaScript. tôi rất muốn biết ý kiến ​​của bạn

tia chớp khiêu vũ

Tốt đẹp. Bộ quy tắc tốt. Nhưng để tư vấn cho bố cục sử dụng trong html, thông qua các lớp bootstrap (ví dụ: "col-md-4 col-xs-6") không đi ngược lại nội dung của bài viết. Bố cục nên được thực hiện bằng sass, không phải bằng html và đặc biệt là bây giờ bootstrap ở dạng sass, người ta chỉ có thể sử dụng tiện ích mở rộng. Tất nhiên, cách tốt hơn vẫn là susy. -)

tia chớp khiêu vũ

Tốt đẹp. Bộ quy tắc tốt. Nhưng để tư vấn cho bố cục sử dụng trong html, thông qua các lớp bootstrap (ví dụ: "col-md-4 col-xs-6") không đi ngược lại nội dung của bài viết. Bố cục nên được thực hiện bằng sass, không phải bằng html và đặc biệt là bây giờ bootstrap ở dạng sass, người ta chỉ có thể sử dụng tiện ích mở rộng. Tất nhiên, cách tốt hơn vẫn là susy. -)

Juraj Martinka

bài viết hay với lời khuyên hữu ích. Cảm ơn. Trong phần "Sử dụng bộ chọn A> B", bạn đã đề cập đến cách tiếp cận sau. ul > li { list-style-type. không ai; . Tôi đã giải quyết vấn đề này bằng cách đặt lớp đặc biệt vào danh sách cấp cao nhất như thế này. . top-level-list > li { list-style-type. không ai;

Juraj Martinka

bài viết hay với lời khuyên hữu ích. Cảm ơn. Trong phần "Sử dụng bộ chọn A> B", bạn đã đề cập đến cách tiếp cận sau. ul > li { list-style-type. không ai; . Tôi đã giải quyết vấn đề này bằng cách đặt lớp đặc biệt vào danh sách cấp cao nhất như thế này. . top-level-list > li { list-style-type. không ai;

Tigran Vardanyan

@jurajmartinka. disqus Cảm ơn phản hồi, vâng, bạn nói đúng, để giữ cho ví dụ rõ ràng về mặt trực quan, tôi đã không thêm bất kỳ lớp cụ thể nào vào

, để tập trung chủ yếu vào ý tưởng sử dụng bộ chọn A > B. Tất nhiên có một số phần khác trong bài viết của tôi, về những gì bạn đã đề cập với các ví dụ của riêng họ. https. //prnt. sc/h9svjv hoặc https. //prnt. sc/h9svw9

Làm cách nào để xóa mã HTML?

Dọn dẹp và tối ưu hóa mã HTML là gì?