Kiểu dáng toàn cục so với cục bộ trong Next.js

[theanh]

Tôi đã có trải nghiệm tuyệt vời khi sử dụng Next.js để quản lý các dự án front-end phức tạp. Next.js có quan điểm riêng về cách tổ chức mã JavaScript, nhưng không có quan điểm tích hợp về cách tổ chức CSS.

Sau khi làm việc trong khuôn khổ, tôi đã tìm thấy một loạt các mẫu tổ chức mà tôi tin rằng vừa tuân thủ các triết lý chỉ đạo của Next.js vừa thực hiện các biện pháp thực hành CSS tốt nhất. Trong bài viết này, chúng ta sẽ cùng nhau xây dựng một trang web (một quán trà!) để chứng minh các mẫu này.

Lưu ý: Bạn có thể không cần kinh nghiệm sử dụng Next.js trước đó, mặc dù sẽ rất tốt nếu bạn có hiểu biết cơ bản về React và sẵn sàng học một số kỹ thuật CSS mới.

Viết CSS "Cũ"​

Khi lần đầu tìm hiểu về Next.js, chúng ta có thể muốn cân nhắc sử dụng một số loại thư viện CSS-in-JS. Mặc dù có thể có lợi ích tùy thuộc vào dự án, CSS-in-JS đưa ra nhiều cân nhắc về mặt kỹ thuật. Nó yêu cầu sử dụng một thư viện bên ngoài mới, làm tăng kích thước gói. CSS-in-JS cũng có thể tác động đến hiệu suất bằng cách gây ra các kết xuất và phụ thuộc bổ sung vào trạng thái toàn cục.

Đọc thêm: “Chi phí hiệu suất chưa từng thấy của các thư viện CSS-in-JS hiện đại trong ứng dụng React)” của Aggelos Arvanitakis

Hơn nữa, toàn bộ mục đích của việc sử dụng thư viện như Next.js là để kết xuất tĩnh các tài sản bất cứ khi nào có thể, vì vậy, việc viết JS cần chạy trong trình duyệt để tạo CSS là không hợp lý.

Có một số câu hỏi chúng ta phải cân nhắc khi sắp xếp kiểu trong Next.js:

"Làm thế nào chúng ta có thể phù hợp với các quy ước/thực hành tốt nhất của khuôn khổ?

Làm thế nào chúng ta có thể cân bằng các mối quan tâm về kiểu "toàn cục" (phông chữ, màu sắc, bố cục chính, v.v.) với các bố cục "cục bộ" (kiểu liên quan đến các thành phần riêng lẻ)?"

Câu trả lời tôi đưa ra cho câu hỏi đầu tiên là chỉ cần viết CSS theo kiểu cũ. Next.js không chỉ hỗ trợ thực hiện việc này mà không cần thiết lập bổ sung; nó còn mang lại kết quả hiệu suất cao và tĩnh.

Để giải quyết vấn đề thứ hai, tôi áp dụng một cách tiếp cận có thể tóm tắt trong bốn phần:

1. Mã thông báo thiết kế
2. Kiểu toàn cục
3. Lớp tiện ích
4. Kiểu thành phần

Tôi chịu ơn ý tưởng của Andy Bell về CUBE CSS ("Thành phần, Tiện ích, Khối, Ngoại lệ") ở đây. Nếu bạn chưa từng nghe về nguyên tắc tổ chức này trước đây, tôi khuyên bạn nên xem trang web chính thức hoặc tính năng trên Smashing Podcast. Một trong những nguyên tắc chúng ta sẽ học từ CUBE CSS là ý tưởng rằng chúng ta nên chấp nhận thay vì sợ CSS cascade. Hãy cùng tìm hiểu các kỹ thuật này bằng cách áp dụng chúng vào một dự án trang web.

Bắt đầu​

Chúng ta sẽ xây dựng một cửa hàng trà vì, ừm, trà rất ngon. Chúng ta sẽ bắt đầu bằng cách chạy yarn create next-app để tạo một dự án Next.js mới. Sau đó, chúng ta sẽ xóa mọi thứ trong thư mục styles/ (tất cả đều là mã mẫu).

Lưu ý: Nếu bạn muốn theo dõi dự án đã hoàn thành, bạn có thể xem tại đây.

Mã thông báo thiết kế​

