Quy mô hoạt động như thế nào trong CSS?

Question

Chúng ta đã đi một chặng đường dài từ bố cục dựa trên bảng đến thiết kế web đáp ứng và giờ đây đang bước vào kỷ nguyên mới của bố cục thích ứng được hỗ trợ bởi các tính năng CSS hiện đại

Nội dung chính Show

Thời gian trước CSS
Biểu định kiểu và phân tách mối quan tâm
Tìm ra các phương pháp hay nhất
Tại sao CSS khó quản lý trên quy mô lớn
Không gian tên toàn cầu
Đặt tên cho mọi thứ thật khó
Tái cấu trúc CSS rất khó
Gỡ lỗi CSS rất khó
Thuần hóa độ phức tạp với kiến trúc CSS
OOCSS. CSS hướng đối tượng
SMACSS. CSS có thể mở rộng và mô-đun
BEM. Khối, Phần tử, Công cụ sửa đổi
ITCSS. Tam giác ngược
Suy nghĩ lại về việc tách biệt các mối quan tâm
kiểu nội tuyến
CSS trong JS
Mô-đun CSS
Các phương pháp hay nhất về CSS đầy thách thức
Sự trỗi dậy của Tailwind
Các nguyên tắc cung cấp năng lượng cho Tailwind
Trì hoãn việc đặt tên cho mọi thứ
Trừu tượng khi đúng thời điểm
Tự tin tái cấu trúc
Tránh mã chết
Thu hẹp khoảng cách thiết kế
suy nghĩ kết luận
Quy mô hoạt động như thế nào trong CSS?
Tôi có thể sử dụng CSS quy mô biến đổi không?
Điều gì là cần thiết để giúp xác định quy mô của một yếu tố?

Quản lý và tổ chức CSS luôn là một thách thức, khó tìm được sự đồng thuận

Trong bài đăng này, chúng ta sẽ hiểu sâu hơn về CSS bằng cách đi sâu vào các vấn đề cơ bản gây khó khăn cho việc mở rộng quy mô

Chúng tôi sẽ hiểu sự phát triển của các phương pháp hay nhất về CSS khác nhau đã xuất hiện và thay đổi theo thời gian

Cuối cùng, chúng ta sẽ nắm rõ các phương pháp trước đây để nhân rộng CSS trên các dự án lớn và cách các công cụ phổ biến như Tailwind và một loạt công cụ khác giải quyết các vấn đề này theo những cách phản trực giác

Thời gian trước CSS

Ban đầu, web chỉ có HTML. Chúng tôi đã viết hoa toàn bộ và chúng tôi đã tạo kiểu cho các trang bằng cách sử dụng các thuộc tính trực tiếp trên phần đánh dấu

  <BODY>
    <P SIZE="8" COLOR="RED">LOUD NOISESP>
  BODY>

Đây là thời kỳ đen tối cho những người muốn trang thời trang

Bên cạnh số lượng hạn chế các kiểu có sẵn, một hạn chế rõ ràng là tất cả các bản sao cần thiết

Một ví dụ điển hình về web trong khoảng thời gian này là trang web cũ tốt Space Jam

Bây giờ một số người có thể đang nghĩ “trông giống như các đạo cụ mà tôi chuyển vào thư viện thành phần của mình. ” Như chúng ta sẽ thấy ở phần sau, mọi thứ thường diễn ra theo vòng tròn với một bước ngoặt trong chu kỳ đổi mới

Biểu định kiểu và phân tách mối quan tâm

CSS đã tham gia vào trò chơi và giống như nhiều đổi mới được sinh ra từ các vấn đề khó khăn trước đây, giờ đây chúng tôi có thể loại bỏ tất cả sự trùng lặp đó

Bảng định kiểu cho phép chúng tôi định kiểu trang theo cách khai báo, ảnh hưởng đến các phần tử rộng lớn với rất ít mã

p {
  color: red;
}

Giờ đây, chúng tôi có thể nghĩ về cấu trúc nội dung cũng như hình thức và bố cục trực quan của nội dung đó một cách riêng biệt. Thay vào đó, chuyển các mối quan tâm về bố cục từ HTML bằng cách sử dụng bảng sang CSS

