Sự khác biệt giữa bản V1 và V2

Những thay đổi quan trọng trong phiên bản v2.

Cập nhật bản trong V2

Mọi thứ được giải thích rõ ràng hơn trong V2

Chúng tôi chia sẽ các quy tắc theo chủ đề.

Thay đổi quan trọng nhất ở phiên bản v2 là cách chúng tôi giải thích những khái niệm của Client-First. V1 thiếu tổ chức nội dung và giải thích rõ ràng cho một số chủ đề.

V2 giới thiệu một phương pháp tổ chức nội dung mới để giúp chúng ta hiểu rõ hơn về Client-First. Mỗi chủ đề sẽ được giải thích chính xác hơn.

Những chủ đề thiết yếu nhất sẽ được được đặt lên là “Quy tắc" –

Folders

Folders (thư mục) sẽ thay đổi cách chúng ta hình dung về các class trong dự án Webflow của mình.

Folders trong Client-First cho phép chúng ta hệ thống hoá các class theo một cấu trúc linh hoạt.

Khi đặt tên class, chúng ta có thể sử dụng kí tự gạch dưới để tạo 1 folder. Những class tiện lợi sẽ được sắp xếp trong đó bằng kí hiệu gạch ngang.

Folders sẽ chỉ hoạt động khi đi kèm với Client-First + Finsweet Extension. Tìm hiểu thêm trong trang chi tiết về Folders

Các Component được định nghĩa rõ ràng hơn

Trong bản V2, chúng ta sẽ cụ thể hơn khi sử dụng component - và cụ hơn nữa khi sử dụng kí tự gạch dưới!

Bản V1
Một class có chứa kí tự gạch dưới = component

Bản V2 kèm tính năng Folder
Một class có chứa kí tự gạch dưới = folder
[folder-name]_component = component

Việc sử dụng kí tự gạch dưới trong tên folder không đồng nghĩa với việc folder đó là một component. Chúng ta sử dụng kí tự gạch dưới để nhóm và tổ chức lại các phần tử trong Folders.

Component giờ sẽ được phân định rõ ràng. Nếu chúng ta muốn một phần tử được coi là component, chúng ta sẽ sử dụng từ “component" trong tên phần tử này.

Tìm hiểu thêm về Quy tắc cho Folders

Các loại Class được định nghĩa rõ ràng hơn

Custom class, utility class, global class, combo class đều được định nghĩa và giải thích rõ ràng hơn trong Quy tắc sử dụng class 1.

Bằng việc hiểu rõ những kiểu class này, chúng ta sẽ có thể đưa ra những quyết định tối ưu nhất khi làm việc.

page-padding được đổi tên thành padding-global

Giá trị padding quan trọng nhất trong project của chúng ta được đổi tên thành padding-global. Việc đổi tên này giúp chúng ta quản lý hệ thống folder tốt hơn.

Bây giờ, thay vì để class ^padding trong folder page-, chúng ta sẽ để class đó trong folder padding-.

Tìm hiểu thêm ở Quy tắc cho cấu trúc chung

section-[identifier] được đổi tên thành section_[identifier]

Các section class giờ sẽ chứa kí tự gạch dưới thay vì gạch ngang.

Với cập nhật về Folder, các ultility class sẽ chỉ sử dụng kí tự gạch ngang. Các custom class sẽ dùng kí tự gạch dưới. Các classes cho section được phân loại là “custom classes", nghĩa là chúng sẽ chứa ký tự gạch dưới trong tên.

Với kí tự gạch dưới, chúng ta sẽ đặt các section class vào hệ thống folder của custom class.

Tất cả section class đều sẽ ở trong folder section. Tìm hiểu thêm ở Quy tắc cho cấu trúc chung

Class padding-section-[size] được thêm vào để thiết lập section padding cho toàn project

Để quản lý khoảng cách chung cho toàn project, chúng tôi đã thêm vào một hệ thống ultility class mới. Việc cập nhật hệ thống khoảng cách giúp chúng ta giảm được số lựa chọn về khoảng cách cho các section, đồng thời thống nhất lại chúng cho toàn bộ project.

