Tại sao một dấu phẩy đơn giản hóa mã hóa đơn giản
CSS, hoặc Cascading Style Sheets, là cách chấp nhận của ngành công nghiệp thiết kế web để thêm phong cách trực quan vào một trang web. Với CSS, bạn có thể kiểm soát bố cục trang, màu sắc, kiểu chữ , hình nền và hơn thế nữa. Về cơ bản, nếu đó là một phong cách trực quan, thì CSS là cách mang những phong cách đó đến trang web của bạn.
Khi bạn thêm kiểu CSS vào tài liệu, bạn có thể nhận thấy rằng tài liệu bắt đầu dài hơn và lâu hơn. Ngay cả một trang web nhỏ chỉ với một số ít trang có thể kết thúc với một tệp CSS khá lớn - và một trang rất lớn với rất nhiều và nhiều trang nội dung độc đáo có thể có các tệp CSS rất lớn. Điều này được kết hợp bởi các trang web đáp ứng có nhiều truy vấn phương tiện được bao gồm trong các biểu định kiểu để thay đổi giao diện hình ảnh và trang đưa ra cho các màn hình khác nhau.
Có, tệp CSS có thể mất nhiều thời gian. Đây không phải là một vấn đề lớn khi nói đến hiệu suất trang web và tốc độ tải xuống, bởi vì ngay cả một tệp CSS dài có thể là khá nhỏ (vì nó thực sự chỉ là một tài liệu văn bản). Tuy nhiên, mỗi chút một chút khi nói đến tốc độ trang, vì vậy nếu bạn có thể làm cho bảng định kiểu của bạn gọn gàng hơn, đó là một ý tưởng hay. Đây là nơi "dấu phẩy" có thể rất tiện dụng trong bảng định kiểu của bạn!
Dấu phẩy và CSS
Bạn có thể tự hỏi vai trò của dấu phẩy trong cú pháp bộ chọn CSS . Như trong các câu, dấu phẩy mang lại sự rõ ràng - không phải mã - cho các dấu tách. Dấu phẩy trong bộ chọn CSS phân tách nhiều bộ chọn trong cùng một kiểu.
Ví dụ, hãy xem một số CSS bên dưới.
th {color: đỏ; }
td {color: đỏ; }
p.red {color: red; }
div # firstred {color: đỏ; }
Với cú pháp này, bạn đang nói rằng bạn muốn thẻ thứ , thẻ td , thẻ đoạn với lớp màu đỏ, và thẻ div với ID được xáo trộn tất cả để có màu đỏ kiểu.
Đây là CSS hoàn toàn có thể chấp nhận được, nhưng có hai nhược điểm đáng kể để viết nó theo cách này:
- Trong tương lai, nếu bạn quyết định thay đổi màu phông chữ của các thuộc tính này thành màu xanh lam, bạn phải thực hiện thay đổi đó bốn lần trong biểu định kiểu của mình.
- Nó bổ sung thêm nhiều ký tự phụ vào bảng định kiểu mà bạn không cần. 4 phong cách này có thể không có vẻ quá mức cần thiết, nhưng nếu bạn tiếp tục làm điều này trên toàn bộ bảng định kiểu của bạn, các dòng sẽ thêm và tờ đó sẽ nhiều, lớn hơn nhiều so với mức cần thiết.
Để tránh những hạn chế này và để hợp lý hóa tệp CSS của bạn, chúng tôi sẽ thử sử dụng dấu phẩy.
Sử dụng dấu phẩy để chọn riêng biệt
Thay vì viết 4 bộ chọn CSS riêng biệt và 4 quy tắc, bạn có thể kết hợp tất cả các kiểu này thành một thuộc tính quy tắc bằng cách tách các bộ chọn riêng lẻ bằng dấu phẩy. Sau đây là cách thực hiện:
th, td, p.red, div # firstred {color: đỏ; }
Ký tự dấu phẩy về cơ bản hoạt động như từ "và" bên trong bộ chọn. Vì vậy, điều này áp dụng cho thẻ t h VÀ thẻ td VÀ thẻ đoạn với lớp màu đỏ VÀ thẻ div với ID được tạo thành. Đó là chính xác những gì chúng tôi đã có trước đây, nhưng thay vì cần 4 quy tắc CSS, chúng tôi có một quy tắc duy nhất với nhiều bộ chọn. Đây là những gì dấu phẩy thực hiện trong bộ chọn, nó cho phép chúng ta có nhiều bộ chọn trong một quy tắc.
Cách tiếp cận này không chỉ làm cho các tệp CSS gọn gàng hơn, sạch hơn, nó cũng làm cho các bản cập nhật trong tương lai dễ dàng hơn nhiều. Bây giờ nếu bạn muốn thay đổi màu từ đỏ sang xanh dương, bạn chỉ phải thực hiện thay đổi ở một vị trí thay vì trên toàn bộ 4 quy tắc kiểu gốc mà chúng tôi có! Hãy nghĩ về những khoản tiết kiệm thời gian này trên toàn bộ tệp CSS và bạn có thể thấy cách này sẽ giúp bạn tiết kiệm cả thời gian và không gian trong rune dài!
Biến thể cú pháp
Một số người chọn làm cho CSS dễ đọc hơn bằng cách tách từng bộ chọn trên một dòng riêng, thay vì viết tất cả trên một dòng như trên. Đây là cách thực hiện:
thứ,
td,
p.red,
div # firstred
{
màu đỏ;
}
Lưu ý rằng bạn đặt dấu phẩy sau mỗi bộ chọn và sau đó sử dụng "enter" để ngắt bộ chọn tiếp theo trên dòng riêng của nó. Bạn KHÔNG thêm dấu phẩy sau bộ chọn cuối cùng.
Bằng cách sử dụng dấu phẩy giữa các bộ chọn của bạn, bạn tạo một tờ kiểu dáng gọn nhẹ hơn dễ cập nhật hơn trong tương lai và dễ đọc hơn hôm nay!
Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào ngày 5/8/17