CSS ban đầu ở mức tối thiểu, lấy cảm hứng rất nhiều từ xuất bản trên máy tính để bàn thực, với các thuật ngữ như “float” hỗ trợ định dạng các cột văn bản

Theo thời gian, chúng tôi bắt đầu thu thập các ví dụ trên trang web có tên là CSS Zen Garden

CSS Zen garden trở thành trung tâm giới thiệu cách mọi người có thể sử dụng CSS một cách sáng tạo. Mọi người có thể gửi các tệp CSS đã định kiểu lại cùng một HTML theo những cách thú vị và độc đáo

Điều này rất có ảnh hưởng trong việc truyền bá ý tưởng tách nội dung khỏi kiểu dáng của nó, HTML có thể tạo kiểu lại và suy nghĩ về việc áp dụng các “lớp da” có thể tùy chỉnh cho bộ khung cốt lõi.

Tìm ra các phương pháp hay nhất

Chúng tôi bắt đầu xây dựng các trang web và ứng dụng phức tạp hơn, đặt ra những yêu cầu mới đối với CSS để phát triển

Bất kỳ công nghệ mới nào cũng thường mất một vài chu kỳ với các cách tiếp cận khác nhau trước khi các phương pháp hay nhất xuất hiện

Chúng tôi đã thấy các công cụ như Ít hơn và Sass bật lên giúp mở rộng các khả năng CSS gốc. Cung cấp cho chúng tôi những thứ như biến và hàm calc, giúp cải thiện đáng kể trải nghiệm của nhà phát triển

Khi chúng tôi dành nhiều thời gian hơn cho các biểu định kiểu này, chúng tôi đã tìm cách tổ chức tất cả các quy tắc và bộ chọn này

Nhiều mẫu khác nhau để chia tỷ lệ CSS được cắt xén. Những thứ này đã cố gắng đạt được sự cân bằng giữa bảo trì, hiệu suất và khả năng đọc và được gọi là “kiến trúc CSS”

Trước khi chúng ta đi sâu vào các kiến trúc này, trước tiên hãy hiểu tại sao việc quản lý CSS trên các dự án quy mô lớn lại trở nên phức tạp một cách nhanh chóng

Tại sao CSS khó quản lý trên quy mô lớn

“Ở quy mô” đề cập đến giao điểm của nhiều thứ, bao gồm con người, công cụ, quy trình và hiệu suất

Mở rộng quy mô một cách hiệu quả đòi hỏi chúng tôi phải quản lý cẩn thận sự gia tăng độ phức tạp. Vì vậy, khi hệ thống phát triển, nó vẫn có thể hiểu được, có thể thay đổi và hoạt động hiệu quả. Khi chi phí thêm mã mới ở mức thấp nhất có thể và mọi người tự tin thay đổi và xóa mã cũ

Cascade (chữ C trong CSS) bắt nguồn từ những ngày đầu của web. Các trình duyệt có thể áp dụng các kiểu mặc định cho các tài liệu điện tử mới này. Sau đó, các tác giả tài liệu có thể cung cấp các kiểu riêng của họ, kiểu này có thể bị ghi đè bởi các tùy chọn người dùng cá nhân

Hình ảnh về các quy tắc xếp tầng này là trung tâm để hiểu CSS. Các thuộc tính tương tự giúp CSS trở nên mạnh mẽ cũng khiến khó đạt được các thuộc tính mở rộng đó trong các dự án lớn. Đặc biệt, không gian tên chung, quy tắc xếp tầng và tính đặc hiệu của bộ chọn

Không gian tên toàn cầu

Không gian tên CSS toàn cầu có thể mạnh mẽ nếu được tận dụng cẩn thận. Nhưng trong các dự án lớn, nó thường là một lời nguyền

Khi mọi thứ là toàn cầu, mọi thứ có thể ảnh hưởng bất ngờ đến thứ khác. Bây giờ hoặc một lúc nào đó trong tương lai khi mọi thứ thay đổi

Điều này trở nên có vấn đề khá nhanh. Có nhiều lý do khiến chúng tôi không đặt mọi thứ vào một không gian tên chung bằng các ngôn ngữ khác. Khi nhiều mã được thêm vào, mọi thứ trở nên khó dự đoán hơn và khó bảo trì hơn

