Các loại Class
Utility class
Một class được tạo từ một vài thuộc tính CSS cụ thể, có thể được sử dụng cho các elements trong toàn project.
Tất cả các utility class về bản chất là các global class. Khái niệm về utility class là một class giúp áp dụng các thuộc tính CSS lên toàn dự án.
Ví dụ, bên trong project khởi đầu của Client-First, utility class background-color-gray giúp chúng ta tổ chức và quản lý một màu background thông dụng được sử dụng trong toàn project.
Chúng tôi đã thêm vào utility class font-size-large trong project khởi đầu của Client-First để quản lý và đồng nhất kích cỡ của typography trong toàn project.
Utility class không chứa kí tự gạch dưới trong tên.
Custom class
Một class được tạo cho một component, page, một nhóm các element hoặc một element cụ thể.
Chúng tôi gọi những class này là “custom” vì chúng là những class tùy chỉnh ngoài nhóm utility class. Custom class nên được tạo ra khi utility class không thể hoặc không nên được sử dụng trên một phần tử. Custom class được tạo ra để dành riêng cho phần tử đó.
Ví dụ, một class để style một phần tử cụ thể trong phần header của toàn project sẽ được đặt tên là header_background-layer.
Ví dụ, một class để style một phần tử cụ thể trong một testimonial slide sẽ được đặt tên là testimonial-slider_headshot.
Trong Client-First, custom class sử dụng kí tự gạch dưới trong tên.
Global class
Một phân loại của class. Một global class được thiết kế để sử dụng trong toàn project. Cả utility classes lẫn custom classes đều có thể là global classes.
Một global class áp dụng các styles được thống nhất trong toàn project. Một global class không được sử dụng cho một phần tử cụ thể.
“Global” có nghĩa là ở mọi nơi và ở bất kì đâu trong project.
Tất cả utility class đều là global class. Bản chất của Utility class là global class.
Ví dụ, những class margin và padding đều là global utility class. margin-large có giá trị margin là 3rem. Khi chúng ta thay đổi giá trị này thành 4rem, tất cả phần từ chứa margin-large đều sẽ được cập nhật thành 4rem.
margin-large kiểm soát giá trị margin trong toàn project. Chúng ta có thể tạo ra những thay đổi nhanh chóng, có tác động đến toàn project nếu biết cách sử dụng global utility classes hợp lý
Các global class không bị giới hạn ở utility class. Global class giờ đã được định nghĩa cụ thể là bất ký class nào có khả năng quản lý toàn cục các style trong cả project.
Trong Client-First v2, chúng tôi sẽ giải thích kĩ hơn và khuyến khích việc sử dụng các custom class như là global class.
Ví dụ, faq_item có thể được sử dụng như một global custom class. Chúng ta có thể có rất nhiều FAQ section trong cả website, và class faq_item được sử dụng để quản lý tất cả các FAQ item này trong toàn project.
Ví dụ, header_content có thể được sử dụng như một global custom class. Chúng ta có thể có một component header trong mỗi page của project. Class kể trên sẽ được sử dụng để quản lý và tuỳ chỉnh thẻ bao bọc phần content này trong toàn bộ project.
Combo class
Combo class là một biến thể của một base class. Combo class kế thừa style từ base class và thêm vào một vài thay đổi về style cho base class đó.
Chúng ta định nghĩa “base class” là class đầu tiên trong một list các combo class được chồng lên nhau. Các class được thêm sau base class sẽ giúp tạo ra những phiên bản khác cho base class.
Những class được thêm sau vào, giúp tao ra những phiên bản mới này sẽ chứa tiền tố is- trong tên.
Combo class được thêm vào này sẽ chỉ hoạt động khi được kết hợp với base class đi trước đó. Trong video bên dưới, bạn hãy để ý rằng class is-blue không hề hoạt động riêng lẻ. Nó chỉ có tác dụng khi được thêm sau base class button .
Combo class cũng có thể được tạo từ một custom hoặc utility base class. Trong ví dụ trên, button is-blue là một utility class được sử dụng như combo class.
Chúng ta có thể tạo một combo class cho custom class. Ví dụ như: header_content is-home. Đây là một biến thể của custom class header_content.
Tiền tố -is
Trong Client-First, chúng ta sẽ định nghĩa combo class dựa trên tiền tố is-. Khi thấy một class chứa is- chúng ta sẽ hiểu class này được tạo ra dưới dạng combo class cho một base class nào đó.
Đừng deep stack các class
Client-First có một quy tắc chung — Đừng xếp chồng sâu (deep stack) các class.
Deep stack — khi một element được xếp chồng rất nhiều class trên nó.
Deep stacking — hành động xếp chồng nhiều class trên một element.
Đây là một thuật ngữ của Client-First để chỉ ra những vấn đề thường thấy khi xếp chồng nhiều class trong giao diện Webflow Designer.
Client-First không khuyến khích việc deep stacking trong Webflow.
Ví dụ:
Với Client-First, chúng ta muốn tránh việc deep stacking như ví dụ trên. Chúng ta sẽ tìm hiểu kĩ hơn về việc tránh deep stacking xuyên suốt tài liệu này.
Dưới đây là một list những lí do:
Lí do chúng tôi không deep stack.
Mất khả năng sắp xếp lại các style trong Designer styles panel.
Chúng ta không có quyền kiểm soát hoàn toàn khi có quá nhiều class xếp chồng lên nhau trong Webflow. Chúng ta không thể sắp xếp lại chúng hoặc quản lý chúng đúng cách bên trong trình Designer. Nếu chúng ta cần thay đổi hoặc loại bỏ một class trong một list xếp chồng, chúng ta phải xóa tất cả các class khỏi list này trước khi truy cập được các class trước đó.
Trong ví dụ dưới, để thay đổi text weight từ text-weight-medium sang text-weight-bold, chúng ta sẽ phải xoá tất cả một vài class trong list này.:
Vấn đề này càng trở nên nghiêm trọng khi chúng ta muốn chỉnh sửa ở những breakpoint thấp hơn. Chúng ta thậm chí không còn nhiều khả năng chỉnh sửa khi ở ngoài breakpoint gốc.
Quy trình làm việc chậm chạp hơn. Mỗi thay đổi nhỏ đều cần đi qua nhiều bước hơn.
Quy trình được kể trên rất tốn thời gian. Nếu đây là quy tắc được sử dụng trong cách làm việc của chúng ta, việc xây dựng và bảo trì một project sẽ tốn nhiều thời gian hơn.
Tăng độ khó cho việc học tập
Chúng tôi tin rằng việc deep stacking sẽ là một quy trình khó để học hơn. Bạn sẽ cần phải hiểu rất sâu về chức năng của từng class cũng như cách để quản lý chúng.
Viết CSS trong Webflow rất nhanh
Với Webflow Styles panel, việc viết CSS thật ra rất nhanh và hiệu quả. Chúng ta có thể tạo một class và thêm những thuộc tính CSS cho class này một cách trực quan. Quy trình này rất nhanh trong Webflow, và chúng ta có thể tận dụng nó tối đa với Client-First.
Việc tối ưu kích thước file CSS không quá ấn tượng
Khi chỉ sử dụng các global class trong một project, chúng ta có thể giảm dung lượng file CSS. Việc tối ưu một chút về mặt dung lượng này không thể so bì với những lợi ích mà việc sử dụng custom class có thể đem lại trong Webflow.
Tìm hiểu thêm về deep stacking ở đây:
Chúng tôi giải thích kĩ hơn từng luận điểm này ở Quy tắc sử dụng class 2.
Sử dụng custom classes
Custom class là một phương pháp rất mạnh mẽ và được khuyên dùng trong Client-First.
Chúng ta sử dụng custom class cho những mục đích sau:
- Dễ dàng chỉnh sửa cho từng element cụ thể. Nếu chúng ta có một hệ thống custom class gọn gàng, việc tạo những thay đổi nhanh chóng cho từng element và component trong project sẽ rất dễ dàng.
- Để tránh việc dùng utility class mọi nơi trong toàn project. Hệ thống utility class rất mạnh mẽ, nhưng không nên được sử dụng ở mọi nơi. Khi việc sử dụng utility class khiến project trở nên phức tạp hơn, việc sử dụng custom class sẽ được khuyến khích hơn.
- Để tránh việc deep stacking. Chúng ta có thể tránh deep stacking nhiều class bằng một custom class duy nhất.
Ví dụ về Background texture
Ví dụ: khi chúng ta muốn thay đổi hoạ tiết nền (background texture) của một phần tử.
Chúng ta có thể sử dụng ba class xếp chồng lên nhau. Ví dụ: background-absolute + fit-size + opacity-low. Khi kết hợp, những class này sẽ tạo ra kết quả chúng ta muốn.
Thay vì xếp chồng nhiều class, chúng ta cũng có thể tạo một custom class gọi là services-item_background-texture. Chỉ bằng việc đọc tên class này, chúng ta có thể hiểu đây là class dành cho việc “tạo hoạ tiết nền cho một services item”.
Việc chỉnh sửa cho custom class này sẽ nhanh gọn hơn rất nhiều so với sắp xếp các class xếp chồng. Nếu chúng ta cần một style độc nhất, chúng ta có thể sử dụng một custom class chứa style chúng ta cần.
Phương pháp CSS truyền thống
Khi viết CSS kiểu truyền thống, việc sử dụng class xếp chồng sẽ là một giải pháp tốt hơn. Việc xếp chồng các class sẽ giảm lượng CSS chúng ta cần viết, giúp đẩy nhanh quá trình lập trình.
Tuy nhiên, chúng ta đang không viết CSS kiểu truyền thống. Chúng ta đang làm việc với Webflow. Client-First là một tập hợp những quy tắc được tạo ra dành riêng cho Webflow.
Trong Webflow, chúng tôi tin việc tạo và quản lý các custom class nhanh và tốn ít công sức hơn quản lý một tập các class được xếp chồng.
Chúng tôi giải thích kĩ hơn về việc tạo các custom class trong Quy tắc sử dụng class 2.
Phương pháp đặt tên
Cách đặt tên rõ ràng và cụ thể cho các class.
Một lập trình viên Webflow, khách hàng, hoặc bất kì ai cũng nên hiểu rõ tác dụng của class dựa trên tên class, kể cả khi họ chưa từng nghe đến khái niệm Client-First trước đó.
Mindset đặt tên
Mục tiêu của phương thức đặt tên trong Client-First
- Giúp một người không biết về kỹ thuật có thể quản lý được website
- Chia sẻ thông tin một cách rõ ràng, dễ hiểu, và đầy đủ nhất
- Giúp người đọc hiểu rõ bối cảnh cũng như mục đích của class
- Không viết tắt, không rút gọn, và không khó hiểu
- Cung cấp nhiều thông tin nhất có thể về sự tương quan của class với toàn bộ trang web
- Tạo ra tên gọi dựa trên tiền tố và các kỹ thuật sắp xếp từ khoá
- Giúp người đọc hình dung rõ ràng mục đích của class chỉ qua tên gọi
Những câu hỏi quan trọng khi đặt tên class
Tên class cần thể hiện rõ tác dụng của class đó. Khi đặt tên cho một class, chúng ta cần hỏi bản thân những câu sau:
- “Class này đang làm gì trong project"
- “Mục đích của class trong project"
- “Làm thế nào để miêu tả ngữ cảnh sử dụng class trong project tốt nhất"
Tên của một class cần trả lời được những câu hỏi trên.
Tên gọi của class cần thể hiện rõ ràng tác dụng và mục đích của mình đến lập trình viên Webflow, khách hàng, hoặc bất kỳ người sử dụng nào kể cả khi họ không có kinh nghiệm với Client-First.
Sử dụng tên và những từ khoá ý nghĩa
Một từ khoá tốt sẽ giúp chúng ta hiểu ngữ nghĩa vai trò của một class/element. Việc mô tả kĩ nhất có thể khi đặt tên sẽ giúp việc quản lý dễ hơn về sau.
Sử dụng từ khoá và cách đặt tên rõ ràng là những nguyên tắc cốt lõi của Client-First. Mỗi tên class sẽ phục vụ một mục đích có ý nghĩa. Chúng ta nên cung cấp cho bất kì ai vào project càng nhiều ngữ nghĩa vào mục đích của từng class.
Từ khoá đi từ khái quát cho đến cụ thể trong từng tên class
Hãy lấy text-size-large làm ví dụ.
Từ khoá chung nhất trong tên class này là text. Từ khoá này cho chúng ta biết class này có liên quan đến một element về chữ.
size cho biết chúng ta đang tuỳ chỉnh kích cỡ của chữ. Từ “size” cụ thể hơn vì nó tập trung vào một thuộc tính CSS của chữ — font-size.
Cuối cùng ta có large, cung cấp cho ta thông tin cụ thể hơn về giá trị của về kích cỡ của chữ. Đó là một kiểu chữ có kích thước lớn.
Lưu ý rằng chúng ta không đặt tên class này là large-size-text. Tuy tương đương về mặt ngữ nghĩa với text-size-large, có một vài lợi ích đặc biệt trong Client-First khi chúng ta sử dụng phương pháp đặt tên class từ-khái-quát-đến-cụ-thể. Chúng ta có thể tìm kiếm các class một cách thông minh hơn và tổ chức các Folder gọn gàng hơn. Chúng ta sẽ tìm hiểu thêm xuyên suốt tài liệu này.
Hãy xem một ví dụ sử dụng custom class,team-list_headshot-wrapper.
Tên folder sẽ là team-list_, điều này cho chúng ta biết element này có liên quan đến một trang về team hoặc section về team, và là một danh sách. “Team list” là tên nhóm chứa những yếu tố cụ thể này.
headshot đi vào chi tiết hơn và cho chúng ta biết nó có liên quan đến element headshot trong danh sách team.
wrapper lại càng cụ thể hơn khi cho chúng ta biết đây là thẻ chứa những ảnh headshot này.
Việc đọc tên class team-list_headshot-wrapper rất rõ ràng và hợp lý, kể cả khi người dùng không hiểu về phần CSS phía sau. Người dùng sẽ hiểu việc chỉnh sửa class này sẽ tác động đến phần team list headhost. Đây là một gợi ý hoàn hảo cho người tiếp theo sử dụng project của chúng ta.
Giờ hãy tưởng tượng việc thêm các element trong phần headshot wrapper. Chúng ta có thể duy trì project một cách tổ chức với phương pháp đặt tên từ-khái-quát-đến-cụ-thể.
team-list_headshot-wrapper
team-list_headshot-image
team-list_headshot-texture-layer
team-list_headshot-background
Danh sách các class chúng ta sử dụng cho team list sẽ rất gọn gàng và hợp lý trong toàn project. Phương pháp đặt tên này cũng được tích hợp rất tốt vào tính năng Folders của chúng tôi.