Tìm hiểu thêm ở Quy tắc cho cấu trúc chung

Class padding-section-[size] mới (3 classes) — copy to clipboard.

Class heading-style-[h#] giúp quản lý style cho các Heading

Khi một loại thẻ Heading mang styles của một loại thẻ Heading khác, chúng ta có thể sử dụng class heading-style-[h#].

Ví dụ, nếu chúng ta cần thẻ ^H2 để tối ưu SEO, nhưng phần text lại mang styles của thẻ ^H3, chúng ta sẽ sử dụng class heading-style-h3 lên thẻ ^H2 này để thay đổi style của thẻ mà vẫn giữ nguyên thứ tự các thẻ HTML.

Tìm hiểu thêm ở Quy tắc cho Typography.

Thêm các classes heading-style-[h#] mới (6 classes) — copy to clipboard.

**Utility classes display-inlineflex mới**

Thêm vào thuộc tính ^{display: inline-flex}, thuộc tính này không có sẵn trong các thuộc tính CSS mặc định của Webflow.

Trường hợp sử dụng: Thuộc tính CSS ^{display: flex} thường rất quan trọng và được sử dụng nhiều trong project của chúng ta. Tuy nhiên ^{display: flex} sẽ khiến các elements chiếm hết 100% khoảng trống có sẵn. Việc này khiến chúng ta khó sử dụng flexbox cho buttons. ^{display: inline-flex} cho phép các elements có thuộc tính inline (trên cùng 1 dòng), và vẫn cho phép sử dụng flex bên trong các elements đó.‍

Tìm hiểu thêm ở Hệ thống Utility class.

Thêm classes display-inlineflex mới (1 class) — copy to clipboard.

Loại bỏ utility class show-

Chúng tôi đã loại bỏ các utility class show-. Đây là những class thêm giá trị ^{display: block} ở các levels responsive khác nhau.

Chúng tôi nhận ra giới hạn của những classes show- này, chúng chỉ hoạt động tốt trong một số ít trường hợp, và đôi khi gây ra những vấn đề responsive không ngờ tới.

Thay vì sử dụng những classes "show" này lên các elements, chúng ta có thể sử dụng giá trị ^display trực tiếp lên custom class.

Ngoài ra, chúng ta cũng có thể thêm thuộc tính ^display vào một combo class. Ví dụ, modal_componentis-visible-tablet.

Những quy tắc mới cho spacing

V2 mở rộng cách chúng ta sử dụng các utility và custom classes để quản lý spacing cho elements trong project. Chúng tôi cũng thêm những phương pháp tạo spacing mới.

Spacing với hệ thống utility class

Spacing wrappers (V1)
Spacing blocks (mới trong bản V2)

Spacing với custom classes

Trực tiếp lên element (V1)
Sử dụng CSS Grid lên thẻ parent (mới trong bản V2)

Các page mới trong bản V2

V2 thêm những pages nội dung mới không hề có trong V1

Giới thiệu giới thiệu những chủ đề quan trọng nhất của Client-First.
Lộ trình học cung cấp một lộ trình 7 ngày cho việc học Client-First.
Tài liệu lớn tạo động lực cho việc nghiên cứu Client-First một cách đầy đủ nhất.
Folders và Quy tắc cho Folders giải thích tường tận về phương pháp để hình dung về các class của chúng tôi.

Đổi từ Client-first sang Client-First

Finsweet mới thay đổi logo gần đây. Logo mới của chúng tôi sửa chữ “f" sang dạng viết hoa “F".

Chúng tôi cũng cập nhật tương tự cho Client-First.

Client-first phiên bản V1 sử dụng kí tự viết thường "f". Trong bản V2, chúng tôi sẽ cập nhật kí tự F này cho brand. Thay đổi này dẫn tới việc đổi Client-first thành Client-First.

Bạn muốn tìm hiểu thêm lí do Finsweet đổi từ f sang F? Xem livestream của chúng tôi tại đây.