Cần lưu ý rằng các lớp xếp tầng CSS là một tính năng sắp ra mắt có thể giúp giải quyết vấn đề này một cách tự nhiên

Đặt tên cho mọi thứ thật khó

Tạo một loạt các tên lớp ngữ nghĩa thường giống như một việc vặt mà không mang lại nhiều lợi ích khi lặp lại nhanh chóng bằng CSS

Thật khó để nghĩ ra những cái tên hữu ích vì chúng tôi đang cố gắng nén một loạt thông tin vào một nhãn chính xác. Nhận được quyền này càng trở nên quan trọng hơn khi mọi thứ đều mang tính toàn cầu

Đặt tên cho mọi thứ quá sớm là một hình thức trừu tượng quá sớm. Bởi vì thường thì những thứ chúng ta đặt tên vẫn cần được hình thành đầy đủ và chưa thể tái sử dụng

Thay đổi thiết kế là phổ biến ở giao diện người dùng và các nhãn này thường trở nên lỗi thời và yêu cầu tái cấu trúc cả kiểu và đánh dấu

Tái cấu trúc CSS rất khó

Cả thiết kế và phát triển phần mềm hiện đại đều có tính lặp lại cao. Chúng tôi thường chỉ bắt đầu phát triển một bức tranh rõ ràng sau một vài lần lặp lại.

Điều này đòi hỏi chúng ta phải thường xuyên đánh giá lại sự hiểu biết của mình về vấn đề đang giải quyết. Trong mã, điều này có nghĩa là tái cấu trúc khi sự hiểu biết của chúng ta thay đổi và củng cố

Tái cấu trúc có thể là một thách thức, nhưng đó là một phương pháp đã được thử nghiệm và đúng đắn để đạt được sự trừu tượng tốt theo thời gian dựa trên các yêu cầu thực tế hơn là lý thuyết

Trong CSS, nó khá khó. Nếu không có kiểm tra hồi quy trực quan vững chắc, nhiều lỗi CSS sẽ “im lặng”, nơi dễ dàng tạo ra các lỗi và tác dụng phụ không lường trước được. Điều này dẫn đến một vài tình huống phổ biến

Chỉ nối các biểu định kiểu
Các dự án bắt đầu với các biểu định kiểu có thể quản lý được. Nhưng mã mới thường bị kẹt ở cuối tệp sau một vài lần lặp lại và sửa lỗi sau đó
Khó biết khi nào chúng ta có thể thay đổi hoặc xóa một quy tắc một cách an toàn. Vì vậy, chúng tôi ghi đè những gì xuất hiện trước đó trong tầng ở cuối tệp
Đây là nguyên nhân của các cuộc chiến cụ thể. Có lẽ tất cả chúng ta đều có kinh nghiệm cần ghi đè lên một số kiểu khác. Đó là một con đường dễ dàng đến với nghệ thuật hắc ám, nơi mà !important bắt đầu mọc lên, làm tăng thêm gánh nặng bảo trì
mã chết
Trong thực tế, chúng ta thường sử dụng lặp đi lặp lại cùng một thuộc tính CSS. Việc liên tục sao chép các quy tắc thường an toàn hơn nhiều, thay vì chấp nhận rủi ro tái cấu trúc một lượng lớn CSS trong một không gian tên chung
Điều này thường dẫn đến rất nhiều CSS không được sử dụng và khó biết liệu có thứ gì đó đang dựa vào nó hay không. Kết quả là CSS đầy hơi trải rộng trên các tệp khác nhau

Gỡ lỗi CSS rất khó

Một phần quan trọng của việc sửa lỗi là mô phỏng những gì máy tính làm trong đầu chúng ta

Khó gỡ lỗi với CSS phức tạp vì chúng tôi đang tính toán tầng và tính toán các quy tắc cuối cùng trong đầu trong khi xem xét thứ tự nguồn

Đặc biệt với nhiều sắc thái của CSS xung quanh vị trí, căn chỉnh, ngữ cảnh xếp chồng, lề và chiều cao. Nếu không có cách tiếp cận có hệ thống, quy trình gỡ lỗi CSS phổ biến thường liên quan đến việc điều chỉnh một số giá trị để xem điều gì sẽ xảy ra. Làm mới trang và hoàn toàn không có gì thay đổi. Hoặc một cái gì đó đã hoàn toàn bị hỏng

