استكشاف SMACSS: بنية قابلة للتطوير والوحدات لـ CSS

نشرت: 2022-03-11

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

لذا فإن ما فعله الكثير هو أنهم أنشأوا بنى CSS للمساعدة في تصميم كودهم بحيث يصبح CSS أكثر قابلية للقراءة. SMACSS - بنية نموذجية وقابلة للتطوير ونمطية لـ CSS - تقوم بذلك بالضبط. إنها مجموعة معينة من إرشادات بنية CSS من Jonathan Snook التي اعتمدتها.

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

يستخدم كل هيكل مشروع SMACSS خمس فئات:

  1. يتمركز
  2. تخطيط
  3. الوحدات
  4. حالة
  5. سمة

يتمركز

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

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

فيما يلي مثال على الشكل الذي يجب أن تبدو عليه وحدة الملفات الأساسية:

 html { margin: 0; font-family: sans-serif; } a { color: #000; } button { color: #ababab; border: 1px solid #f2f2f2; }

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

SMACSS أم لا ، أوصي بشدة بتجنب استخدام !important قدر الإمكان ، وعدم استخدام التداخل العميق ، لكنني سأتحدث أكثر عن ذلك لاحقًا في هذا المنشور. أيضًا إذا كانت ممارستك هي استخدام إعادة تعيين CSS ، فهذا هو المكان الذي يجب عليك تضمينه فيه. (أفضل استخدام Sass ، لذلك أقوم فقط بتضمينه في الجزء العلوي من الملف ، بدلاً من الاضطرار إلى نسخه أو الرجوع إليه بشكل منفصل عن عنصر <head> لكل صفحة.)

الموضوعات ذات الصلة: Theming with Sass: An SCSS Tutorial

تخطيط

ستقسم أنماط التخطيط الصفحة إلى أقسام رئيسية - ليست أقسامًا مثل التنقل أو ربما الأكورديون ، على سبيل المثال ، ولكن أقسام المستوى الأعلى حقًا:

مثال على أنماط تخطيط SMACSS: رأس ، شريط جانبي ، محتوى / رئيسي ، وتذييل

أنماط تخطيط SMACSS مخصصة للأقسام الرئيسية مثل الرأس والشريط الجانبي والمحتوى / الرئيسي والتذييل.

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

مثال لصفحة ويب يمكن تنظيمها في أنماط تخطيط رأس ، رئيسي ، وتذييل باستخدام SMACSS

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

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

فيما يلي مثال على الشكل الذي يجب أن يبدو عليه:

 #header { background: #fcfcfc; } #header .l-right { float: right; } #header .l-align-center { text-align: center; }

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

كمثال آخر ، يمكنك استخدام بعض الهوامش الافتراضية في مربع تخطيط ، مثل .l-margin بهامش 20 20px . بعد ذلك ، أينما تريد حشوة لبعض الحاويات أو العناصر أو البطاقات أو الصناديق ، ما عليك سوى إضافة فئة l-margin إليها. لكنك تريد شيئًا يمكن إعادة استخدامه:

 .l-full-width { width: 100%; }

لا يوجد شيء مقترن داخليًا مثل هذا:

 .l-width-25 { width: 25px; }

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

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

يساعدك Namespacing في حل هذا. في النهاية ، يطلق عليهم نفس الشيء على مستوى واحد ، لكن لديهم مساحة اسم مختلفة - بادئة مختلفة - وبالتالي يمكن أن يمثلوا نمطين مختلفين:

 .box--label { color: blue; } .card--label { color: red; }

وحدة

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

مثال على التسلسل الهرمي للملف / المجلد باستخدام SMACSS و Sass

في المثال السابق ، كان لدينا مقال ، يمكن أن يكون وحدة بمفردها. كيف ينبغي هيكلة CSS هنا؟ يجب أن يكون لدينا class .article الذي يمكن أن يكون له title text للعناصر الفرعية. حتى نتمكن من الاحتفاظ بها في نفس الوحدة ، نحتاج إلى بادئة العناصر الفرعية:

 .article { background: #f32; } .article--title { font-size: 16px; } .article--text { font-size: 12px; }

قد تلاحظ أننا نستخدم واصلتين بعد بادئة الوحدة النمطية. والسبب هو أن أسماء الوحدات تحتوي في بعض الأحيان على كلمتين أو بادئات خاصة بها مثل big-article . نحتاج إلى واصلتين من أجل معرفة أي جزء منه هو العنصر الفرعي - على سبيل المثال مقارنة big-article-title big-article--title big-article--text .

يمكنك أيضًا تضمين الوحدات النمطية داخل الوحدات النمطية إذا كانت وحدة نمطية معينة تشغل جزءًا كبيرًا من الصفحة:

 <div class="box"> <div class="box--label">This is box label</div> <ul class="box--list list"> <li class="list--li">Box list element</li> </ul> </div>

هنا ، في هذا المثال البسيط ، يمكنك أن ترى أن box عبارة عن وحدة نمطية list عبارة عن وحدة نمطية أخرى بداخله. لذا list--li هو عنصر تابع لوحدة list وليس من box . أحد المفاهيم الأساسية هنا هو استخدام محددين كحد أقصى لكل قاعدة CSS ، ولكن في معظم السيناريوهات يكون لديك محدد واحد فقط ببادئات.

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

جيد (لاحظ المحدد الفردي):

 .red--box { background: #fafcfe; } .red-box--list { color: #000; }

سيئ (لاحظ التكرار داخل المحددات والطريقة المرجعية المتداخلة):

 .red .box { background: #fafcfe; } .red .box .list { color: #000; } .box ul { color: #fafafa; }

حالة

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

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

كما هو الحال مع أنماط التخطيط ، فإننا نميل إلى استخدام البادئات هنا. هذا يساعدنا على التعرف عليهم ومنحهم الأولوية. هنا نستخدم البادئة ، كما is الحال في is-hidden أو is-selected .

 <header> <ul class="nav"> <li class="nav--item is-selected">Contact</li> <li class="nav--item">About</li> </ul> </header>
 .nav--item.is-selected { color: #fff; }

هنا ، يمكن استخدام !important ، حيث يتم استخدام الحالة غالبًا كتعديل لـ JavaScript وليس في وقت العرض. على سبيل المثال ، لديك عنصر مخفي عند تحميل الصفحة. عند النقر فوق الزر ، تريد إظهاره. لكن الفئة الافتراضية هي كما يلي:

 .box .element { display: none; }

لذلك إذا أضفت هذا فقط:

 .is-shown { display: block; }

سيبقى مخفيًا حتى بعد إضافة فئة .is-shown إلى العنصر عبر JavaScript. هذا لأن القاعدة الأولى عميقة بمستويين وستتجاوزها.

لذلك يمكنك بدلاً من ذلك تحديد فئة الولاية مثل هذا:

 .is-shown { display: block !important; }

هذه هي الطريقة التي نميز بها بين معدّلات الحالة ومعدلات التخطيط ، والتي تنطبق فقط على التحميل الأولي للصفحة. سيعمل هذا الآن مع الحفاظ على مزايا الحد الأدنى من المحددات.

سمة

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

 .button-large { width: 60px; height: 60px; }
 <button class="button-large">Like</button>

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

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

منهجيات منظمة CSS

لقد قمت بتغطية بعض المفاهيم الأساسية لفكرة بنية CSS هذه. إذا كنت ترغب في معرفة المزيد عن هذا المفهوم ، يمكنك زيارة الموقع الرسمي لـ SMACSS والتعمق فيه.

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

سيكون من السهل على أعضاء الفريق الجدد ليس فقط فهم ما فعله المطورون السابقون ، ولكن أيضًا البدء في العمل عليه على الفور ، دون أي اختلافات في أسلوب الترميز. SMACSS هي مجرد بنية CSS وهي تقوم بما تقوله على العلبة - لا أكثر ولا أقل.