التصميم العام والمحلي في Next.js

لقد حظيت بتجربة رائعة في استخدام Next.js لإدارة مشاريع الواجهة الأمامية المعقدة. يُبدي Next.js رأيًا حول كيفية تنظيم كود JavaScript ، لكنه لا يحتوي على آراء مضمنة حول كيفية تنظيم CSS.

بعد العمل في إطار العمل ، وجدت سلسلة من الأنماط التنظيمية التي أعتقد أنها تتوافق مع الفلسفات التوجيهية لـ Next.js وتمارس أفضل ممارسات CSS. في هذه المقالة ، سننشئ موقعًا إلكترونيًا (متجر شاي!) معًا لتوضيح هذه الأنماط.

ملاحظة : ربما لن تحتاج إلى خبرة سابقة في Next.js ، على الرغم من أنه سيكون من الجيد أن يكون لديك فهم أساسي لـ React وأن تكون منفتحًا على تعلم بعض تقنيات CSS الجديدة.

كتابة CSS "الطراز القديم"

عند البحث لأول مرة في Next.js ، قد نميل إلى التفكير في استخدام نوع من مكتبات CSS-in-JS. على الرغم من أنه قد تكون هناك فوائد اعتمادًا على المشروع ، إلا أن CSS-in-JS تقدم العديد من الاعتبارات الفنية. يتطلب استخدام مكتبة خارجية جديدة تضيف إلى حجم الحزمة. يمكن أن يكون لـ CSS-in-JS أيضًا تأثير على الأداء من خلال التسبب في عمليات تصيير واعتماد إضافية على الحالة العالمية.

القراءة الموصى بها : " تكاليف الأداء غير المرئية لمكتبات CSS-in-JS الحديثة في تطبيقات React)" بقلم Aggelos Arvanitakis

علاوة على ذلك ، فإن الهدف الكامل من استخدام مكتبة مثل Next.js هو عرض الأصول بشكل ثابت كلما أمكن ذلك ، لذلك ليس من المنطقي كتابة JS التي تحتاج إلى تشغيلها في المتصفح لإنشاء CSS.

هناك سؤالان يتعين علينا مراعاتهما عند تنظيم النمط داخل Next.js:

كيف يمكننا التوافق مع الاتفاقيات / أفضل الممارسات لإطار العمل؟

كيف يمكننا الموازنة بين اهتمامات التصميم "العالمية" (الخطوط والألوان والتخطيطات الرئيسية وما إلى ذلك) مع الاهتمامات "المحلية" (الأنماط المتعلقة بالمكونات الفردية)؟

الجواب الذي توصلت إليه عن السؤال الأول هو ببساطة كتابة CSS بطريقة جيدة . لا يدعم Next.js فقط القيام بذلك بدون أي إعداد إضافي ؛ كما أنه يعطي نتائج ثابتة وثابتة.

لحل المشكلة الثانية ، أتبع نهجًا يمكن تلخيصه في أربع أجزاء:

1. رموز التصميم
2. الأنماط العالمية
3. فئات المنفعة
4. أنماط المكونات

أنا مدين لفكرة آندي بيل عن CUBE CSS ("التركيب ، والمرافق ، والكتل ، والاستثناء") هنا. إذا لم تكن قد سمعت عن هذا المبدأ التنظيمي من قبل ، فقد أوصيت بمراجعة موقعه الرسمي أو ميزته على Smashing Podcast. أحد المبادئ التي سنتخذها من CUBE CSS هو فكرة أننا يجب أن نتبنى سلسلة CSS بدلاً من الخوف. دعنا نتعلم هذه التقنيات من خلال تطبيقها على مشروع موقع على شبكة الإنترنت.

ابدء

سنقوم ببناء متجر شاي لأن الشاي لذيذ. سنبدأ بتشغيل yarn create next-app مشروع Next.js جديد. بعد ذلك ، سنزيل كل شيء في styles/ directory (كل كود عينة).

ملاحظة : إذا كنت ترغب في متابعة المشروع النهائي ، يمكنك التحقق من ذلك هنا.

رموز التصميم