Điều này đặc biệt khó khăn khi làm việc với mã mà bạn không kiểm soát hoặc các lỗi dành riêng cho trình duyệt

Thuần hóa độ phức tạp với kiến trúc CSS

CSS có một mô hình đơn giản, nhưng rất dễ khiến mọi thứ nhanh chóng trở nên lộn xộn. Cuối cùng, chúng tôi bắt đầu tìm cách áp dụng các nguyên tắc công nghệ phần mềm để giúp chúng tôi quản lý

Các kiến trúc này giống như các bản thiết kế cấp cao hơn để tổ chức các tệp CSS cũng như các quy tắc và bộ chọn của chúng

Hãy xem tổng quan nhanh về một số kiến trúc CSS phổ biến và có ảnh hưởng hơn cũng như ý tưởng chính của chúng

OOCSS. CSS hướng đối tượng

OOCSS phân biệt các loại CSS khác nhau mà chúng tôi viết trong thực tế. CSS thực hiện bố cục và CSS tạo chủ đề hoặc “giao diện” HTML, chẳng hạn như màu sắc, phông chữ, v.v.

Một “đối tượng” trong OOCSS là một mẫu hình ảnh lặp đi lặp lại có thể được trừu tượng hóa và sử dụng lại. Ý tưởng là xác định các mẫu hình ảnh phổ biến và trích xuất các khối mã trùng lặp thành các lớp có thể sử dụng lại

Một trong những khung CSS được sử dụng rộng rãi nhất để tận dụng những ý tưởng này là Bootstrap

SMACSS. CSS có thể mở rộng và mô-đun

Trong thực tế, các tệp CSS một tệp lớn nhanh chóng trở nên không thể quản lý và khó gỡ lỗi

SMCASS là hướng dẫn phân loại các loại CSS khác nhau và tương thích với các phương pháp như OOCSS

Ý tưởng chính là lấy tất cả các tên lớp này và sắp xếp chúng thành các nhóm riêng biệt và cung cấp một số cấu trúc rất cần thiết cho các tệp CSS của chúng tôi. Ngoài một số quy ước xung quanh việc đặt tên các lớp

BEM. Khối, Phần tử, Công cụ sửa đổi

BEM là một mô hình cho cách suy nghĩ về việc chia nhỏ mọi thứ thành các thành phần, thành phần con và các trạng thái rời rạc khác nhau của chúng

Ban đầu được tạo tại Yandex, nó cung cấp một quy ước đặt tên có hệ thống để tránh các trận chiến về tính đặc hiệu bằng cách giữ cho tất cả các bộ chọn phẳng (không có bộ chọn con cháu), trong đó mọi phần tử được tạo kiểu sẽ có tên lớp riêng

BEM kết hợp tốt với các bộ tiền xử lý CSS phổ biến như Sass với các quy tắc lồng nhau sẽ biên dịch thành các bộ chọn CSS phẳng

.nav {
  // block styles
	&__link {
    // element styles that depend on the parent block
		&--active {
          // modifer styles
		}
	}
}

ITCSS. Tam giác ngược

Một trong những ý tưởng chính đằng sau ITCSS là suy nghĩ về các biểu định kiểu của chúng tôi thông qua lăng kính phân lớp để giúp chế ngự tầng

ITCSS giống như một “siêu khung” dành cho CSS, tương thích với các hệ thống khác

Ý tưởng là chế ngự sự hỗn loạn của mọi thứ đè lên nhau một cách khó đoán bằng cách cung cấp các lớp rõ ràng về tính đặc hiệu ngày càng tăng

“Tam giác ngược” đến từ mỗi lớp lũy tiến tạo thành hình kim tự tháp ngược

Đó là một phương pháp có ảnh hưởng để quản lý các tệp CSS trên các dự án quy mô lớn. Để tìm hiểu sâu hơn, bạn có thể xem bài nói chuyện của người tạo ra nó

CSS khối

Cube CSS hoạt động với không gian tên chung và tầng thay vì cố gắng giải quyết nó