Trong hầu hết mọi thiết lập CSS, việc lưu trữ tất cả các giá trị được chia sẻ toàn cục trong các biến đều có lợi ích rõ ràng. Nếu khách hàng yêu cầu thay đổi màu, việc triển khai thay đổi chỉ là một dòng lệnh thay vì phải tìm và thay thế một cách lộn xộn. Do đó, một phần quan trọng trong thiết lập CSS Next.js của chúng ta sẽ là lưu trữ tất cả các giá trị trên toàn trang web dưới dạng mã thông báo thiết kế.

Chúng ta sẽ sử dụng Thuộc tính tùy chỉnh CSS tích hợp để lưu trữ các mã thông báo này. (Nếu bạn không quen với cú pháp này, bạn có thể xem “Hướng dẫn chiến lược về thuộc tính tùy chỉnh CSS”.) Tôi nên đề cập rằng (trong một số dự án) tôi đã chọn sử dụng các biến SASS/SCSS cho mục đích này. Tôi chưa tìm thấy bất kỳ lợi thế thực sự nào, vì vậy tôi thường chỉ đưa SASS vào một dự án nếu tôi thấy mình cần các tính năng SASS khác (hỗn hợp, lặp lại, nhập tệp, v.v.). Ngược lại, các thuộc tính tùy chỉnh CSS cũng hoạt động với thác đổ và có thể thay đổi theo thời gian thay vì biên dịch tĩnh. Vì vậy, đối với ngày hôm nay, hãy sử dụng CSS thuần túy.

Trong thư mục styles/ của chúng ta, hãy tạo một tệp design_tokens.css mới:

