Một lớp tiện ích trong css là gì?
|
Gần đây, tôi đã suy nghĩ về cách viết CSS có thể mở rộng. Không nói nhiều về cách loại bỏ các hiệu ứng hấp dẫn, hoặc tận dụng lợi thế của các mô-đun mới nhất hoặc chơi các thủ thuật thông minh với bộ tiền xử lý — mà là cách tạo các biểu định kiểu sẽ duy trì mạch lạc, có thể duy trì, nhất quán và có thể mở rộng khi các dự án phát triển và thay đổi — và cách Show
Tôi đã đọc mọi thứ tôi có thể tìm thấy về chủ đề này — bao gồm một số nội dung rất hay. (Tôi đã tập hợp và có kế hoạch duy trì Danh sách đọc CSS có thể mở rộng để chia sẻ những gì tôi coi là tài nguyên quan trọng nhất. ) Nhưng có một câu hỏi đặc biệt cứ làm tôi băn khoăn, một câu hỏi hiếm khi được giải quyết và không bao giờ dài. Chính xác thì “các lớp tiện ích” phù hợp ở đâu? Mọi khung giao diện người dùng đều bao gồm một số lớp tiện ích, nhưng không có lớp nào đưa ra lời khuyên đáng kể về thời điểm hoặc lý do sử dụng chúng. Xem xét rằng bất kỳ khai báo CSS cụ thể nào cũng có thể được chuyển đổi thành một lớp tiện ích, liệu mọi khai báo có nên như vậy không? . “CSS nguyên tử,” anh ấy gọi nó là. ) Nếu không, chúng ta vẽ đường ở đâu; Hai mô hình CSS. Các lớp thành phần và tiện íchTất cả các cách tiếp cận CSS có thể mở rộng mà tôi đã học về đều chứng thực hai mô hình lớp riêng biệt. Tôi sẽ gọi chúng là các lớp thành phần và tiện ích Hai mô hình này đại diện cho các phương pháp tạo kiểu cơ bản khác nhau; (Tôi cho rằng sự phân đôi cũ hơn giữa các lớp “ngữ nghĩa” và “trình bày” đã lỗi thời. Tôi hoàn toàn đồng ý với Nicolas Gallagher rằng “mục đích chính của tên lớp là dùng để kết nối CSS và JavaScript” và “tên lớp nên truyền đạt thông tin hữu ích cho nhà phát triển. ” Cả hai lớp thành phần hoặc tiện ích đều có thể được coi là “trình bày” theo logic cũ và tôi sẽ không coi đó là một vấn đề. ) Các lớp thành phầnMột lớp thành phần đóng gói các khai báo cần thiết để tạo kiểu cho một phần tử trong ngữ cảnh của một thành phần HTML chỉ đơn giản là tham chiếu các lớp của thành phần đó và có thể là một số công cụ sửa đổi để triển khai mẫu. Bootstrap's Sử dụng các lớp thành phần (và đặt tên SUIT), một số đánh dấu điều hướng có thể trông như thế này Lớp Hãy nhớ rằng cái mà tôi gọi là "các thành phần" có thể ở mức độ chi tiết tùy theo yêu cầu của tình huống và "các thành phần" có thể chứa các "thành phần" khác. ” Chúng chỉ đơn giản là các mẫu nhất quán, có thể tái sử dụng và có thể giải quyết mọi cấp độ của thiết kế - nguyên tử, phân tử, sinh vật, mẫu hoặc trang, theo thuật ngữ của Thiết kế nguyên tử. Ngoài ra (đồng ý với SMACSS), các thành phần có thể được sắp xếp thành các danh mục nhắm đến các trách nhiệm khác nhau — ví dụ: kiểu chữ (như lớp học tiện íchMột lớp tiện ích áp dụng một quy tắc duy nhất hoặc một mẫu chung, rất đơn giản. Hãy suy nghĩ về các quy tắc đơn lẻ Các lớp tiện ích càng đơn giản, có thể tổng hợp và có thể tái sử dụng càng tốt; . Chúng phải được phân loại nghiêm ngặt và tập trung chặt chẽ, nếu không chúng sẽ mất đi… tiện ích — lý do tồn tại của chúng. Họ phải là hình ảnh thu nhỏ của nguyên tắc trách nhiệm duy nhất. Không giống như một lớp thành phần như (Nếu bạn hoàn toàn không chắc ý của tôi về “lớp tiện ích”, hãy xem một số bộ sưu tập. Foundation, Bootstrap, UIKit, GroundworkCSS và SUIT. ) Hơn cả các lớp thành phần, các lớp tiện ích đưa kiểu dáng trực tiếp vào đánh dấu, thậm chí không cần trung gian của một cái tên. Các mẫu thiết kế có thể là tập hợp ẩn danh của các kiểu được chia sẻ trên toàn cầu. Vì vậy, nếu bạn muốn thay đổi hình thức của một phần tử được tạo kiểu bằng các lớp tiện ích, bạn sẽ phải thay đổi đánh dấu - cụ thể là danh sách lớp - không phải biểu định kiểu Thông thường, người ta gợi ý hoặc giả định rằng Chúa đã tạo ra các lớp tiện ích cho các tình huống đơn giản yêu cầu rất ít quy tắc. Bạn chỉ muốn một nút nổi bên phải, một tiêu đề ở giữa, một màu khác, văn bản ẩn. Tại sao lại đặt tên riêng cho một phần tử, bộ chọn riêng, bộ quy tắc riêng của nó trong một số biểu định kiểu — tại sao lại khái niệm hóa một “thành phần” cho nó - khi tất cả những gì bạn muốn là áp dụng một mẫu rất phổ biến, có thể là rất cơ bản? Tuy nhiên, về mặt lý thuyết, toàn bộ thành phần và toàn bộ trang web có thể được xây dựng bằng cách ghép các lớp tiện ích lại với nhau. Chỉ dựa vào các lớp tiện ích, phần đánh dấu điều hướng phía trên có thể trông như thế này So sánh và đối chiếu nhiều hơn
Một số lợi ích bị cáo buộc của các lớp tiện íchTôi nghĩ rằng mô hình lớp thành phần là cách sử dụng CSS truyền thống, đơn giản hơn. Áp dụng một lớp riêng biệt và liên kết lớp đó với một số kiểu. Thêm, sửa đổi và xóa khai báo trong biểu định kiểu. Và như thế. Mặc dù bạn có thể không bao giờ đạt được “Tách biệt mối quan tâm” huyền thoại - và thậm chí có thể không quan tâm đến - bạn sẽ tiến gần hơn đến nó và gặt hái một số phần thưởng nếu bạn sử dụng các lớp thành phần nhiều hơn, ít lớp tiện ích hơn Vì vậy, nó đáng để nói rõ và đánh giá những gì mọi người coi là lợi ích của các lớp tiện ích. Tại sao chúng ta lại sử dụng chúng? 1. KHÔ và nhất quánÁp dụng Tuy nhiên, lợi ích này là không đáng kể nếu bạn sử dụng bộ tiền xử lý. Việc sử dụng lại các lớp quy tắc đơn như 2. Kích thước tập tinBằng cách loại bỏ sự lặp lại ra khỏi CSS, các lớp tiện ích giảm kích thước tệp CSS Tiền xử lý không thể phù hợp với lợi ích này. Việc sử dụng mixin và biến để lặp lại các mẫu và giá trị sẽ dẫn đến tính KHÔ và nhất quán nhưng không làm giảm kích thước của CSS được phân phối. mỗi mixin lặp lại và biến tạo ra các khai báo lặp lại Sass 3. kinh nghiệmKhông có câu hỏi rằng các lớp tiện ích rất tiện dụng, cho phép các tác giả HTML áp dụng các kiểu trực tiếp hơn. Đặc biệt đối với những phần tử chỉ yêu cầu một hoặc hai quy tắc và không đóng vai trò rõ ràng trong một số cấu trúc thành phần — tại sao lại thêm một lớp trừu tượng? Nếu bạn di chuyển nhanh chóng từ dự án này sang dự án khác, một tập hợp đầy đủ các lớp tiện ích — hoặc phương pháp tạo chúng khi cần — có thể tăng tốc công việc của bạn. Và có thể các lớp tiện ích có thể giúp các kỹ sư phụ trợ hoặc các cộng tác viên khác hoàn thành công việc mà không cần sửa đổi bất kỳ biểu định kiểu nào Không thể phủ nhận lợi ích này; Một số mối nguy hiểm của các lớp tiện íchMỗi mối nguy hiểm dưới đây sẽ là nhỏ, thậm chí tầm thường, nếu bạn sử dụng các lớp tiện ích một cách tiết kiệm. Nhưng bạn càng dựa vào các lớp tiện ích, thì những mối nguy hiểm này càng trở nên nghiêm trọng hơn. 1. Xuất hiện không ổn địnhKhi sự xuất hiện của một phần tử không cố định, việc phụ thuộc vào các lớp tiện ích có thể trở nên rắc rối. Thiết kế đáp ứng là một trong những trường hợp như vậy. Ví dụ: nếu mọi thứ nổi ngay ở một số chiều rộng nhưng không phải ở các chiều rộng khác, các lớp tiện ích khác nhau sẽ phải được tạo để nhắm mục tiêu các chiều rộng khác nhau - chẳng hạn như Bạn biết mọi thứ sẽ xuống dốc nếu bạn kết thúc với các phần tử mang lớp tiện ích Các vấn đề tương tự sẽ phát sinh nếu dự án của bạn liên quan đến các biến thể theo chủ đề dựa trên cùng một đánh dấu. Trong những trường hợp như vậy, sự trừu tượng hóa của các lớp thành phần có thể cho phép tính linh hoạt mà tính trực tiếp của các lớp tiện ích ngăn cản 2. Khả năng đọc và khả năng sử dụng lại của các mối quan hệ thành phầnBạn càng dựa vào các lớp tiện ích, thì càng ít yếu tố thiết kế của bạn được liên kết rõ ràng với các thành phần, với các tên lớp phản ánh mối quan hệ của chúng với nhau (như 3. Khuyến khích các kiểu một lầnNếu không có các lớp thành phần, bất kỳ sự xuất hiện lặp lại nào của một mẫu có thể giống như một sự triển khai lại hơn là tái sử dụng - điều này có thể dẫn đến những điều chỉnh nhỏ ở đây và ở đó, các biến thể có vẻ phù hợp với thời điểm nhưng lại dẫn đến sự không nhất quán. Tại một số điểm, bạn có thể nhận ra rằng tập hợp rộng rãi các lớp tiện ích của bạn đã cho các tác giả HTML quá nhiều tự do để phân kỳ, thiên về tính tiện dụng hơn kiến trúc và khả năng bảo trì mã của bạn bị ảnh hưởng. 4. Quá nhiều quyết địnhVới các lớp tiện ích, các tác giả HTML có thể áp dụng cụm kiểu phù hợp cho các thành phần phù hợp. Mặt khác, một hệ thống lớp thành phần tốt có thể cho phép các tác giả tạo HTML mà không cần biết hoặc không quan tâm nhiều đến lý do tại sao cuối cùng nó lại trông như thế nào. Mục tiêu quan trọng của bất kỳ phương pháp hệ thống nào là giảm bớt việc ra quyết định tại chỗ — và các lớp thành phần làm điều đó tốt hơn các lớp tiện ích Kết luận, đơn thuốc, phỏng đoánViệc sử dụng nhẹ các lớp tiện ích hạn chế, đối với các mẫu mà bạn biết sẽ không bao giờ thay đổi, sẽ không gây ra bất kỳ sự cố nào không thể sửa chữa dễ dàng — bằng cách xóa lớp tiện ích khi cần, chuyển gánh nặng kiểu dáng trở lại các biểu định kiểu Và có một số trường hợp cụ thể khi phụ thuộc nhiều vào các lớp tiện ích - xây dựng các thành phần hoặc trang hoàn chỉnh chỉ với chúng - có thể ổn
Tuy nhiên, trong hầu hết các tình huống - đặc biệt là đối với các dự án quy mô lớn và các thành phần có thể tái sử dụng - đối với tôi, có vẻ như lợi ích của các lớp thành phần hệ thống sẽ chứng tỏ có giá trị hơn so với hiệu quả của các lớp tiện ích. Bằng cách sử dụng các lớp thành phần, bạn có được giá trị giao tiếp của việc đặt tên cho các nhóm thành phần và các mối quan hệ; Lợi thế của việc sử dụng các lớp tiện ích là gì?Các lớp tiện ích có thể giúp bạn giảm sự lặp lại trong CSS và sự bất thường vô ý trong văn phong của bạn . Tuy nhiên, lợi ích này là không đáng kể nếu bạn sử dụng bộ tiền xử lý. Việc sử dụng lại các lớp quy tắc đơn như. float-left chỉ chuyển sự lặp lại từ CSS sang HTML.
Các lớp tiện ích trong khung giao diện người dùng là gì?Các tiện ích trong Sass là gì?Thư viện SASS cung cấp một số hàm, mixin và lớp phổ biến để phát triển giao diện người dùng nhanh hơn . Nó đã được sử dụng hơn 5 năm nay cho các dự án khác nhau và đang được phát triển liên tục. Thư viện tuân theo một quy ước không gian tên phổ biến để mọi mixin hoặc lớp đều có tiền tố là u-.
Các lớp tiện ích trong vật chất hóa là gì?Căn chỉnh. Căn dọc, Căn văn bản, Nổi nhanh , chúng được dùng để căn chỉnh nội dung của HTML một cách dễ dàng. Căn dọc. Đặt tên lớp là “valign-wrapper” để căn giữa nội dung HTML theo chiều dọc cho vùng chứa chứa các phần tử sẽ được căn chỉnh theo chiều dọc. |