Cube CSS cung cấp một tập hợp các nhóm được xác định rõ để phân loại CSS. Chúng tạo thành từ viết tắt khối lập phương. Thành phần, Tiện ích, Chặn, Ngoại lệ

Các tài liệu làm một công việc tuyệt vời. Đó là một phương pháp lỏng lẻo giống như một mô hình tinh thần để tổ chức CSS

Tương tự như ITCSS, đó là một “khung meta CSS” có ảnh hưởng, tương thích với nhiều cách tiếp cận khác nhau

Suy nghĩ lại về việc tách biệt các mối quan tâm

Với sự gia tăng của các SPA và sự phát triển dựa trên thành phần, chúng tôi bắt đầu thấy các cách tiếp cận mới đối với CSS

Trong thế giới này, việc quản lý CSS thậm chí còn khó khăn hơn vì các thành phần hiện tải không đồng bộ, không đảm bảo về thứ tự nguồn

Một vấn đề phổ biến là khi một số phần tử trên trang trông khác khi thực hiện chuyển đổi SPA từ trang A sang B, nhưng sẽ ổn nếu bạn tải trực tiếp sang B. Dẫn đến một số phiên sửa lỗi thú vị

Chúng tôi bắt đầu tìm kiếm các giải pháp cụ thể hơn để quản lý CSS phù hợp với cách tiếp cận tập trung vào thành phần mới này để cấu trúc giao diện người dùng của chúng tôi

Những công cụ này thường phá vỡ nhiều phương pháp hay nhất đã được thiết lập mà chúng tôi đã xây dựng và suy nghĩ cho đến nay. Hãy hiểu chúng

kiểu nội tuyến

Việc chuyển sang các khung dựa trên thành phần thường thấy các kiểu được áp dụng nội tuyến bên trong các thành phần. Trong các framework như React, chúng tôi chuyển một đối tượng Javascript tới chỗ dựa style, chuyển đổi nó thành kiểu nội tuyến

Điều này gây ra phản ứng nội tạng cho nhiều người vì giống như chúng tôi đang quay lại từ đầu khi chúng tôi không có biểu định kiểu bên ngoài, loại bỏ các phương pháp hay nhất hiện có

Trong ngữ cảnh của các thành phần, các kiểu nội tuyến không gặp phải vấn đề trùng lặp lớn ban đầu vì nó được gói gọn bên trong thành phần. Thực tế là các kiểu chỉ ảnh hưởng đến phần tử mà chúng đang bật là một cách hay để thêm và sửa đổi CSS một cách an toàn trong các thành phần

Vấn đề chính với kiểu nội tuyến là thiếu quyền truy cập vào các tính năng CSS mạnh hơn, như bộ chọn giả và truy vấn phương tiện. Ngoài khó khăn trong việc tận dụng mã thông báo thiết kế được chia sẻ, bộ nhớ đệm, phân tích tĩnh và tiền xử lý

CSS trong JS

Trong những ngày đầu của React, Veujx đã nói chuyện về cách tiếp cận CSS của Facebook. Nhìn bề ngoài, điều này trông rất giống các kiểu nội tuyến nhưng có quyền truy cập vào sức mạnh của biểu định kiểu

Cuộc nói chuyện này đã dẫn đến sự phổ biến của các thư viện nguồn mở sử dụng cách tiếp cận dựa trên Javascript đối với CSS

Làn sóng CSS đầu tiên trong các thư viện JS đã trở nên phổ biến với các thư viện như Styled Components, Emotion và toàn bộ các thư viện khác trong hệ sinh thái React

Những điều này đã giải quyết hầu hết các vấn đề mà CSS gốc gặp phải trong các dự án lớn sử dụng các thành phần, giúp làm việc với các giá trị động từ JS cực kỳ dễ dàng

Vấn đề là người dùng cuối phải trả thuế hiệu suất. Có sự không hiệu quả khi kết xuất phía máy chủ, các vấn đề xung quanh bộ nhớ đệm và chi phí thời gian chạy của máy khách

Điều này làm trầm trọng thêm thời gian khởi động ứng dụng chậm, yêu cầu kết xuất lại nhiều lần sau khi Javascript đã ngậm nước. Rất nhiều công việc được bổ sung nhanh chóng cho các ứng dụng lớn