في أي إعداد CSS تقريبًا ، هناك فائدة واضحة لتخزين جميع القيم المشتركة عالميًا في المتغيرات . إذا طلب العميل تغيير لون ما ، فإن تنفيذ التغيير يكون خطًا واحدًا وليس فوضى ضخمة للبحث والاستبدال. وبالتالي ، فإن جزءًا أساسيًا من إعداد Next.js CSS الخاص بنا هو تخزين جميع القيم على مستوى الموقع كرموز تصميمية .

سنستخدم خصائص CSS المخصصة المدمجة لتخزين هذه الرموز المميزة. (إذا لم تكن معتادًا على بناء الجملة هذا ، يمكنك التحقق من "دليل إستراتيجي لخصائص CSS المخصصة".) يجب أن أذكر أنني (في بعض المشاريع) اخترت استخدام متغيرات SASS / SCSS لهذا الغرض. لم أجد أي ميزة حقيقية ، لذلك عادةً ما أقوم بتضمين SASS فقط في مشروع إذا وجدت أنني بحاجة إلى ميزات SASS أخرى (مزيج إضافات وتكرار واستيراد ملفات وما إلى ذلك). على النقيض من ذلك ، تعمل خصائص CSS المخصصة أيضًا مع التتالي ويمكن تغييرها بمرور الوقت بدلاً من التجميع الثابت. لذا ، دعونا نتمسك اليوم بـ CSS العادي .

في دليل styles/ الخاص بنا ، لنقم بإنشاء ملف design_tokens.css جديد:

 :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; }

بالطبع ، يمكن لهذه القائمة أن تنمو وسوف تنمو بمرور الوقت. بمجرد أن نضيف هذا الملف ، نحتاج إلى الانتقال إلى صفحاتنا / ملف _app.jsx ، وهو التصميم الرئيسي لجميع صفحاتنا ، وإضافة:

 import '../styles/design_tokens.css'

أحب أن أفكر في رموز التصميم على أنها الغراء الذي يحافظ على الاتساق عبر المشروع. سنشير إلى هذه المتغيرات على نطاق عالمي ، وكذلك داخل المكونات الفردية ، مما يضمن لغة تصميم موحدة.

الأنماط العالمية

بعد ذلك ، دعنا نضيف صفحة إلى موقعنا على الإنترنت! دعنا ننتقل إلى ملف pages / index.jsx (هذه صفحتنا الرئيسية). سنحذف كل النماذج المعيارية ونضيف شيئًا مثل:

 export default function Home() { return <main> <h1>Soothing Teas</h1> <p>Welcome to our wonderful tea shop.</p> <p>We have been open since 1987 and serve customers with hand-picked oolong teas.</p> </main> }

لسوء الحظ ، سيبدو الأمر بسيطًا تمامًا ، لذلك دعونا نضع بعض الأنماط العامة للعناصر الأساسية ، مثل علامات <h1> . (أحب أن أفكر في هذه الأنماط على أنها "افتراضات عالمية معقولة".) قد نتجاوزها في حالات محددة ، لكنها تخمين جيد لما سنريده إذا لم نفعل ذلك.

سأضع هذا في ملف styles / globals.css (والذي يأتي افتراضيًا من 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%; }

بالطبع ، هذا الإصدار أساسي إلى حد ما ، لكن ملف globals.css الخاص بي لا ينتهي عادةً بالحاجة إلى الحصول على حجم كبير جدًا. هنا ، أقوم بتصميم عناصر HTML الأساسية (العناوين ، والجسم ، والروابط ، وما إلى ذلك). ليست هناك حاجة إلى التفاف هذه العناصر في مكونات React أو إضافة فئات باستمرار لتوفير النمط الأساسي.

أقوم أيضًا بتضمين أي عمليات إعادة تعيين لأنماط المتصفح الافتراضية . في بعض الأحيان ، سيكون لدي بعض أنماط التخطيط على مستوى الموقع لتوفير "تذييل ثابت" ، على سبيل المثال ، لكنها تنتمي فقط إلى هنا إذا كانت جميع الصفحات تشترك في نفس التخطيط. خلاف ذلك ، سوف تحتاج إلى تحديد النطاق داخل المكونات الفردية.

