دليل أسلوب Sass: برنامج تعليمي لـ Sass حول كيفية كتابة كود CSS أفضل

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

ما هو ساس ولماذا يجب استخدامه؟

بالنسبة لأولئك منكم الذين لا يعرفون ما هو Sass ، فإن أفضل نقطة انطلاق هي زيارة صفحة ويب Sass الرسمية. Sass هو اختصار لـ StyleSheets Awesome Syntactically ، وهو امتداد لـ CSS يضيف القوة والأناقة إلى اللغة الأساسية.

Sass هو معالج CSS مسبق مع الكثير من الميزات القوية. أبرز الميزات هي المتغيرات والامتداد والمزج.

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

لماذا تحتاج إلى دليل نمط CSS

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

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

دليل الأسلوب

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

قواعد CSS العامة

يجب دائما اتباع القواعد العامة. يركزون في الغالب على كيفية تنسيق كود Sass لتحقيق الاتساق وسهولة قراءة الكود:

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

 selector1, selector2 { }

• لا تقم بتضمين مسافة بين قوسين.

 selector { @include mixin1($size: 4, $color: red); }

• استخدم علامات الاقتباس المفردة لتضمين السلاسل وعناوين URL:

 selector { font-family: 'Roboto', serif; }

• قم بإنهاء جميع القواعد بفاصلة منقوطة بدون مسافات قبل:

 selector { margin: 10px; }

قواعد المحددات

بعد ذلك ، نتبع مجموعة من القواعد لاستخدامها عند التعامل مع المحددات:

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

حافظ على قواعد ساس الخاصة بك بالترتيب

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

1. استخدم @extend أولاً. يتيح لك هذا في البداية معرفة أن هذه الفئة ترث قواعد من مكان آخر.
2. استخدم @include التالي. من الجيد أن يكون لديك مزيج ووظائف مدرجة في الأعلى ، ويسمح لك أيضًا بمعرفة ما ستكتبه (إذا لزم الأمر).
3. يمكنك الآن كتابة قواعد العناصر أو فئة CSS العادية.
4. ضع الفئات الزائفة المتداخلة والعناصر الزائفة قبل أي عنصر آخر.
5. أخيرًا ، اكتب محددات متداخلة أخرى كما في المثال التالي:

 .homepage { @extend page; @include border-radius(5px); margin-left: 5px; &:after{ content: ''; } a { } ul { } }

بعض اصطلاحات التسمية

يعتمد جزء اصطلاحات التسمية في كتاب النمط على اصطلاحات التسمية BEM و SMACSS الموجودة والتي أصبحت شائعة بين المطورين. BEM تعني بلوك ، عنصر ، معدل. تم تطويره بواسطة فريق YANDEX ، وكانت الفكرة وراء BEM هي مساعدة المطورين على فهم العلاقة بين HTML و CSS في المشروع. SMACSS من ناحية أخرى تعني Scalable and Modular Architecture لـ CSS. إنه دليل لهيكل CSS للسماح بقابلية الصيانة.

مستوحاة من هؤلاء ، قواعد اصطلاحات التسمية لدينا هي كما يلي:

• استخدم البادئة لكل نوع من العناصر. بادئة الكتل الخاصة بك ، مثل: التخطيطات ( l- ) ، والوحدات ( m- ) ، والحالات ( is- ).
• استخدم شرطين تحت السطر للعناصر التابعة لكل كتلة:

 .m-tab__icon {}

• استخدم شرطتين للمُعدِّلات لكل كتلة:

 .m-tab--borderless {}

المتغيرات

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

أيضًا ، استخدم واصلة لتسمية المتغيرات الخاصة بك:

 $red : #f44336; $secondary-red :#ebccd1;

تساؤلات الإعلام

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

 // ScSS .m-block { &:after { @include breakpoint(tablet){ content: ''; width: 100%; } } }

يؤدي هذا إلى إنشاء CSS مثل هذا:

 // Generated CSS @media screen and (min-width: 767px) { .m-block:after { content: ''; width: 100%; } }

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

لإنشاء استعلامات وسائط مسماة ، قم بإنشاء مزيج مثل هذا:

 @mixin breakpoint($point) { @if $point == tablet { @media (min-width: 768px) and (max-width: 1024px) { @content; } } @else if $point == phone { @media (max-width: 767px) { @content; } } @else if $point == desktop { @media (min-width: 1025px) { @content; } } }

يمكنك قراءة المزيد حول تسمية استعلامات الوسائط في المقالات التالية: تسمية استعلامات الوسائط وكتابة استعلامات وسائط أفضل باستخدام Sass.

اعتبارات أخرى

في النهاية ، إليك بعض الاعتبارات الأخرى التي يجب أن تضعها في اعتبارك وتتبعها:

• لا تكتب أبدًا بادئات البائع. استخدم المصفف التلقائي بدلاً من ذلك.
• استخدم ثلاثة مستويات كحد أقصى للعمق في القواعد المتداخلة. مع وجود أكثر من ثلاثة مستويات متداخلة ، سيكون من الصعب قراءة الكود ، وربما تكتب محددًا سيئًا. في النهاية ، أنت تكتب كود CSS لربطه بـ HTML الخاص بك.

 .class1 { .class2 { li { //last rules } } }

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

خاتمة

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