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
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
Hello world
Expand details
All content goes here
p {
font: 400 inherit/1.125 serif;
}
mã tốt
Hello world
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ẻ
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
8 [
9] và không sử dụng
0 hoặc
1. Chỉ sử dụng
1 khi sử dụng BEM, mặc dù nếu bạn đang sử dụng Bootstrap, tốt hơn hết là bạn nên nhất quán và sử dụng
3 làm dấu phân cáchMã xấu
p {
font: 400 inherit/1.125 serif;
}
3mã tốt
8 dễ đọc hơn
0 và
1Sử 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ư
7Cố 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
Hello world
Expand details
All content goes here
0Khô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;
}
0mã tốt
p {
font: 400 inherit/1.125 serif;
}
1Sử 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;
}
2mã tốt
p {
font: 400 inherit/1.125 serif;
}
3Mặ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;
}
4p {
font: 400 inherit/1.125 serif;
}
5mã tốt
p {
font: 400 inherit/1.125 serif;
}
6p {
font: 400 inherit/1.125 serif;
}
7Giả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;
}
8mã tốt
p {
font: 400 inherit/1.125 serif;
}
9Đừng viết
8 trong CSS nếu bạn có thể thêm thẻ
9
Sử dụng thẻ
9 thay vì viết bộ chọn mới và thêm kiểu đường viền trong CSS. Nó làm cho mã dựa trên đánh dấu nhiều hơn và đó là những gì chúng tôi đang hướng tớiMã xấu
Hello world
Expand details
All content goes here
0
Hello world
Expand details
All content goes here
1mã tốt
Hello world
Expand details
All content goes here
2Sử dụng bộ chọn A > B
Sẽ rất hữu ích khi sử dụng bộ chọn
Hello world
Expand details
All content goes here
01, chỉ áp dụng các quy tắc cho [các] phần tử con trực tiếp, trong trường hợp đó, bạn sẽ không phải đặt lại kiểu dáng của tất cả các phần tử con khác không cần kiểu dáng đó. Ví dụ, nó rất hữu ích khi mã hóa các menu lồng nhau. Bạn sẽ không cần xác định lại kiểu dáng menu conMã xấu
Hello world
Expand details
All content goes here
3____24mã tốt
Hello world
Expand details
All content goes here
3____26Cá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
Hello world
Expand details
All content goes here
7mã tốt
Hello world
Expand details
All content goes here
8Trá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ử
Hello world
Expand details
All content goes here
02 và
Hello world
Expand details
All content goes here
03 đã là dĩ vãng. Giữ mọi thứ chi tiết và tuyến tính cho phép bạn đạt được mã tối thiểu [xem điểm tiếp theo]Mã xấu
Hello world
Expand details
All content goes here
9mã tốt
p {
font-weight: 400;
font-size: inherit;
line-height: 1.125;
font-family: serif;
}
0Sử 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;
}
1p {
font-weight: 400;
font-size: inherit;
line-height: 1.125;
font-family: serif;
}
2mã tốt
p {
font-weight: 400;
font-size: inherit;
line-height: 1.125;
font-family: serif;
}
3____34Cố 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;
}
5mã tốt
p {
font-weight: 400;
font-size: inherit;
line-height: 1.125;
font-family: serif;
}
6Sử 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
Hello world
Expand details
All content goes here
02 và
Hello world
Expand details
All content goes here
03, nhưng trước tiên, vui lòng kiểm tra tại đây những thẻ nào phù hợp một cách hợp lý trong ngữ cảnh của bạnMã xấu
p {
font-weight: 400;
font-size: inherit;
line-height: 1.125;
font-family: serif;
}
7mã tốt
p {
font-weight: 400;
font-size: inherit;
line-height: 1.125;
font-family: serif;
}
8dò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
Hello world
Expand details
All content goes here
06 trong SASS, bạn sẽ giúp giữ cho mã của mình KHÔ [Đừng lặp lại chính mình]Mã xấu
p {
font-weight: 400;
font-size: inherit;
line-height: 1.125;
font-family: serif;
}
9mã tốt
0Sử 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
Hello world
Expand details
All content goes here
07 của phần tử gốc
Hello world
Expand details
All content goes here
08. Chúng cũng cho phép bạn nhanh chóng mở rộng quy mô toàn bộ dự án bằng cách thay đổi kích thước phông chữ gốc [ví dụ: ở một truy vấn phương tiện/kích thước màn hình nhất định]Bạn sẽ viết ít mã hơn cho chế độ xem đáp ứng
Mã xấu
1mã tốt
2Cố 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
3____54mã tốt
5
6Đả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
7mã tốt
8Hã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
9mã tốt
0Cố 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
1mã tốt
2Sử 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
3mã tốt
4Sử 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
5mã tốt
6Sử dụng
Hello world
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ị
Hello world
Expand details
All content goes here
09 và p {
font: 400 inherit/1.125 serif;
}
00 giúp chúng tôi linh hoạt trong các thiết kế của mình và khả năng tăng giảm tỷ lệ các phần tử thay vì bị mắc kẹt với các kích thước cố định. Chúng tôi có thể sử dụng tính linh hoạt này để làm cho thiết kế của chúng tôi dễ dàng điều chỉnh hơn trong quá trình phát triển và phản hồi nhanh hơn cũng như cho phép người dùng trình duyệt kiểm soát quy mô tổng thể của trang web để có thể đọc được tối đaMã xấu
7mã tốt
8Sử 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
9p {
font: 400 inherit/1.125 serif;
}
30mã tốt
p {
font: 400 inherit/1.125 serif;
}
31Tù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;
}
32mã tốt
p {
font: 400 inherit/1.125 serif;
}
33Khô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;
}
03. Thay vào đó, hãy thử sử dụng hệ thống lưới hoặc chỉ thay đổi chiều rộng vùng chứa trong p {
font: 400 inherit/1.125 serif;
}
05. Nếu bạn cần giảm chiều rộng của nó, chỉ cần sử dụng chiều rộng tối đa thay vì chiều rộng. Trong trường hợp đó, p {
font: 400 inherit/1.125 serif;
}
03 từ Bootstrap sẽ không bị ảnh hưởng trong chế độ xem phản hồi
Mã xấu
p {
font: 400 inherit/1.125 serif;
}
34mã tốt
p {
font: 400 inherit/1.125 serif;
}
35Sử 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;
}
36p {
font: 400 inherit/1.125 serif;
}
37mã tốt
p {
font: 400 inherit/1.125 serif;
}
38Bâ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;
}
39
0mã tốt
1
2Sử 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;
}
08 và p {
font: 400 inherit/1.125 serif;
}
09 nếu p {
font: 400 inherit/1.125 serif;
}
07 có cùng giá trị cho X. Ví dụ, không cần viết p {
font: 400 inherit/1.125 serif;
}
13 vì khi viết p {
font: 400 inherit/1.125 serif;
}
14, chúng ta đã tự động thêm p {
font: 400 inherit/1.125 serif;
}
13 vào trong đóMã xấu
3mã tốt
4Không sử dụng p {
font: 400 inherit/1.125 serif;
}
16
Không dùng
p {
font: 400 inherit/1.125 serif;
}
16 vì nếu không gán p {
font: 400 inherit/1.125 serif;
}
18 thì mặc định sẽ là p {
font: 400 inherit/1.125 serif;
}
16Mã xấu
5mã tốt
6Khô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;
}
21 rồi, không cần gộp 2 lầnLà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ẻ
CleanCodeCSSHTML5Ngườ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?
Để xóa tất cả thông tin đầu vào trong biểu mẫu HTML, hãy sử dụng thẻ .
Dọn dẹp và tối ưu hóa mã HTML là gì?
Giảm tài liệu HTML [hoặc đoạn] thành các thẻ và thuộc tính HTML cơ bản – HTML sạch. Ngoài ra, chuyển đổi một tài liệu Word [. docx] sang HTML sạch.