Làn sóng CSS thứ hai gần đây hơn trong các thư viện JS nhằm mục đích mang lại trải nghiệm tốt nhất cho nhà phát triển mà không tốn chi phí thời gian chạy

Các công cụ như Vanilla extract, Linaria và Compiled trích xuất biểu định kiểu từ các thành phần trong một bước biên dịch. Điều này chuyển phần lớn những gì xảy ra trong thời gian chạy trên trình duyệt của người dùng sang thời gian biên dịch

CSS thường được biên dịch thành CSS nguyên tử (một kiến trúc CSS mà chúng ta sẽ đề cập sau một chút) để tránh các tệp CSS cồng kềnh và có thể lưu vào bộ nhớ cache nhiều hơn so với biểu định kiểu thời gian chạy động

Mô-đun CSS

Các mô-đun CSS tạo ra sự cân bằng giữa việc viết CSS thông thường (hoặc Sass) và đánh vào nhiều thuộc tính mở rộng mà chúng tôi đang tìm kiếm

Các mô-đun CSS cho phép bạn sử dụng toàn bộ sức mạnh và khả năng kiểm soát của CSS mà không phải lo lắng về việc các kiểu bị lệch giữa các thành phần, trong khi vẫn giữ mọi thứ được bản địa hóa trong một thư mục thành phần

Đặc biệt với làn sóng CSS đầu tiên trong các thư viện JS, việc buộc CSS vào một thư viện chế độ xem cụ thể là một bước đi quá xa đối với một số người, trong đó các mô-đun CSS là một giải pháp thay thế tuyệt vời. Tuy nhiên, một số người có thể coi đây là một dạng CSS trong JS vì nó phụ thuộc vào một trình đóng gói như Webpack để tạo và đảm bảo các bộ chọn nằm trong phạm vi

Bất chấp điều đó, các mô-đun CSS là nền tảng trung gian tuyệt vời giữa thế giới CSS thông thường và các cách tiếp cận hoàn toàn lấy thành phần làm trung tâm như CSS trong JS. Vẫn cần phải đặt tên và tương thích với các quy ước như BEM

Các phương pháp hay nhất về CSS đầy thách thức

Trong khi đó, bên ngoài thế giới của SPA dựa trên thành phần, các phương pháp hay nhất chịu ảnh hưởng của CSS Zen Garden ban đầu đã bị thách thức ở một mặt trận khác

CSS nguyên tử được sinh ra trong bóng tối của việc quản lý CSS trên các dự án lớn. đúc bởi nó

Động lực ban đầu của nó là hoàn toàn thực dụng - kích hoạt kiểu dáng mà không phải chỉnh sửa hoặc thêm quy tắc vào biểu định kiểu hiện có. Tránh tất cả các vấn đề đi kèm với điều đó

Nó ở đầu kia của quang phổ so với các kiến trúc CSS khác như OOCSS, BEM và SMACSS và hoàn toàn phản trực giác

CSS nguyên tử thấp hơn một bậc so với “khối” và “đối tượng”, tập trung vào các nguyên tử có mục đích đơn lẻ. Trực tiếp chống lại các phương pháp hay nhất đã được thiết lập thậm chí được nêu trong phần về cách không đặt tên cho các lớp CSS

Nó đã trở thành một cách tiếp cận tăng năng suất phổ biến cho các nhóm trong các dự án mà cảm thấy quá rủi ro khi sửa đổi CSS hiện có. Một số thư viện CSS phổ biến bao gồm ACSS, Tachyons, WindiCSS và nhiều thư viện khác

Theo trạng thái của CSS, một trong những cách triển khai phổ biến nhất của kiến trúc CSS này giúp nó có thể truy cập được ngày nay là khung CSS Tailwind

Sự trỗi dậy của Tailwind

Tailwind đã nhanh chóng trở nên phổ biến kể từ khi phát hành vào năm 2017. Một lời chứng thực điển hình về Tailwind là nó tăng năng suất bằng cách làm cho CSS dễ tiếp cận hơn đối với những người không phải là chuyên gia, đồng thời dẫn đến CSS dễ bảo trì hơn. Lời khuyên thường là “cứ thử đi, và bạn sẽ không quay lại”