:root { --green: #3FE79E; --dark: #0F0235; --off-white: #F5F5F3; --space-sm: 0,5rem; --space-md: 1rem; --space-lg: 1,5rem; --font-size-sm: 0,5rem; --font-size-md: 1rem; --font-size-lg: 2rem;}

Tất nhiên, danh sách này có thể và sẽ tăng lên theo thời gian. Sau khi thêm tệp này, chúng ta cần chuyển sang tệp pages/_app.jsx, đây là bố cục chính cho tất cả các trang của chúng ta và thêm:

import '../styles/design_tokens.css'

Tôi muốn coi các mã thông báo thiết kế như chất kết dính duy trì tính nhất quán trong toàn bộ dự án. Chúng tôi sẽ tham chiếu các biến này trên quy mô toàn cầu, cũng như trong các thành phần riêng lẻ, đảm bảo ngôn ngữ thiết kế thống nhất.

Kiểu toàn cầu​

Tiếp theo, hãy thêm một trang vào trang web của chúng tôi! Hãy vào tệp pages/index.jsx (đây là trang chủ của chúng tôi). Chúng tôi sẽ xóa tất cả các mẫu và thêm một cái gì đó như:

export default function Home() { return  [HEADING=1]Trà thơm[/HEADING] 
Chào mừng đến với cửa hàng trà tuyệt vời của chúng tôi.
 
Chúng tôi đã mở cửa từ năm 1987 và phục vụ khách hàng bằng các loại trà ô long được hái thủ công.
 }

Thật không may, trông nó khá đơn giản, vì vậy hãy thiết lập một số kiểu toàn cục cho các thành phần cơ bản, ví dụ như thẻ [HEADING=1]. (Tôi thích nghĩ về những kiểu này như là "mặc định toàn cục hợp lý".) Chúng ta có thể ghi đè chúng trong những trường hợp cụ thể, nhưng chúng là một phỏng đoán tốt về những gì chúng ta sẽ muốn nếu không làm vậy.

Tôi sẽ đặt điều này trong tệp styles/globals.css (mặc định có trong Next.js):

*,*::before,*::after { box-sizing: border-box;}body { color: var(--off-white); background-color: var(--dark);}h1 { color: var(--green); font-size: var(--font-size-lg);}p { font-size: var(--font-size-md);}p, article, section { line-height: 1.5;}:focus { outline: 0.15rem dashed var(--off-white); outline-offset: 0.25rem;}main:focus { outline: none;}img { max-width: 100%;}

Tất nhiên, phiên bản này khá cơ bản, nhưng tệp globals.css của tôi thường không thực sự cần phải quá lớn. Ở đây, tôi định kiểu các thành phần HTML cơ bản (tiêu đề, nội dung, liên kết, v.v.). Không cần phải bọc các thành phần này trong các thành phần React hoặc liên tục thêm các lớp chỉ để cung cấp kiểu cơ bản.

Tôi cũng bao gồm bất kỳ thiết lập lại kiểu trình duyệt mặc định nào. Thỉnh thoảng, tôi sẽ có một số kiểu bố cục toàn trang web để cung cấp "chân trang cố định", ví dụ, nhưng chúng chỉ thuộc về đây nếu tất cả các trang chia sẻ cùng một bố cục. Nếu không, nó sẽ cần phải được giới hạn bên trong các thành phần riêng lẻ.

Tôi luôn bao gồm một số loại kiểu :focus để rõ ràng chỉ ra các thành phần tương tác cho người dùng bàn phím khi được tập trung. Tốt nhất là biến nó thành một phần không thể thiếu trong DNA thiết kế của trang web!

Bây giờ, trang web của chúng tôi đang bắt đầu định hình:

Lớp tiện ích​

Một lĩnh vực mà trang chủ của chúng ta chắc chắn có thể cải thiện là văn bản hiện tại luôn kéo dài sang hai bên màn hình, vì vậy hãy giới hạn chiều rộng của nó. Chúng ta cần bố cục này trên trang này, nhưng tôi nghĩ rằng chúng ta cũng có thể cần nó trên các trang khác. Đây là trường hợp sử dụng tuyệt vời cho một lớp tiện ích!

Tôi cố gắng sử dụng các lớp tiện ích một cách tiết kiệm thay vì chỉ thay thế cho việc viết CSS. Tiêu chí cá nhân của tôi về thời điểm hợp lý để thêm một lớp tiện ích vào một dự án là:

1. Tôi cần nó nhiều lần;
2. Nó thực hiện tốt một việc;
3. Nó áp dụng trên nhiều thành phần hoặc trang khác nhau.

Tôi nghĩ trường hợp này đáp ứng cả ba tiêu chí, vì vậy hãy tạo một tệp CSS mới styles/utilities.css và thêm:

.lockup { max-width: 90ch; margin: 0 auto;}

Sau đó, hãy thêm import '../styles/utilities.css' vào pages/_app.jsx của chúng ta. Cuối cùng, hãy thay đổi thẻ trong pages/index.jsx của chúng ta thành .

Bây giờ, trang của chúng ta đã hoàn thiện hơn nữa. Vì chúng ta đã sử dụng thuộc tính max-width, nên chúng ta không cần bất kỳ truy vấn phương tiện nào để làm cho bố cục của chúng ta phản hồi trên thiết bị di động. Và, vì chúng ta đã sử dụng đơn vị đo ch — tương đương với chiều rộng của một ký tự — nên kích thước của chúng ta sẽ thay đổi theo kích thước phông chữ của trình duyệt người dùng.



Khi trang web của chúng tôi phát triển, chúng tôi có thể tiếp tục thêm nhiều lớp tiện ích hơn. Tôi áp dụng cách tiếp cận khá thực dụng ở đây: Nếu tôi đang làm việc và thấy mình cần một lớp khác cho một màu sắc hoặc thứ gì đó, tôi sẽ thêm lớp đó. Tôi không thêm mọi lớp có thể có dưới ánh mặt trời — điều đó sẽ làm tăng kích thước tệp CSS và khiến mã của tôi trở nên khó hiểu. Đôi khi, trong các dự án lớn hơn, tôi muốn chia nhỏ mọi thứ thành một thư mục styles/utilities/ với một vài tệp khác nhau; tùy thuộc vào nhu cầu của dự án.

Chúng ta có thể coi các lớp tiện ích như bộ công cụ gồm các lệnh tạo kiểu chung, lặp lại được chia sẻ trên toàn cầu. Chúng giúp chúng ta không phải liên tục viết lại cùng một mã CSS giữa các thành phần khác nhau.

Kiểu thành phần​

Chúng ta đã hoàn thành trang chủ của mình tại thời điểm này, nhưng chúng ta vẫn cần xây dựng một phần của trang web: cửa hàng trực tuyến. Mục tiêu của chúng ta ở đây là hiển thị lưới thẻ của tất cả các loại trà mà chúng ta muốn bán, vì vậy chúng ta sẽ cần thêm một số thành phần vào trang web của mình.

Chúng ta hãy bắt đầu bằng cách thêm một trang mới tại pages/shop.jsx:

export default function Shop() { return   Mua trà của chúng tôi[/HEADING]  }

Sau đó, chúng ta sẽ cần một số loại trà để hiển thị. Chúng ta sẽ bao gồm tên, mô tả và hình ảnh (trong thư mục public/) cho mỗi loại trà:

const teas = [ { name: "Oolong", description: "A partial yeast tea.", image: "/oolong.jpg" }, // ...]

Lưu ý: Đây không phải là bài viết về việc truy xuất dữ liệu, vì vậy chúng tôi đã thực hiện theo cách dễ dàng và định nghĩa một mảng ở đầu tệp.

Tiếp theo, chúng ta sẽ cần định nghĩa một thành phần để hiển thị các loại trà của mình. Hãy bắt đầu bằng cách tạo một thư mục components/ (Next.js không tạo thư mục này theo mặc định). Sau đó, hãy thêm thư mục components/TeaList. Đối với bất kỳ thành phần nào cần nhiều hơn một tệp, tôi thường đặt tất cả các tệp liên quan vào trong một thư mục. Làm như vậy sẽ ngăn thư mục components/ của chúng ta không bị mất điều hướng.

Bây giờ, hãy thêm tệp components/TeaList/TeaList.jsx của chúng ta:

import TeaListItem from './TeaListItem'const TeaList = (props) => { const { teas } = props return [LIST] {teas.map(tea => )} [/LIST]}export default TeaList

Mục đích của thành phần này là lặp lại các loại trà của chúng ta và hiển thị một mục danh sách cho mỗi loại, vì vậy bây giờ chúng ta hãy định nghĩa thành phần components/TeaList/TeaListItem.jsx của chúng ta:

import Image from 'next/image'const TeaListItem = (props) = > { const { tea } = props return 
[*]      [HEADING=2]{tea.name}[/HEADING] 
{tea.description}
  }export default TeaListItem

Lưu ý rằng chúng tôi đang sử dụng thành phần hình ảnh tích hợp của Next.js. Tôi đặt thuộc tính alt thành một chuỗi rỗng vì hình ảnh chỉ mang tính trang trí trong trường hợp này; chúng tôi muốn tránh làm chậm người dùng trình đọc màn hình bằng các mô tả hình ảnh dài dòng ở đây.

Cuối cùng, hãy tạo một tệp components/TeaList/index.js để các thành phần của chúng ta dễ dàng nhập bên ngoài:

import TeaList from './TeaList'import TeaListItem from './TeaListItem'export { TeaListItem }export default TeaList

Sau đó, hãy kết nối tất cả lại với nhau bằng cách thêm import TeaList from ../components/TeaList và một phần tử vào trang Cửa hàng của chúng ta. Bây giờ, các loại trà của chúng ta sẽ hiển thị trong một danh sách, nhưng nó sẽ không đẹp mắt lắm.

Colocating Style With Components Through CSS Modules​

Chúng ta hãy bắt đầu bằng cách tạo kiểu cho các thẻ của chúng ta (thành phần TeaListLitem). Bây giờ, lần đầu tiên trong dự án của chúng ta, chúng ta sẽ muốn thêm kiểu dành riêng cho một thành phần. Hãy tạo một tệp mới components/TeaList/TeaListItem.module.css.

Bạn có thể thắc mắc về module trong phần mở rộng tệp. Đây là Mô-đun CSS. Next.js hỗ trợ các module CSS và bao gồm một số tài liệu hướng dẫn tốt về chúng. Khi chúng ta viết tên lớp từ một module CSS như .TeaListItem, nó sẽ tự động được chuyển đổi thành một cái gì đó giống như . TeaListItem_TeaListItem__TFOk_ với một loạt các ký tự bổ sung được thêm vào. Do đó, chúng ta có thể sử dụng bất kỳ tên lớp nào mà chúng ta muốn mà không lo lắng rằng nó sẽ xung đột với các tên lớp khác ở nơi khác trong trang web của chúng ta.

Một lợi thế khác của các module CSS là hiệu suất. Next.js bao gồm tính năng nhập động. next/dynamic cho phép chúng ta tải lười các thành phần để mã của chúng chỉ được tải khi cần, thay vì thêm vào toàn bộ kích thước gói. Nếu chúng ta nhập các kiểu cục bộ cần thiết vào các thành phần riêng lẻ, thì người dùng cũng có thể tải lười CSS cho các thành phần được nhập động. Đối với các dự án lớn, chúng ta có thể chọn tải lười các phần đáng kể của mã và chỉ tải JS/CSS cần thiết nhất trước. Do đó, tôi thường kết thúc bằng cách tạo một tệp Mô-đun CSS mới cho mọi thành phần mới cần kiểu cục bộ.

Chúng ta hãy bắt đầu bằng cách thêm một số kiểu ban đầu vào tệp của mình:

.TeaListItem { display: flex; flex-direction: column; gap: var(--space-sm); background-color: var(--color, var(--off-white)); color: var(--dark); border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);}

Sau đó, chúng ta có thể nhập style từ ./TeaListItem.module.css trong thành phần TeaListitem của chúng ta. Biến style giống như một đối tượng JavaScript, vì vậy chúng ta có thể truy cập style.TeaListItem giống như lớp này.

Lưu ý: Tên lớp của chúng ta không cần phải viết hoa. Tôi thấy rằng quy ước về tên lớp viết hoa bên trong các mô-đun (và tên lớp viết thường bên ngoài) phân biệt tên lớp cục bộ và toàn cục về mặt trực quan.

Vì vậy, hãy lấy lớp cục bộ mới của chúng ta và gán nó cho [*] trong thành phần TeaListItem của chúng ta:

Bạn có thể thắc mắc về dòng màu nền (tức là var(--color, var(--off-white));). Đoạn mã này có nghĩa là theo mặc định, nền sẽ là giá trị --off-white của chúng ta. Nhưng nếu chúng ta đặt thuộc tính tùy chỉnh --color trên một thẻ, thuộc tính này sẽ ghi đè và chọn giá trị đó thay thế.

Lúc đầu, chúng ta sẽ muốn tất cả các thẻ của mình là --off-white, nhưng sau đó chúng ta có thể muốn thay đổi giá trị cho từng thẻ. Điều này hoạt động rất giống với props trong React. Chúng ta có thể đặt giá trị mặc định nhưng tạo một khe cắm nơi chúng ta có thể chọn các giá trị khác trong các trường hợp cụ thể. Vì vậy, tôi khuyến khích chúng ta nghĩ đến các thuộc tính tùy chỉnh CSS như phiên bản props của CSS.

Kiểu dáng vẫn sẽ không đẹp vì chúng ta muốn đảm bảo rằng các hình ảnh nằm trong vùng chứa của chúng. Thành phần Image của Next.js với prop layout="fill" lấy position: absolute; từ framework, do đó chúng ta có thể giới hạn kích thước bằng cách đặt vào một container với position: relative;.

Hãy thêm một lớp mới vào TeaListItem.module.css của chúng ta:

.ImageContainer { position: relative; width: 100%; height: 10em; overflow: hidden;}

Sau đó, hãy thêm className={styles.ImageContainer} vào chứa của chúng ta. Tôi sử dụng những cái tên tương đối "đơn giản" như ImageContainer vì chúng ta đang ở bên trong một mô-đun CSS, do đó chúng ta không phải lo lắng về việc xung đột với kiểu bên ngoài.

Cuối cùng, chúng ta muốn thêm một chút đệm vào hai bên của văn bản, vì vậy hãy thêm một lớp cuối cùng và dựa vào các biến khoảng cách mà chúng ta thiết lập làm mã thông báo thiết kế:

.Title { padding-left: var(--space-sm); padding-right: var(--space-sm);}

Chúng ta có thể thêm lớp này vào chứa tên và mô tả của chúng ta. Bây giờ, các lá bài của chúng ta trông không tệ đến thế:

Kết hợp phong cách toàn cục và cục bộ​

Tiếp theo, chúng ta muốn các thẻ của mình hiển thị theo bố cục dạng lưới. Trong trường hợp này, chúng ta chỉ đang ở ranh giới giữa các kiểu cục bộ và toàn cục. Chúng ta chắc chắn có thể mã hóa bố cục của mình trực tiếp trên thành phần TeaList. Nhưng tôi cũng có thể tưởng tượng rằng việc có một lớp tiện ích biến danh sách thành bố cục dạng lưới có thể hữu ích ở một số nơi khác.

Chúng ta hãy áp dụng cách tiếp cận toàn cục ở đây và thêm một lớp tiện ích mới vào styles/utilities.css của chúng ta:

.grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--min-item-width, 30ch), 1fr)); gap: var(--space-md);}