أقوم دائمًا بتضمين نوع من :focus للإشارة بوضوح إلى العناصر التفاعلية لمستخدمي لوحة المفاتيح عند التركيز. من الأفضل جعله جزءًا لا يتجزأ من الحمض النووي لتصميم الموقع!

الآن ، بدأ موقعنا الإلكتروني في التشكيل:

فئات المنفعة

من المجالات التي يمكن أن تتحسن فيها صفحتنا الرئيسية بالتأكيد أن النص يمتد دائمًا إلى جوانب الشاشة ، لذلك دعونا نحدد عرضه. نحتاج إلى هذا التنسيق في هذه الصفحة ، لكني أتخيل أننا قد نحتاجه في صفحات أخرى أيضًا. هذه حالة استخدام رائعة لفئة المنفعة!

أحاول استخدام فئات المرافق باعتدال بدلاً من استخدامها كبديل لمجرد كتابة CSS. معياري الشخصي عندما يكون من المنطقي إضافة معيار إلى المشروع هي:

1. أحتاجه مرارًا وتكرارًا ؛
2. إنه يفعل شيئًا واحدًا جيدًا ؛
3. يتم تطبيقه عبر مجموعة من المكونات أو الصفحات المختلفة.

أعتقد أن هذه الحالة تلبي جميع المعايير الثلاثة ، لذلك دعونا نصنع أنماط / utilities.css ملف CSS جديد ونضيف:

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

ثم دعونا نضيف الاستيراد '../styles/utilities.css' إلى صفحاتنا / _app.jsx . أخيرًا ، دعنا نغير علامة <main> في صفحاتنا / index.jsx إلى <main className="lockup"> .

الآن ، تتضافر صفحتنا معًا بشكل أكبر. نظرًا لأننا استخدمنا خاصية max-width ، فنحن لسنا بحاجة إلى أي استعلامات وسائط لجعل تخطيطنا للجوّال مستجيبًا. ولأننا استخدمنا وحدة قياس ch - التي تعادل عرض حرف واحد تقريبًا - فإن حجمنا ديناميكي بالنسبة لحجم خط متصفح المستخدم.

مع نمو موقعنا ، يمكننا الاستمرار في إضافة المزيد من فئات المرافق. أتبع نهجًا نفعيًا إلى حد ما هنا: إذا كنت أعمل ووجدت أنني بحاجة إلى فصل دراسي آخر للون أو شيء ما ، فأضيفه. لا أقوم بإضافة كل فئة ممكنة تحت أشعة الشمس - سيؤدي ذلك إلى زيادة حجم ملف CSS وجعل الكود الخاص بي محيرًا. في بعض الأحيان ، في المشاريع الكبيرة ، أحب تقسيم الأشياء إلى styles/utilities/ دليل مع عدد قليل من الملفات المختلفة ؛ الأمر متروك لاحتياجات المشروع.

يمكننا التفكير في فئات المنفعة على أنها مجموعة أدواتنا لأوامر التصميم الشائعة والمتكررة التي يتم مشاركتها عالميًا. إنها تساعد في منعنا من إعادة كتابة نفس CSS باستمرار بين المكونات المختلفة.

أنماط المكون

لقد انتهينا من صفحتنا الرئيسية في الوقت الحالي ، لكننا ما زلنا بحاجة إلى إنشاء جزء من موقعنا على الويب: المتجر عبر الإنترنت. سيكون هدفنا هنا هو عرض شبكة بطاقات لجميع أنواع الشاي التي نريد بيعها ، لذلك سنحتاج إلى إضافة بعض المكونات إلى موقعنا.

لنبدأ بإضافة صفحة جديدة في pages / shop.jsx :

 export default function Shop() { return <main> <div className="lockup"> <h1>Shop Our Teas</h1> </div> </main> }

بعد ذلك ، سنحتاج إلى بعض أنواع الشاي لعرضها. سنقوم بتضمين اسم ووصف وصورة (في الدليل العام) لكل شاي:

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

ملاحظة : هذه ليست مقالة حول جلب البيانات ، لذلك اتخذنا الطريق السهل وحددنا مصفوفة في بداية الملف.