Các nguyên tắc cung cấp năng lượng cho Tailwind

Để hiểu mức độ phổ biến của nó, hãy cùng xem xét các nguyên tắc cơ bản đằng sau phương pháp của Tailwind

Mặc dù dường như đã loại bỏ các phương pháp hay nhất đã được thiết lập, nhưng chúng ta sẽ thấy bên dưới đó là tập hợp các nguyên tắc thực dụng hoạt động trong thực tế

Trì hoãn việc đặt tên cho mọi thứ

Không phải liên tục đặt tên cho mọi thứ là một lý do khiến Tailwind cảm thấy rất hiệu quả. Quy trình làm việc này được hỗ trợ bởi ý tưởng tổng hợp các nguyên tử có mục đích đơn lẻ từ dưới lên

Từ góc độ bảo trì, đó là một cách tuyệt vời để

Không bao giờ đặt tên mọi thứ làm hại khả năng đọc mã. Thường dẫn đến một hỗn hợp các lớp nguyên tử (hoặc thành phần) không có ranh giới rõ ràng

Đây là một lời chỉ trích hợp lệ. Nhưng trên thực tế, thật đáng ngạc nhiên là điều này có thể đi bao xa trước khi trở thành một điểm đau chính đáng. Nó thường là sự đánh đổi đúng đắn trong các cơ sở mã có thể thay đổi thường xuyên hoặc với nhiều người

Đây là một quy trình làm việc mạnh mẽ trong một mô hình thành phần. Bạn đã có một tên ngữ nghĩa cho thành phần mà bạn đang làm việc, và vì vậy bạn sẽ xây dựng theo hướng đó, với các kiểu có trong thành phần đó

Đây cũng là nguyên tắc cấp cao hơn được nêu trong Xây dựng giao diện người dùng hướng tới tương lai. Không phải là không bao giờ tạo trừu tượng, mà là không tạo chúng sớm

Trừu tượng khi đúng thời điểm

Khi hoạt động lặp đi lặp lại, khả năng dễ dàng xóa và thay đổi mã làm lu mờ rất nhiều chi phí sao chép

Một điểm khó khăn phổ biến khi viết CSS là làm cho mọi thứ quá KHÔ hoặc được tối ưu hóa trước thường cảm thấy lãng phí khi mọi thứ khó thay đổi sau này

Việc LÀM KHÔ mã lặp đi lặp lại đằng sau một sự trừu tượng chung sẽ dễ dàng hơn nhiều so với việc xử lý mã trừu tượng quá mức và làm cho nó hoạt động cho trường hợp sử dụng mới của bạn

Tailwind cung cấp hai kỹ thuật để trừu tượng hóa vào đúng thời điểm, bằng cách tạo một lớp CSS dùng chung đại diện cho một khối (tương tự như OOCSS)

Hoặc được khuyến khích hơn khi sử dụng các khung dựa trên thành phần, là trích xuất các lớp trùng lặp thành một lớp có thể sử dụng lại (React, Vue, Solid, Svelte, v.v. ) thành phần và chia sẻ rằng

Tự tin tái cấu trúc

Vì các lớp được bản địa hóa theo mã đánh dấu mà chúng đang bật, nên chúng tôi có thể tự tin cấu trúc lại các lớp này mà không lo ảnh hưởng đến các phần tử hoặc thành phần khác ở nơi khác

Điều này hoạt động cho cả mô hình tinh thần của web dưới dạng tài liệu và mô hình tập trung vào thành phần. Điều này dẫn đến cảm giác rằng Tailwind có thể tăng và giảm quy mô tùy thuộc vào loại trang web hoặc ứng dụng mà bạn đang xây dựng

Tránh mã chết

Tailwind và CSS trong các thư viện JS được biên dịch trước thành Atomic CSS giải quyết các vấn đề về các tệp CSS cồng kềnh chứa đầy các quy tắc trùng lặp

Với CSS nguyên tử, sự phát triển của CSS gắn liền với số kiểu duy nhất được sử dụng, chứ không phải số lượng tính năng mà các nhà phát triển đang cung cấp

