Sass so với Bootstrap so với Tailwind
|
Không gian phát triển web chưa bao giờ là một trong nhiều sự gắn kết. Với một triệu lẻ một cách để viết Javascript của bạn, không có gì ngạc nhiên khi cũng có nhiều quan điểm khác nhau về cách viết CSS. Mặc dù tôi đã sử dụng Sass (Syntactally Awesome Stylesheets) làm giải pháp tạo kiểu mà tôi lựa chọn cho các dự án React của mình trong phần lớn sự nghiệp phát triển web của mình, tôi không thể không bị thu hút bởi hai khung CSS mà tôi nghe nói đã nhận được rất nhiều lời bàn tán, Tailwind . Trước khi chuyển sang thứ sáng bóng tiếp theo, tôi quyết định thực hiện một số nghiên cứu để thử và xác định ưu và nhược điểm của từng khung và khi nào nhà phát triển nên chọn cái này thay vì cái kia Show
tiền thân. Các vấn đề CSS phổ biếnNếu bạn đã quen với nhiều thách thức khi viết CSS rõ ràng, vui lòng chuyển sang phần suy nghĩ của tôi về các khung riêng lẻ. Để cung cấp một chút bối cảnh cho suy nghĩ của tôi, tôi muốn tìm hiểu lý do tại sao bạn thậm chí nên quan tâm đến việc sử dụng các khung mới này thay vì chỉ CSS đơn thuần Di sản Mặc dù C của CSS là viết tắt của Cascading nhưng điều đó không có nghĩa là chúng ta nên lạm dụng sức mạnh này. Thông thường, việc sử dụng các bộ chọn lồng nhau dẫn đến sự phức tạp ngoài ý muốn với quá nhiều lớp cụ thể. Càng có nhiều lớp cụ thể thì càng khó thay đổi kiểu của phần tử đó mà không cần dùng đến. quan trọng. Dựa vào tính kế thừa cũng là một vấn đề vì nó liên kết các kiểu của chúng ta với cấu trúc của HTML. Nếu HTML thay đổi, chúng tôi cần đảm bảo rằng CSS của chúng tôi được điều chỉnh cho phù hợp. Nếu chúng tôi đã sử dụng một lớp duy nhất để nhắm mục tiêu phần tử đó, thì việc thay đổi HTML xung quanh sẽ không ảnh hưởng đến CSS. Tất nhiên, đôi khi việc sử dụng một số kế thừa trong bộ chọn của chúng tôi là không thể tránh khỏi (ví dụ: khi ghi đè kiểu của thư viện bên thứ ba), nhưng nhìn chung chúng tôi nên cố gắng giữ độ đặc hiệu thấp nhất có thể Sử dụng lại các lớp Không phải mục đích của việc sử dụng các lớp là để bạn có thể sử dụng lại chúng sao? . Thật dễ dàng để quên nơi bạn đã sử dụng lại các lớp của mình và việc thay đổi kiểu để phù hợp với một trường hợp sử dụng có thể vô tình phá vỡ một trường hợp sử dụng khác ở nơi khác trong ứng dụng của bạn. Một cách tuyệt vời để có khả năng sử dụng lại trong ứng dụng React, thay vào đó là có các thành phần có thể được sử dụng lại thay vì các lớp. Bằng cách này, một lớp luôn được gắn với cùng một thành phần, giúp bạn dễ dàng biết được việc thay đổi lớp sẽ ảnh hưởng đến điều gì. Một lần nữa, điều này không có nghĩa là bạn không bao giờ nên sử dụng lại các lớp học. Có các lớp tiện ích đơn giản không có khả năng thay đổi là những cách tuyệt vời để giữ cho phông chữ/phần đệm/lề/v.v nhất quán. (Tuy nhiên, hãy tìm hiểu thêm về các lớp tiện ích trong phần Tailwind 😉 ) Tổ chức mã Nếu CSS không được chia thành các tệp/phần, sẽ rất khó để tìm và chỉnh sửa CSS mà bạn đang tìm kiếm. Trong các trang web truyền thống, thường chỉ có một Mấu chốt của các vấn đề CSS thực sự tập trung vào một điều. CSS có thể trở nên khó sử dụng rất nhanh nếu không được quản lý đúng cách. Chúng tôi muốn tránh các trang tính quá dài, bộ chọn lồng nhau sâu và không cần thiết. quan trọng. Mỗi phương pháp CSS sau đây tiếp cận giải quyết các vấn đề này theo cách riêng của chúng Kiểu 1. ngổ ngáoCốt lõi của tất cả nằm ở CSS, bánh mì và bơ nếu bạn muốn. Đây là điều mà mọi nhà phát triển web nên học trước tiên và trong nhiều trường hợp, CSS đơn giản là tất cả những gì bạn cần. Đặt nền tảng cho việc học của bạn là rất quan trọng và nên được thực hiện trước khi học bất kỳ ý tưởng “ảo tưởng” mới nào. Sass là ngôn ngữ kịch bản tiền xử lý được biên dịch thành CSS. Sass là một cách viết CSS được cải tiến, cung cấp cho các nhà phát triển các công cụ mạnh mẽ như biến, mixin và lồng nhau, về cơ bản, nó giúp việc viết CSS trở nên đơn giản và hiệu quả hơn ngổ ngáo. ưuTính năng Sass Sass cho phép bạn sử dụng các công cụ mạnh mẽ mà bạn không thể có trong vanilla CSS, chẳng hạn như biến, phép toán, mixin, vòng lặp, hàm, nhập và các chức năng thú vị khác giúp viết CSS hiệu quả hơn nhiều. Tôi sẽ không đi sâu vào những điều này vì đó là toàn bộ bài đăng trên blog của chính nó. Về cơ bản, bạn có thể coi Sass giống như viết CSS, nhưng với nhiều tính năng hơn Biến.  Dòng mã so sánh sass với CSS cho các biến làm tổ Dòng mã so sánh sass với CSS để lồng nhau hỗn hợp Dòng mã so sánh sass với CSS cho mixins mô-đun Mặc dù tính năng này không dành riêng cho Sass, nhưng việc sử dụng các gói như webpack cho phép bạn chia Sass (hoặc CSS, trong trường hợp sử dụng các mô-đun CSS) thành các tệp. Điều này rất có giá trị vì nó giúp tổ chức mã, giúp bảo trì CSS dễ dàng hơn Sự tự do Một lợi ích lớn của Sass (so với hai framework khác trong bài đăng này) là quyền tự do viết CSS của riêng bạn theo cách bạn muốn. Tại TTT, chúng tôi thường tuân thủ BEM (phương pháp Trình sửa đổi phần tử khối, tuy nhiên, việc viết Sass của riêng bạn cho phép bạn viết CSS của mình theo bất kỳ cách nào bạn cho là tốt nhất. ngổ ngáo. Nhược điểmSự tự do Như chúng ta vừa đọc, sự tự do mà Sass mang lại cho bạn cho phép bạn viết mã theo bất kỳ cách nào bạn muốn, điều này có thể rất tuyệt nhưng cũng nguy hiểm nếu bị lạm dụng. Tục ngữ có câu “Quyền lớn đi kèm trách nhiệm lớn”. ” Nhiều nhà phát triển, chẳng hạn như nhà phát triển đàn em hoặc nhà phát triển phụ trợ, không có hiểu biết đầy đủ về CSS, điều này có thể dẫn đến CSS phức tạp không cần thiết mà các nhà phát triển tương lai quá ngại chạm vào vì sợ làm hỏng mọi thứ. Vì Sass cung cấp các quyền tự do như vậy nên các nhà phát triển này không bị khuôn khổ "kiềm chế". Có thể tránh được việc lạm dụng này bằng cách có các nguyên tắc CSS vững chắc và đánh giá mã, tuy nhiên, nhà phát triển (hoặc nhóm các nhà phát triển) phải thực thi các nguyên tắc đó. Chuyển ngữ cảnh Hình dung điều này. Bạn đang làm việc với thành phần của mình, tạo các Thực tế vẫn là có sự ngắt kết nối giữa phong cách của bạn và đánh dấu của bạn. Nhiều bạn có thể đang nghĩ, nhưng đó là một điều tốt, "tách mối quan tâm" phải không? . Đã bao nhiêu lần bạn phải thêm một đặt tên Chỉ có hai điều khó khăn trong Khoa học máy tính. vô hiệu hóa bộ đệm và đặt tên cho mọi thứ — Phil Karlton Bạn có thể đã nghe câu nói đùa này trước đây, nhưng đó là sự thật. Đặt tên cho mọi thứ thật khó. BEM là một phương pháp nhằm mục đích giúp chúng tôi đưa ra các tên lớp có ý nghĩa và nó giúp. Tuy nhiên, bạn vẫn phải dành thời gian suy nghĩ về các khối có ý nghĩa, với các yếu tố và công cụ sửa đổi phù hợp Việc đặt tên cho từng lớp cho từng thành phần bạn cần tạo kiểu cũng trở nên tẻ nhạt, vì chúng tôi không muốn trộn lẫn các kiểu nội tuyến và biểu định kiểu. Nó dẫn đến rất nhiều lớp được tạo ra chỉ để thêm chiều rộng. 100% hoặc một số ký quỹ hoặc phần đệm Đôi khi chúng tôi chỉ muốn thêm một hoặc hai phong cách nhỏ. Đặc biệt là khi nói đến bố cục, chúng tôi không thực sự cần một lớp có thể tái sử dụng chỉ được sử dụng trong phần cụ thể đầu tiên của trang của bạn để cho biết các nút nên ngồi cạnh nhau như thế nào. Thật khó khăn khi phải tạo ra một cái tên và nghĩ ra một cái tên cho nó, điều này dẫn chúng ta đến phương pháp tiếp theo một cách độc đáo… kiểu 2. Tiện ích-Đầu tiên CSS (có. CSS đuôi gió)CSS ưu tiên tiện ích là một phương pháp ra đời với nỗ lực giải quyết tất cả các nhược điểm được đề cập ở trên bằng cách viết CSS truyền thống. CSS ưu tiên tiện ích liên quan đến việc sử dụng nhiều lớp trình trợ giúp nhỏ để tạo nên kiểu của thành phần, thay vì viết tên lớp dựa trên ý nghĩa ngữ nghĩa. Một điều cần lưu ý là CSS ưu tiên tiện ích không cần bất kỳ thư viện nào, nó chỉ đơn giản là một phương pháp có thể áp dụng cho CSS, tương tự như cách hoạt động của BEM Tôi sẽ tập trung vào thư viện Tailwind CSS, vì đây có lẽ là cách tiếp cận phổ biến nhất mà các nhà phát triển đang đổ xô sử dụng để triển khai css ưu tiên tiện ích CSS đuôi gióGiới thiệu nhanh về Tailwind. Tailwind CSS là khung CSS ưu tiên tiện ích với các lớp như Tại đây, bạn có thể tìm thấy thông báo trò chuyện được triển khai bằng CSS cổ điển Dòng mã cho thông báo trò chuyện bằng CSS cổ điển Đây là thông báo trò chuyện tương tự được triển khai với các lớp Tailwind Dòng mã cho thông báo trò chuyện bằng CSS Tailwind Ngay lập tức, có lẽ bạn đang nghĩ “Ew, nói về đánh dấu khó đọc. ” Ngay cả các nhà phát triển của Tailwind cũng sẽ thừa nhận, xét về ấn tượng đầu tiên, nó không tuyệt vời và bạn phải dùng thử mới tin được. Khi tôi lần đầu tiên nhìn vào Tailwind, tôi đã hoài nghi. Tôi đánh giá cao mã có thể đọc được và điều này có vẻ ngược lại, vậy tại sao rất nhiều nhà phát triển lại ủng hộ cách tiếp cận ưu tiên tiện ích của Tailwind? CSS đuôi gió. ưuChuyển ngữ cảnh Như đã đề cập trong phần nhược điểm của Sass, việc chuyển ngữ cảnh giữa các tệp có thể cản trở sự tập trung của nhà phát triển và dẫn đến mất thời gian. Tailwind giải quyết rắc rối này và cho phép bạn viết các phong cách của mình ngay tại đó bằng mã đánh dấu. Điều mà một số người có thể coi là một vấn đề đau đầu nhỏ, có thể là một cách tiết kiệm thời gian rất lớn cho những người khác đặt tên Một lần nữa, như tôi đã đưa ra trong danh sách khuyết điểm của Sass, việc đặt tên là một điều khó chịu khi điều hướng. Với Tailwind, bạn không còn nghĩ ra các lớp của riêng mình cho từng thành phần nữa, thay vào đó, bạn đang tạo kiểu cho thành phần bằng cách sử dụng các lớp tiện ích được cung cấp của chúng. Ví dụ: nếu bạn chỉ cần một hộp linh hoạt một cách nhanh chóng, thì rất dễ dàng ném một CSS của bạn ngừng phát triển Tailwind CSS cung cấp cho bạn một tập hợp các lớp tiện ích để sử dụng và bên cạnh những lớp tiện ích đó, bạn sẽ rất hiếm khi cần viết CSS tùy chỉnh của riêng mình, dẫn đến đầu ra CSS nhỏ hơn Nếu lo lắng về việc bao gồm tất cả các lớp tiện ích bổ sung không sử dụng mà Tailwind cung cấp, bạn có thể sử dụng công cụ như PurgeCSS để xóa tất cả CSS không sử dụng Thực hiện thay đổi cảm thấy an toàn hơn Vì kiểu dáng được thực hiện trong phần đánh dấu thay vì biểu định kiểu dáng bên ngoài, nên khi bạn cần thay đổi kiểu dáng, bạn sẽ dễ dàng biết chính xác những gì mình đang cập nhật. Không có tác dụng phụ ngoài ý muốn nào khác trong ứng dụng. Bạn vẫn có thể tạo các thành phần Bạn có thể đang nghĩ, “được rồi, tiện ích nghe có vẻ hay nhưng còn khi tôi muốn một nút có cùng kiểu trong ứng dụng thì sao?”. Tin tốt, nó được gọi là “tiện ích đầu tiên” chứ không phải “chỉ tiện ích. ” Bạn vẫn có thể tạo các lớp thông thường khi sử dụng Tailwind. Nếu cần một thành phần nút, bạn có thể dễ dàng trích xuất mã Tailwind của mình thành các lớp có thể tái sử dụng Dòng mã với Tailwind CSS đang hiển thị một nút Khi bạn bắt đầu viết css ưu tiên tiện ích, bạn có thể nhận ra rằng hầu hết các “thành phần” cuối cùng không được sử dụng lại. Có vẻ như cần phải có một lớp cho thành phần “Thanh thông báo” của bạn, nhưng liệu lớp đó có thực sự được sử dụng lại ở đâu đó không? . Bạn có thể sử dụng thành phần Vô hiệu hóa bộ đệm Trình duyệt lưu trữ nội dung tĩnh, điều này tốt cho hiệu suất, nhưng nếu bạn chỉ cần thực hiện một số chỉnh sửa kiểu CSS cho trang web của mình, thì bạn cần xóa tệp khỏi bộ đệm. Tuy nhiên, với Tailwind, vì kiểu dáng hiện đã được đánh dấu nên bạn không phải lo lắng về việc làm mất hiệu lực nội dung css của mình Tiện ích-Đầu tiên. Nhược điểmĐánh dấu khó đọc Khả năng đọc chắc chắn bị ảnh hưởng khi sử dụng các lớp tiện ích. Đặc biệt nếu bạn cần các tên lớp khác nhau cho các điểm dừng hoặc sự kiện di chuột khác nhau, bạn có thể nhanh chóng kết thúc với các tên lớp rất dài. Dòng mã có Tailwind CSS hiển thị đánh dấu khó đọc Tôi thậm chí không thể ghi lại toàn bộ dòng này cho một hình ảnh. Chỉ cần biết rằng điều này cuộn trên một chiều rộng màn hình khác… Đường cong học tập Có một đường cong học tập ban đầu đi kèm với việc chuyển sang các lớp tiện ích. Khi bắt đầu thử nghiệm với Tailwind, tôi cảm thấy khó chịu khi biết chính xác thuộc tính kiểu nào mình muốn áp dụng, nhưng lại không biết tính năng tương đương của Tailwind và phải liên tục chuyển sang tab Cheat Sheet của Tailwind (đây là cứu cánh). Khi bạn đã quen thuộc hơn với các lớp, tôi có thể thấy điều này tăng tốc đáng kể và thực sự tăng tốc độ phát triển. Tuy nhiên, ban đầu chắc chắn sẽ có một chút khó khăn cần vượt qua Không còn 'xếp tầng' Tôi đặt điều này trong phần "khuyết điểm" vì khi mới bắt đầu tìm hiểu về Tailwind, tôi đã nghĩ đó là một. Tuy nhiên, việc mất 'thác' thực sự là một điều TỐT Tính đặc hiệu phải là nguồn lỗi CSS số một. Nếu bạn đã từng phải ghi đè các kiểu của bên thứ ba thì có lẽ bạn biết nỗi đau khi vượt qua 5 cấp độ cụ thể trước bạn. a) Tìm cấp độ bạn cần và áp dụng thành công phong cách của bạn b) Bỏ cuộc và tát một cái. quan trọng ở cuối. (Giả sử chưa có Tất nhiên, việc sử dụng tên lớp và tránh các bộ chọn con là điều mà người ta có thể làm khi làm việc với CSS thông thường, nhưng việc thực thi quy tắc đó tùy thuộc vào nhà phát triển. Với Tailwind, nó đã được thực thi bởi khuôn khổ Nhìn chung, CSS ưu tiên tiện ích sử dụng Tailwind có vẻ là một lựa chọn chắc chắn. Tôi nghĩ điểm thu hút lớn nhất của Tailwind là tốc độ mà nó cho phép các nhà phát triển tạo kiểu cho các yếu tố, cũng như hạn chế khả năng sử dụng sai mục đích. Điều đó không có nghĩa là không thể lạm dụng Tailwind. Mọi thứ đều có thể, nhưng có ít cách để lạm dụng nó hơn so với CSS thông thường kiểu 3. CSS-in-JS (có. thành phần theo kiểu)Về phương pháp tạo kiểu cuối cùng. CSS-in-JS, tập trung vào React. thư viện js styled-components. CSS-in-JS có ý tưởng tương tự như Tailwind về Một ví dụ về thành phần Nút phản ứng được viết bằng các thành phần theo kiểu CSS-in-JS. ưuĐặt tên + Chuyển ngữ cảnh Tương tự như với các lớp tiện ích ở trên, styled-components cũng làm giảm bớt hai vấn đề này với CSS. Mã CSS của bạn nằm ngay trong cùng một tệp với phần đánh dấu của bạn và bạn không phải lo lắng về việc chuyển đổi qua lại Kiểu có phạm vi Một lần nữa, giống như Tailwind, các kiểu được đặt trong phạm vi một thành phần cụ thể. Điều này dẫn đến việc bảo trì dễ dàng hơn vì các kiểu có thể được tìm thấy cạnh nhau với phần đánh dấu mà chúng đề cập đến. Nỗi lo ảnh hưởng đến bất kỳ thứ gì khác trong ứng dụng đã được loại bỏ. Điều này cũng thực thi các phương pháp mã tốt nhất khi tạo các thành phần nhỏ, có thể tái sử dụng thay vì các thành phần lớn, dài có chứa những thành phần có thể là nhiều thành phần. Bằng cách buộc bạn phải suy nghĩ về từng thành phần mà bạn muốn tạo kiểu như một thành phần, nó cũng thực thi việc trích xuất các thành phần React có thể tái sử dụng nếu có thể Chức năng JS trong CSS Vì mã CSS của bạn nằm trong mã JS nên bạn có thể sử dụng bất kỳ chức năng JS nào mà bạn có thể cần để xác định kiểu dáng. Đối với tôi, đây là một trong những điểm thu hút lớn nhất của CSS-in-JS. Theo truyền thống, điều này sẽ cần được thực hiện với các lớp, vì vậy nếu bạn có 5 loại nút khác nhau, bạn sẽ cần các lớp tương ứng cho từng loại. Với các thành phần được tạo kiểu, bạn có thể xử lý tất cả trong JS, điều này giúp quy trình làm việc của bạn mượt mà hơn nhiều. Dòng mã làm nổi bật chức năng Javascript trong CSS Điều này đặc biệt hữu ích cho chủ đề + kiểu dựa trên đầu vào của người dùng CSS-in-JS. Nhược điểmMàn biểu diễn Trước đây, người ta nói rằng hiệu suất trước đây là một vấn đề với các thành phần kiểu dáng. Tuy nhiên, từ những gì tôi đã thấy, có vẻ như trong bản phát hành v5 mới của họ, họ tuyên bố đã thực hiện những cải tiến lớn đối với cả hiệu suất và kích thước gói, tự hào với kích thước gói nhỏ hơn ấn tượng 26%, cập nhật kiểu động nhanh hơn 26% và 45% . Bạn có thể tìm thêm thông tin về các bản cập nhật v5 trong bài viết Phương tiện này Sự kết luậnVì vậy, câu hỏi triệu đô la, "Cách tiếp cận nào là tốt nhất?" Mặc dù Nhóm Web của chúng tôi ở đây tại TTT đã quen với việc viết Sass và thích nó, nhưng tôi có thể nói rằng việc dùng thử Tailwind hoặc styled-components rất thú vị. Nhóm Di động của chúng tôi hiện đang sử dụng Tailwind với React Native và một số nhà phát triển của chúng tôi đã tin tưởng vào điều đó. Sẽ thật tuyệt nếu các nhóm Web và Di động của chúng tôi thống nhất về khung lựa chọn kiểu dáng của chúng tôi, để giúp gắn kết giữa hai ngăn xếp. Mặt khác, styled-components được kết hợp chặt chẽ với React và cách suy nghĩ của React về các component, vì vậy nó sẽ rất phù hợp với ngăn xếp React hiện tại của chúng ta Như thường lệ đối với các khung lập trình, không có câu trả lời chắc chắn nào ở đây, có rất nhiều ý kiến cá nhân liên quan và các nhà phát triển khác nhau sẽ thành công hơn với các khung khác với những khung khác Sass có tốt hơn Bootstrap không?"Khả năng phản hồi", "Các thành phần giao diện người dùng" và "Tính nhất quán" là những yếu tố chính khiến các nhà phát triển xem xét Bootstrap; . Sass is favored.
Tailwind có tốt hơn Bootstrap không?Một ưu điểm quan trọng khác của việc sử dụng Tailwind CSS so với Bootstrap là vì các ứng dụng và trang web bao gồm các tiện ích con được thiết kế sẵn nên Tailwind CSS không áp đặt các quyết định thiết kế khó đảo ngược< . Làm việc với Tailwind CSS có nghĩa là sử dụng một tập hợp các lớp tiện ích cho phép bạn làm việc với chính xác những gì bạn cần. . Working with Tailwind CSS means using a set of utility classes that lets you work with exactly what you need.
Tôi có nên sử dụng Sass với Tailwind không?Sử dụng Sass, Less hoặc Stylus. Để có trải nghiệm phát triển tốt nhất, chúng tôi thực sự khuyên bạn chỉ nên sử dụng PostCSS và bạn không sử dụng các bộ tiền xử lý như Sass trở xuống trong các dự án Tailwind của mình .
Sass có còn phù hợp vào năm 2022 không?Mặc dù tính năng lồng sắp có trong CSS, nhưng phiên bản Sass đã có mặt hôm nay và phiên bản này có nhiều tính năng hơn so với tính năng lồng nhau của CSS gốc sẽ có. Chẳng hạn, chúng tôi không cần & trong Sass, khiến nó có cảm giác trực quan hơn. Và chúng ta có thể lồng các truy vấn phương tiện bên trong bộ chọn. Và chúng ta có thể sử dụng lồng nhau để tạo tên lớp gia tăng. |