بعد ذلك ، سنحتاج إلى تحديد مكون لعرض أنواع الشاي لدينا. لنبدأ بإنشاء components/ دليل (لا يجعل Next.js هذا افتراضيًا). بعد ذلك ، دعنا نضيف دليل components/TeaList . بالنسبة لأي مكون ينتهي بالحاجة إلى أكثر من ملف ، عادةً ما أضع جميع الملفات ذات الصلة داخل مجلد. يؤدي القيام بذلك إلى منع components/ مجلدنا من أن تصبح غير قابلة للتنقل.

الآن ، دعنا نضيف مكوناتنا / ملف TeaList / TeaList.jsx :

 import TeaListItem from './TeaListItem' const TeaList = (props) => { const { teas } = props return <ul role="list"> {teas.map(tea => <TeaListItem tea={tea} key={tea.name} />)} </ul> } export default TeaList

الغرض من هذا المكون هو التكرار عبر أنواع الشاي وإظهار عنصر قائمة لكل عنصر ، لذلك دعونا الآن نحدد مكوننا / TeaList / TeaListItem.jsx :

 import Image from 'next/image' const TeaListItem = (props) => { const { tea } = props return <li> <div> <Image src={tea.image} alt="" objectFit="cover" objectPosition="center" layout="fill" /> </div> <div> <h2>{tea.name}</h2> <p>{tea.description}</p> </div> </li> } export default TeaListItem

لاحظ أننا نستخدم مكون الصورة المدمج في Next.js. لقد قمت بتعيين سمة alt على سلسلة فارغة لأن الصور مزخرفة تمامًا في هذه الحالة ؛ نريد تجنب تعثر مستخدمي قارئ الشاشة مع وصف طويل للصور هنا.

أخيرًا ، لنقم بإنشاء ملف Components / TeaList / index.js ، بحيث يسهل استيراد مكوناتنا خارجيًا:

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

وبعد ذلك ، دعنا نجمعها جميعًا عن طريق إضافة استيراد TeaList من ../components/TeaList <TeaList teas={teas} /> إلى صفحة المتجر. الآن ، سيظهر الشاي لدينا في قائمة ، لكنها لن تكون جميلة جدًا.

تجميع النمط مع المكونات من خلال وحدات CSS

لنبدأ بتصميم بطاقاتنا (مكون TeaListLitem ). الآن ، ولأول مرة في مشروعنا ، سنرغب في إضافة نمط خاص بمكون واحد فقط. لنقم بإنشاء مكونات ملف جديدة / TeaList / TeaListItem.module.css .

قد تتساءل عن الوحدة النمطية في امتداد الملف. هذه وحدة CSS . يدعم Next.js وحدات CSS ويتضمن بعض التوثيق الجيد عنها. عندما نكتب اسم فئة من وحدة CSS مثل .TeaListItem ، فسوف يتحول تلقائيًا إلى شيء يشبه . TeaListItem_TeaListItem__TFOk_ . TeaListItem_TeaListItem__TFOk_ مع مجموعة من الأحرف الإضافية التي تم وضعها. وبالتالي ، يمكننا استخدام أي اسم فئة نريده دون القلق من أنه سيتعارض مع أسماء الفئات الأخرى في أي مكان آخر في موقعنا.

ميزة أخرى لوحدات CSS هي الأداء. يتضمن Next.js ميزة استيراد ديناميكية. يتيح لنا next / dynamic تحميل المكونات البطيئة بحيث لا يتم تحميل الكود الخاص بها إلا عند الحاجة ، بدلاً من الإضافة إلى حجم الحزمة بالكامل. إذا قمنا باستيراد الأنماط المحلية الضرورية إلى مكونات فردية ، فيمكن للمستخدمين أيضًا التحميل البطيء لـ CSS للمكونات المستوردة ديناميكيًا . بالنسبة للمشاريع الكبيرة ، قد نختار التحميل البطيء لأجزاء كبيرة من التعليمات البرمجية الخاصة بنا وفقط لتحميل JS / CSS الضرورية مقدمًا. نتيجة لذلك ، عادةً ما ينتهي بي الأمر بإنشاء ملف CSS Module جديد لكل مكون جديد يحتاج إلى تصميم محلي.