Ví dụ: việc sử dụng lại một số thuộc tính nhất định như flex ở mọi nơi là điều phổ biến. Thay vì sao chép chúng trong các biểu định kiểu dưới các tên lớp khác nhau, chúng tôi chỉ trả chi phí đó một lần. Điều này đúng với từng kết hợp thuộc tính/giá trị

Thu hẹp khoảng cách thiết kế

Hãy tạm dừng tất cả các nguyên tắc và kiến trúc này, đồng thời nhớ rằng CSS cuối cùng là triển khai các thiết kế trực quan

Một lý do lớn khiến CSS cảm thấy khó khăn đối với nhiều nhà phát triển là thực tế là thiết kế khó

Hiểu đúng các nguyên tắc cơ bản sẽ đi một chặng đường dài. Trong trường hợp thiết kế trực quan, một số yếu tố chính là căn chỉnh, khoảng cách, tính nhất quán, kích thước, kiểu chữ và màu sắc

Trong CSS, đối với bất kỳ thuộc tính cụ thể nào như font-size, color hoặc padding, có nhiều cách để triển khai giá trị

Chúng tôi thường làm như vậy theo cách đặc biệt, dẫn đến sự gia tăng của các kích thước phông chữ hơi khác nhau, khoảng cách và sự không nhất quán về màu sắc tạo nên giao diện không bóng bẩy.

Một phần quan trọng của CSS mở rộng quy mô là thu hẹp khoảng cách thiết kế này bằng cách có một nền tảng vững chắc gồm các nguyên mẫu có thể chia sẻ xác định các giá trị cho khoảng cách, kích thước phông chữ, màu sắc, điểm ngắt, v.v.

Chúng thường được gọi là mã thông báo thiết kế và tạo thành nền tảng của một hệ thống thiết kế. Không có nền tảng này, mọi thứ có thể cảm thấy rất tùy tiện và hỗn loạn

Một khía cạnh quan trọng giúp Tailwind trở nên phổ biến là cung cấp một tập hợp các nguyên tắc thiết kế cơ bản được cân nhắc trước mà bạn có thể sử dụng ngay tại cửa hàng. Điều này giúp loại bỏ một lượng lớn việc ra quyết định thường được thực hiện đột xuất với sự không nhất quán

Một tùy chọn nguồn mở tuyệt vời khác cho nền tảng vững chắc là Open Props, tương thích với bất kỳ cách tiếp cận CSS nào bạn thực hiện và cung cấp rất nhiều biến và mã thông báo được tạo sẵn tuyệt vời

suy nghĩ kết luận

Hấp thụ những gì hữu ích, loại bỏ những gì vô ích và thêm những gì đặc biệt của riêng bạn

Không có công cụ nào là hoàn hảo và mọi dự án và nhóm đều khác nhau. Bất kể cách tiếp cận nào được thực hiện, việc thiết lập nền tảng thu hẹp khoảng cách thiết kế là yếu tố chính để mở rộng quy mô CSS

Tập trung vào những thứ nguyên thủy được sáng tác và xây dựng trên đó cũng là một chặng đường dài. Điều này cũng áp dụng cho các ứng dụng dựa trên thành phần lớn sử dụng thư viện thành phần. Cung cấp các nguyên mẫu bố cục thành phần có thể tổng hợp như Box,

p {
  color: red;
}

0,

p {
  color: red;
}

1, v.v., là một cách tuyệt vời để quản lý CSS mà không cần nhà phát triển phải viết bất kỳ CSS nào

Gần đây, đã có một số tính năng ấn tượng được chuyển đến các trình duyệt thường xanh nhằm giải quyết nhiều điểm khó khăn khiến CSS khó mở rộng quy mô. Các tính năng mới hơn như lớp xếp tầng, truy vấn vùng chứa, lưới con,

p {
  color: red;
}

2 và nhiều tính năng khác có thể sẽ thay đổi cách chúng ta nghĩ về và tận dụng CSS trong tương lai

Thành công trong việc mở rộng quy mô CSS không phụ thuộc vào việc tuân thủ một cách giáo điều các nguyên tắc cụ thể hoặc các phương pháp hay nhất mà quan trọng hơn là xác định những gì bạn cần dựa trên các ràng buộc trong thế giới thực và thực hiện những gì hoạt động bền vững và hiệu quả để hoàn thành công việc