Bây giờ, chúng ta có thể thêm lớp .grid vào bất kỳ danh sách nào và chúng ta sẽ có được bố cục dạng lưới tự động phản hồi. Chúng ta cũng có thể thay đổi thuộc tính tùy chỉnh --min-item-width (mặc định là 30ch) để thay đổi chiều rộng tối thiểu của mỗi phần tử.

Lưu ý: Hãy nhớ nghĩ đến các thuộc tính tùy chỉnh như props! Nếu cú pháp này có vẻ lạ, bạn có thể xem “Intrinsically Responsive CSS Grid With minmax() And min()” của Chris Coyier.

Vì chúng ta đã viết kiểu này trên toàn cục, nên không cần phải cầu kỳ để thêm className="grid" vào thành phần TeaList của chúng ta. Nhưng giả sử chúng ta muốn ghép kiểu toàn cục này với một số store cục bộ bổ sung. Ví dụ, chúng ta muốn đưa thêm một chút "thẩm mỹ trà" vào và làm cho mọi thẻ khác có nền màu xanh lá cây. Tất cả những gì chúng ta cần làm là tạo một tệp components/TeaList/TeaList.module.css mới:

.TeaList > :nth-child(even) { --color: var(--green);}

Bạn còn nhớ cách chúng ta tạo thuộc tính --color custom trên thành phần TeaListItem của mình không? Vâng, bây giờ chúng ta có thể đặt thuộc tính này trong những trường hợp cụ thể. Lưu ý rằng chúng ta vẫn có thể sử dụng bộ chọn con trong các mô-đun CSS và không quan trọng là chúng ta đang chọn một phần tử được định kiểu bên trong một mô-đun khác. Vì vậy, chúng ta cũng có thể sử dụng các kiểu thành phần cục bộ của mình để tác động đến các thành phần con. Đây là một tính năng chứ không phải lỗi, vì nó cho phép chúng ta tận dụng lợi thế của CSS cascade! Nếu chúng ta thử sao chép hiệu ứng này theo cách khác, chúng ta có thể sẽ kết thúc bằng một loại súp JavaScript thay vì ba dòng CSS.