لنبدأ بإضافة بعض الأنماط الأولية إلى ملفنا:

 .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); }

بعد ذلك ، يمكننا استيراد النمط من ./TeaListItem.module.css في مكون TeaListitem بنا. يأتي متغير النمط مثل كائن JavaScript ، لذا يمكننا الوصول إلى هذا النمط الشبيه style.TeaListItem.

ملاحظة : لا يلزم كتابة اسم الفصل بأحرف كبيرة. لقد وجدت أن اصطلاحًا لأسماء الفئات المكتوبة بأحرف كبيرة داخل الوحدات (والأحرف الصغيرة بالخارج) يفرق بين أسماء الفئات المحلية والعالمية بصريًا.

لذلك ، لنأخذ صفنا المحلي الجديد ونخصصه إلى <li> في مكون TeaListItem بنا:

 <li className={style.TeaListComponent}>

قد تتساءل عن خط لون الخلفية (مثل var(--color, var(--off-white)); ). ما يعنيه هذا المقتطف هو أن الخلفية ستكون بشكل افتراضي هي القيمة --off-white . ولكن ، إذا قمنا بتعيين خاصية مخصصة --color على بطاقة ، فسوف يتم تجاوزها واختيار تلك القيمة بدلاً من ذلك.

في البداية ، نريد أن تكون --off-white ، لكننا قد نرغب في تغيير قيمة البطاقات الفردية لاحقًا. يعمل هذا بشكل مشابه جدًا للدعامات في React. يمكننا تعيين قيمة افتراضية ولكن إنشاء فتحة حيث يمكننا اختيار قيم أخرى في ظروف معينة. لذلك ، أشجعنا على التفكير في خصائص CSS المخصصة مثل إصدار CSS من الدعائم .

لا يزال النمط لا يبدو رائعًا لأننا نريد التأكد من بقاء الصور داخل حاوياتها. مكوّن صورة Next.js مع layout="fill" الخاصية تحصل على position: absolute; من الإطار ، حتى نتمكن من تحديد الحجم بوضع حاوية بالموضع: نسبي ؛.

دعنا نضيف فئة جديدة إلى TeaListItem.module.css لدينا:

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

ثم دعونا نضيف className={styles.ImageContainer} على <div> الذي يحتوي على <Image> . أستخدم أسماء "بسيطة" نسبيًا مثل ImageContainer لأننا داخل وحدة CSS ، لذلك لا داعي للقلق بشأن التعارض مع النمط الخارجي.

أخيرًا ، نريد إضافة القليل من الحشو على جوانب النص ، لذلك دعونا نضيف فئة أخيرة ونعتمد على متغيرات التباعد التي قمنا بإعدادها كعلامات تصميم مميزة:

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

يمكننا إضافة هذه الفئة إلى <div> التي تحتوي على اسمنا ووصفنا. الآن ، لا تبدو بطاقاتنا بهذا السوء:

الجمع بين النمط العالمي والمحلي

بعد ذلك ، نريد أن تظهر بطاقاتنا في تخطيط شبكي. في هذه الحالة ، نحن فقط على الحدود بين الأنماط المحلية والعالمية. يمكننا بالتأكيد ترميز تخطيطنا مباشرة على مكون TeaList . لكن ، يمكنني أيضًا أن أتخيل أن وجود فئة أدوات تعمل على تحويل القائمة إلى تخطيط شبكي يمكن أن يكون مفيدًا في عدة أماكن أخرى.

لنأخذ النهج العالمي هنا ونضيف فئة أدوات مساعدة جديدة في الأنماط / utilities.css :

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

الآن ، يمكننا إضافة فئة .grid في أي قائمة ، وسوف نحصل على تخطيط شبكة سريع الاستجابة تلقائيًا. يمكننا أيضًا تغيير الخاصية المخصصة --min-item-width المخصصة (افتراضيًا 30ch ) لتغيير الحد الأدنى لعرض كل عنصر.

ملاحظة : تذكر أن تفكر في الخصائص المخصصة مثل الدعائم! إذا بدت هذه الصيغة غير مألوفة ، يمكنك التحقق من "شبكة CSS سريعة الاستجابة بشكل جوهري مع minmax minmax() و min() " بواسطة Chris Coyier.

