Sacha Greif công khai tự hỏi CSS có trở nên quá lớn hay không. Với tất cả các tính năng đã được cung cấp trong các trình duyệt trong vài năm qua - truy vấn vùng chứa! cú pháp màu tương đối! các lớp thác! thuộc tính logic! phạm vi trong truy vấn phương tiện! biến đổi cá nhân! :has() bộ chọn! - và tất cả những gì có thể xảy ra - CSS chuyển đổi! làm tổ! sự pha trộn màu sắc! hoạt ảnh liên kết cuộn! phạm vi phong cách! - chắc chắn có một đường cong học tập khác cho CSS ngày nay dành cho những người dùng giao diện người dùng mới và dày dạn kinh nghiệm.
Có thể đã có lúc chúng ta có thể biết hầu hết các thuộc tính CSS và cách chúng hoạt động. Những ngày đó đã qua lâu rồi, ít nhất là đối với một tay già như tôi. Nhưng loại đó đặt ra câu hỏi: bạn hoàn toàn phải biết CSS gì?
Vincas Stonys gần đây đã đâm vào một danh sách. Chris đặt một cái lại với nhau dựa trên các tính năng được phát hành kể từ CSS3. Bạn có thể có ý tưởng về những gì bạn sẽ đưa vào danh sách. Nếu tôi phải đặt Top 5 lại với nhau và giới hạn bản thân chỉ với các thuộc tính và bộ chọn, nó có thể trông giống như thế này…
writing-mode
Tôi không thể nói đủ về writing-mode tài sản. Điều làm cho nó trở nên quan trọng - đặc biệt là từ góc độ học tập - là nó thiết lập cho bạn các nguyên tắc bao hàm để tạo bố cục thủ công, bất kể ngôn ngữ của người dùng là gì. Một sự hiểu biết tốt về writing-mode sẽ dẫn đến sự hiểu biết về các thuộc tính và giá trị logicvà những điều đó, đến lượt nó, tạo tiền đề cho việc hiểu luồng tài liệu và tư duy về block, inline, startvà end chứ không phải là hướng vật lý.
display
Tôi rất khó tin rằng bất cứ ai cũng có thể viết CSS tốt mà không cần nắm chắc về display tài sản. Nó vừa là thuộc tính vừa là khuôn khổ để tạo bố cục. Không có Flexbox hoặc CSS Grid nếu không có nó, làm cho nó giống như một người gác cổng để hiểu những tính năng quan trọng đó.
Thêm vào đó, display tài sản bổ sung hoàn hảo writing-mode. Đó chính xác là thứ bạn sẽ cần một lần writing-mode đã cho bạn thấy luồng tài liệu và các hướng hợp lý. Bạn sẽ cần một thuộc tính để thay đổi luồng thông thường của phần tử (như thay đổi phần tử khối thành phần tử nội dòng) hoặc bắt đầu sắp xếp mọi thứ (như tạo bối cảnh bố cục linh hoạt) và đó là nơi display đến chơi.
margin / padding / border
Ugh, tôi hoàn toàn gian lận ở đây nhưng hãy nghĩ rằng học tập margin, paddingvà border cùng nhau là điều không thể tránh khỏi. Chúng là tất cả các bộ phận của Mô hình hộp, tất cả đều trợ giúp về khoảng cách và kiểu dáng và tất cả đều yêu cầu làm quen với Đơn vị độ dài CSS. Biết những thuộc tính này được mô tả để làm gì và chúng đóng góp như thế nào vào kích thước tính toán của một phần tử chắc chắn mang lại cho bạn nhiều quyền kiểm soát kiểu dáng hơn và xóa tan mọi sự nhầm lẫn về lý do tại sao một phần tử lại có kích thước như vậy - một vấn đề CSS thường gặp!
::before và ::after
Một cái khác mà tôi đang gian lận một chút. Đúng, ::before và ::after là hai yếu tố giả riêng lẻ, nhưng một lần nữa, tôi không thể tưởng tượng được việc học về cái này mà không có cái kia. Đó là một hai-fer!
Tôi nhớ tôi đã cảm thấy vô cùng kinh ngạc khi biết rằng những thứ này tồn tại và có thể được sử dụng để tạo ra mọi thứ từ hiệu ứng giao diện người dùng thú vị để hoàn thành hình minh họa đơn div. Nó mở ra những khả năng mới và cung cấp cái nhìn đầu tiên về sức mạnh thực sự của CSS.
@media
Ồ, tôi đã ở mục thứ năm và cũng là mục cuối cùng trong danh sách và cảm thấy như vẫn còn rất nhiều điều tốt đẹp về CSS ở đây. Nhưng nếu tôi phải chọn một điều cuối cùng, nó sẽ là truy vấn phương tiện truyền thông. Tại sao? Bởi vì nó là một thành phần chính để tạo bố cục linh hoạt, linh hoạt và các bối cảnh xem khác nhau. Truy vấn vùng chứa có thể kết thúc việc loại bỏ điều này khỏi danh sách của tôi khi nó trưởng thành, nhưng hiện tại, @media là một mồi tuyệt vời cho thiết kế đáp ứng.
Ngoài ra, @media là một bước đầu tiên tốt đẹp về các phẩm chất có điều kiện của CSS. Cho dù chúng tôi đang viết một truy vấn dựa trên loại thiết bị đang được sử dụng (ví dụ: screen or print) hoặc khi khung nhìn của trình duyệt đáp ứng một tiêu chí nhất định (ví dụ: width >= 768px), @media cú pháp cực kỳ hữu ích để tạo bố cục được tối ưu hóa cho các điều kiện khác nhau.
Ồ, và chúng tôi thậm chí còn chưa đề cập đến cách @media liên quan đến khả năng tiếp cận, nhờ vào khả năng áp dụng các kiểu dựa trên sở thích của người dùng (ví dụ, prefers-reduced-motion). Vì vậy, ngoài việc tạo bố cục có điều kiện, truy vấn phương tiện là một bước tiếp theo tốt đẹp để hiểu thiết kế bao gồm.
Đề cập đáng tin cậy
Việc chắt lọc CSS vào danh sách năm thuộc tính và bộ chọn phải biết là một việc khó khăn, đặc biệt là hiện nay CSS mạnh hơn so với trước đây, thậm chí là năm năm trước. Có một số mục khác mà tôi thực sự muốn đưa vào, như (không theo thứ tự cụ thể):
calc()has()colorfontoverflowposition(đặc biệt là cái này)z-index
Nhưng tôi đứng trước sự lựa chọn của mình. Học CSS quan trọng hơn việc ghi nhớ một danh sách các thuộc tính. Đó là một cuộc hành trình và tôi nghĩ rằng năm tôi đã chọn sẽ tạo ra một lộ trình học tập nhỏ xinh tạo tiền đề cho việc viết các quy tắc phong cách tốt và các bước tiếp theo để tìm hiểu sâu hơn về CSS.
Được rồi, hãy nói cho tôi biết của bạn!
Không đồng ý với danh sách của tôi? Bạn nên! Tôi cá là bạn có một số ý kiến thông minh và tôi muốn xem bạn sẽ làm cách nào để hoàn thành danh sách Top 5.
