CSS là một trong những thứ bị ghét nhất khi phát triển giao diện người dùng. Thông thường, các kiểu của bạn sẽ không thực hiện những gì bạn yêu cầu - Dưới đây là 5 điều sẽ giúp bạn giảm đau đầu do CSS gây ra.
1. DỪNG sử dụng! Quan trọng: Cách hoạt động của cấu trúc phân cấp CSS
Hệ thống phân cấp CSS là thứ thực sự khó hiểu đối với các nhà phát triển front end, vì nó thường bị bỏ qua khi học. Nói chung, các phong cách không thực sự xung đột… cho đến khi chúng phù hợp. Khi họ làm như vậy, các nhà phát triển thường ném dấu! Quan trọng vào cuối phong cách. Mặc dù nó thường là giải pháp nhưng nó có thể gây ra nhiều vấn đề sau này.
Trên thực tế, tại công việc hàng ngày của tôi, chúng tôi có một quy tắc nghiêm ngặt không quan trọng và bạn phải giải thích chính xác lý do tại sao điều quan trọng của bạn là cần thiết để đưa nó vào repo.
Nó đau đớn vì! Important át mọi thứ khác, ở mức độ mà một! Important về cơ bản là một lựa chọn nguyên tử. Thêm về điều này sau.
CSS works in a hierarchy fashion, where styles get applied with “priorities”, and in case of conflicting, the highest priority always wins. Here’s the hierarchy:
!important (Do not use!)
inline styles — HTML styles like
ID’s — #myDiv {}
class attributes — :hover , etc.
class styles — .myDiv {} (applied first to last, like class = ‘third-priority second-priority first-priority)
pseudo elements — :before , :after , etc. as well as h1{} etc.
Lưu ý: thuộc tính lớp về mặt kỹ thuật áp dụng mức độ ưu tiên tương tự như kiểu lớp, nhưng do cách áp dụng nó nên tôi đã xếp hạng nó cao hơn ở đây.
Đây là cách bạn nên sử dụng biểu đồ này: Giả sử bạn muốn thay đổi màu của văn bản khi di chuột. Nếu nó không được áp dụng, thay vì nhấn mạnh một điều quan trọng vào nó, hãy kéo danh sách này lên. Sau đó, tìm cấp độ nào: di chuột đang bật: trong trường hợp này là 4. Sau đó, tìm mọi thứ ở trên nó. Có thuộc tính màu nào trong bộ chọn # không? Hoặc có thể bạn chỉ định màu nội tuyến (vì lý do gì)?
Lý do tại sao quan trọng lại kém như vậy là vì nó có thể khó tìm thấy sau này. Có lẽ bạn có một tài sản quan trọng bị mắc kẹt ở đâu đó trong một tệp nhỏ trong phần tử giả - xin chúc mừng, bạn vừa biến nó thành miền tây hoang dã. Theo dõi tài sản đó sẽ là một điều khó khăn - nếu bạn thậm chí nhớ rằng bạn đã đặt nó ở đó.
2. Sử dụng Flexbox
Ví dụ:
.my-element-container {
display: flex;
justify-content: center;
align-items: center;
}Và
<div class="my-element-container">
<p>I'm centered!</p>
</div>
Đây là cách dễ nhất để căn giữa các phần tử trong css. Chúng ta không còn phải sử dụng các bảng ô đơn hoặc các số ma thuật nữa. Một màn hình đơn giản: flex; Là đủ để gợi lên một số phép thuật phát triển web.
Trừ khi bạn đang hỗ trợ IE8 (nếu bạn - tôi chỉ có thể cầu nguyện cho bạn) flexbox hoạt động trên tất cả các trình duyệt và hoạt động tốt. Tuy nhiên, Flexbox không hữu ích cho việc chỉ căn giữa các phần tử: nó hữu ích cho rất nhiều thứ và thực sự đáng để bạn dành thời gian tìm hiểu nó. Tôi khuyên mọi nhà phát triển giao diện người dùng nên đặt nó vào danh sách việc cần làm của họ để học flexbox. Nó sẽ giúp bạn tiết kiệm rất nhiều thời gian và nó nhanh chóng trở thành bản chất thứ hai.
Lưới CSS là một phần thưởng bổ sung và hữu ích để biết. Tuy nhiên, thông thường, tôi thấy sẽ hữu ích và ít mã hơn nếu chỉ sử dụng flexbox. Grid hữu ích hơn nhiều đối với bố cục (nếu bạn đang làm bố cục, thì nó xứng đáng với thời gian của bạn).
3. Phạm vi SCSS hoặc BEM
Tương tự như điểm trước, sử dụng mô hình xác định phạm vi thực sự giúp đảm bảo các lớp học của bạn được tổ chức và chỉ áp dụng khi bạn cần.
Mô hình xác định phạm vi là gì? Nó được sử dụng để tạo các lớp cụ thể hơn, vì vậy bạn sẽ không có hai tên giống nhau.
Ví dụ: có thể bạn có nhiều kiểu thẻ, nhưng bạn ít có khả năng xảy ra va chạm sản phẩm__product_card hoặc của:
.products { .product_card {} } //this type of nesting only works w/ SCSSMô hình xác định phạm vi BEM, ví dụ đầu tiên, như sau:
Khi phạm vi của bạn ngày càng hẹp, chỉ cần thêm dấu gạch dưới kép , rồi nhập tên lớp mới của bạn. Vì vậy, giả sử bạn có phần sản phẩm và thẻ sản phẩm trong phần đó. Bạn sẽ đặt tên cho nó
products__product_card .
Trong SCSS, bạn chỉ cần lồng các lớp. Bạn cũng có thể kết hợp SCSS và BEM hoặc sử dụng phạm vi kiểu SCSS (.products .product_card) trong CSS thông thường, nhưng tôi thấy sử dụng BEM hoặc SCSS tốt hơn. Tôi thường đi theo lộ trình SCSS, vì SCSS cung cấp rất nhiều lợi ích khác ngoài việc xác định phạm vi đơn giản.
Tuy nhiên, điều này không có nghĩa là bạn không sử dụng các lớp trợ giúp: lớp trợ giúp vẫn có thể cực kỳ hữu ích. Ví dụ: thêm lớp .error hoặc .centerer-container sẽ vẫn hữu ích ngay cả khi bạn đang sử dụng mô hình xác định phạm vi. Chỉ cần đảm bảo đặt tên cho lớp trợ giúp đủ chung chung để bạn không quên nó.
4. Helper Classes
Với việc Tailwind ngày càng phổ biến, sự gia tăng của các lớp trợ giúp CSS đang trở nên quá tải. Việc thêm lớp lỗi của tôi vào HTML của bạn sẽ trở nên đặc biệt hơn, thay vì phải tạo lớp lỗi của tôi và lớp của tôi.
Mặc dù điều này đi đôi chút với việc tách biệt các mối quan tâm, nhưng (bạn đang bỏ một số kiểu vào HTML của mình), nó giúp ích rất nhiều cho việc lặp lại mã. Trong một ví dụ BEM cổ điển, bạn đang thêm nền màu đỏ nhạt, đường viền màu đỏ và màu văn bản màu đỏ đậm vào phần tử lỗi của mình. Có thể bạn muốn điều đó được áp dụng cho thẻ lỗi, phương thức lỗi và bánh mì nướng lỗi - có thể bạn sẽ muốn trích xuất nó vào một lớp .error (hoặc, nếu bạn đang sử dụng SCSS, một lỗi mixin!) Và sau đó chỉ Nối nó vào các lớp học.
Những điều này là nơi SCSS thực sự bắt đầu giúp đỡ. Với một mixin, bạn có thể làm điều này và nướng nó thành tên lớp error để mã của bạn vẫn khô, nhưng bạn có thể dễ dàng mở rộng các lớp.
Đây là một cách tuyệt vời để tiết kiệm thời gian và giữ cho CSS DRY.
5. You Don’t Always Need a Framework
Nghe này: Tôi hiểu rồi - sử dụng React có thể rất hài lòng và nó giúp mang lại rất nhiều tương tác phong phú. Một số trang web sẽ không thể truy cập được nếu không có khung giao diện người dùng và chúng cực kỳ hữu ích cho những gì họ làm.
Nhưng để khóc không thành tiếng, bạn không cần React và 20 gói NPM cho một trang đích! Tôi hứa rằng tôi có thể viết trang đích bằng HTML và CSS nhanh hơn nhiều so với bạn có thể làm trong React. Nó chỉ là ít mã hơn và ít phức tạp hơn. React được xây dựng để quản lý trạng thái và tạo ra các tương tác phức tạp - khách hàng của tôi đọc UVP của tôi không phải là một tương tác phong phú và cũng không cần bất kỳ trạng thái nào.
Mặc dù có những trường hợp ngoại lệ (Có thể toàn bộ trang web của bạn là sản phẩm và trang đích chỉ là một phần duy nhất), trước khi bạn bắt đầu một dự án, hãy nghĩ về mục tiêu ngắn hạn của bạn là gì. Rất có thể, nếu bạn đang xây dựng một sản phẩm, mục tiêu của bạn là ra mắt và nhận phản hồi từ thị trường. Cách nhanh nhất để làm điều đó là tạo trang đích - và cách nhanh nhất để làm điều đó là sử dụng CSS và HTML thuần túy, với một số JS cơ bản cho một số tương tác
Bài viết gốc tại đây.
Hiện tại khóa học Web Frontend tại Techmaster Vietnam vẫn liên tục tuyển sinh các lớp tiếp theo. Và trong tình hình dịch bệnh phức tạp, lớp sẽ chuyển sang học hình thức trực tuyến có tương tác, thời lượng và chất lượng không đổi, vẫn đảm bảo việc làm cho học viên tốt nghiệp.
_Chi tiết khóa học: https://frontend.techmaster.vn/
Liên hệ tư vấn: Mr Thịnh - 0987273764 (zalo).
Bình luận