نظرًا لأننا كتبنا هذا النمط عالميًا ، فإنه لا يتطلب أي خيال لإضافة className className="grid" إلى مكون TeaList بنا. ولكن ، لنفترض أننا نريد إقران هذا النمط العالمي ببعض المتاجر المحلية الإضافية. على سبيل المثال ، نريد إضافة المزيد من "جمالية الشاي" إلى جعل كل بطاقة أخرى ذات خلفية خضراء. كل ما نحتاج إلى فعله هو إنشاء ملف مكونات / TeaList / TeaList.module.css جديد :

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

هل تتذكر كيف صنعنا خاصية --color custom للألوان في مكون TeaListItem ؟ حسنًا ، الآن يمكننا ضبطه في ظل ظروف محددة. لاحظ أنه لا يزال بإمكاننا استخدام المحددات الفرعية داخل وحدات CSS النمطية ، ولا يهم أننا نختار عنصرًا تم تصميمه داخل وحدة نمطية مختلفة. لذلك ، يمكننا أيضًا استخدام أنماط المكونات المحلية الخاصة بنا للتأثير على المكونات الفرعية. هذه ميزة وليست خطأ ، لأنها تتيح لنا الاستفادة من سلسلة CSS ! إذا حاولنا تكرار هذا التأثير بطريقة أخرى ، فمن المحتمل أن ينتهي بنا المطاف بنوع من حساء JavaScript بدلاً من ثلاثة أسطر من CSS.

بعد ذلك ، كيف يمكننا الاحتفاظ .grid العالمية في مكون TeaList الخاص بنا مع إضافة فئة .TeaList أيضًا؟ هذا هو المكان الذي يمكن أن يصبح بناء الجملة فيه غير تقليدي بعض الشيء لأنه يتعين علينا الوصول إلى فئة .TeaList بنا من وحدة CSS عن طريق القيام بشيء مثل style.TeaList .

قد يكون أحد الخيارات هو استخدام الاستيفاء النصي للحصول على شيء مثل:

 <ul role="list" className={`${style.TeaList} grid`}>

في هذه الحالة الصغيرة ، قد يكون هذا جيدًا بما فيه الكفاية. إذا كنا نمزج ونطابق المزيد من الفصول ، أجد أن بناء الجملة هذا يجعل عقلي ينفجر قليلاً ، لذلك سأختار أحيانًا استخدام مكتبة أسماء الفئات. في هذه الحالة ، ننتهي بقائمة أكثر منطقية:

 <ul role="list" className={classnames(style.TeaList, "grid")}>

الآن ، انتهينا من صفحة المتجر الخاصة بنا ، وجعلنا مكون TeaList بنا يستفيد من الأنماط العالمية والمحلية .

قانون التوازن

لقد قمنا الآن ببناء متجر الشاي الخاص بنا باستخدام CSS العادي فقط للتعامل مع التصميم. ربما لاحظت أنه لم يكن علينا قضاء وقت طويل في التعامل مع إعدادات Webpack المخصصة ، وتثبيت مكتبات خارجية ، وما إلى ذلك. هذا بسبب الأنماط التي استخدمناها للعمل مع Next.js خارج الصندوق. علاوة على ذلك ، فهم يشجعون أفضل ممارسات CSS ويتناسبون بشكل طبيعي مع بنية إطار عمل Next.js.

تتألف منظمة CSS الخاصة بنا من أربعة أجزاء رئيسية:

1. رموز التصميم ،
2. الأنماط العالمية ،
3. فئات المنفعة ،
4. أنماط المكونات.

مع استمرارنا في بناء موقعنا ، ستزداد قائمة رموز التصميم المميزة وفئات المرافق. أي نمط لا معنى لإضافته كفئة أدوات مساعدة ، يمكننا إضافته إلى أنماط المكونات باستخدام وحدات CSS. نتيجة لذلك ، يمكننا إيجاد توازن مستمر بين اهتمامات التصميم المحلية والعالمية. يمكننا أيضًا إنشاء كود CSS فعال وبديهي ينمو بشكل طبيعي جنبًا إلى جنب مع موقع Next.js الخاص بنا.