Vậy thì, làm thế nào chúng ta có thể giữ lớp .grid toàn cục trên thành phần TeaList của mình trong khi vẫn thêm lớp .TeaList cục bộ? Đây là nơi cú pháp có thể trở nên hơi kỳ quặc vì chúng ta phải truy cập lớp .TeaList của mình ra khỏi mô-đun CSS bằng cách thực hiện một cái gì đó như style.TeaList.

Một tùy chọn sẽ là sử dụng nội suy chuỗi để có được thứ gì đó như sau:

[LIST]

Trong trường hợp nhỏ này, điều này có thể đủ tốt. Nếu chúng ta trộn và kết hợp nhiều lớp hơn, tôi thấy cú pháp này khiến não tôi hơi đau đầu, vì vậy đôi khi tôi sẽ chọn sử dụng thư viện classnames. Trong trường hợp này, chúng ta sẽ có một danh sách trông hợp lý hơn:

Bây giờ, chúng ta đã hoàn thành trang Cửa hàng và đã tạo thành phần TeaList tận dụng cả kiểu toàn cục và kiểu cục bộ.

Một hành động cân bằng​

Bây giờ chúng tôi đã xây dựng quán trà của mình chỉ bằng CSS thuần túy để xử lý kiểu dáng. Bạn có thể nhận thấy rằng chúng tôi không phải mất nhiều thời gian để xử lý các thiết lập Webpack tùy chỉnh, cài đặt các thư viện bên ngoài, v.v. Đó là vì các mẫu mà chúng tôi đã sử dụng hoạt động với Next.js ngay khi xuất xưởng. Hơn nữa, chúng khuyến khích các phương pháp thực hành CSS tốt nhất và phù hợp tự nhiên với kiến trúc khung Next.js.

Tổ chức CSS của chúng tôi bao gồm bốn phần chính:

1. Mã thông báo thiết kế,
2. Kiểu toàn cục,
3. Lớp tiện ích,
4. Kiểu thành phần.

Khi chúng tôi tiếp tục xây dựng trang web của mình, danh sách các mã thông báo thiết kế và lớp tiện ích của chúng tôi sẽ tăng lên. Bất kỳ kiểu nào không hợp lý để thêm vào làm lớp tiện ích, chúng tôi có thể thêm vào các kiểu thành phần bằng cách sử dụng các mô-đun CSS. Do đó, chúng tôi có thể tìm thấy sự cân bằng liên tục giữa các mối quan tâm về kiểu cục bộ và toàn cục. Chúng tôi cũng có thể tạo mã CSS trực quan, hiệu suất cao phát triển tự nhiên cùng với trang web Next.js của mình.

Đọc thêm​

[*] Hết hành trình Gatsby của tôi
[*] Hiểu kiến trúc thư mục ứng dụng trong Next.js
[*] Tạo biểu mẫu nhiều bước hiệu quả để có trải nghiệm người dùng tốt hơn
[*] Xây dựng các trang web hiệu suất cao, bền vững với tương lai với Astro Islands và CMS không đầu[/LIST]