ساس و بيم

تشرح هذه المقالة ساس و بيم۔

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

YouTube Video

ساس و بيم

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

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

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

أسباب تجعل CSS يصبح غير قابل للإدارة بسهولة

يمكن أن يصبح CSS مثل ما يلي صعب الفهم حول كيفية تصرفه عندما تعود إلى الكود لاحقًا.۔

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• في هذا المثال، نفس الفئة .title تظهر بشكل مختلف اعتمادًا على مكان وضعها، لذلك لا يمكنك معرفة أي نمط سيتم تطبيقه على هذه .title على الفور.۔
• بهذه الطريقة، كلما زادت عمق المحددات وزاد اعتمادها على العناصر الأم، يصبح من الصعب التنبؤ بنطاق التأثير لـ CSS ويصبح عرضة للتلف عند التعديلات.۔

بيم هو أسلوب تسمية يعبر عن الأدوار من خلال الأسماء.

بيم هو اختصار لـ الكتلة / العنصر / المعدل، ويتضمن في الاسم ما يمثله المكون للفئة وفي أي حالة هو.۔

• الكتلة هي مكون مستقل.۔
• العنصر هو عنصر داخلي في الكتلة.۔
• المعدل يعني الحالة أو الاختلاف.۔

1.card {}
2.card__title {}
3.card--highlighted {}

من خلال هذا النمط من التسمية، يمكنك استنتاج البنية والدور فقط من خلال النظر إلى HTML.۔

الشكل الأساسي لـ HTML باستخدام بيم

فيما يلي مثال على واجهة بطاقة (Card) معروضة بـ HTML باستخدام بيم.۔

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

من أسماء الفئات فقط، يمكنك أن تفهم أن هذه 'مكون card'، و 'العنوان بداخله'، و 'حالة التأكيد'.۔ هذه هي أكبر ميزة في بيم.۔

ومع ذلك، يمكن أن يؤدي استخدام بيم وحده إلى CSS مطول ومتشعب.

إذا كتبت بيم كما هو في CSS، يميل حجم الكود إلى الزيادة.۔

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

هنا، باستخدام ساس، يمكنك الحصول على كود منظم يحافظ على البنية.۔

التعبير بشكل طبيعي عن بيم من خلال التعشيش في ساس.

باستخدام تعشيش ساس، يمكنك عكس بنية بيم مباشرة في الكود الخاص بك.۔

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& تشير إلى المحدد الأصل وتعمل بشكل ممتاز مع تسمية بيم.۔

CSS الناتج من هذا الساس

يتم تجميع الساس أعلاه إلى CSS كالتالي.۔

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

حتى لو كان المظهر نفسه، فإن العبء الذهني على المطور ينخفض بشكل ملحوظ.۔

تصميم للاستخدام الآمن للمعدلات

نظرًا لأن المعدلات في بيم تمثل 'الحالات'، فإن المفتاح هو قصر استخدامها على تجاوز القيم فقط.۔

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

يصبح التصميم أكثر استقرارًا إذا تم التعامل مع المعدلات على أنها 'تغييرات' وليس 'إضافات'.۔

حدد تعشيش العناصر إلى مستوى واحد.

في بيم، من المهم عدم تعشيش العناصر بعمق كبير.۔

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

العناصر متعددة المستويات مثل .card__header__title هي إشارة إلى أنك يجب أن تفكر في تقسيم الكتلة.۔

مثال على بنية ملفات ساس

أخيرًا، إليك مثالاً على بنية ساس عملية لمشاريع حقيقية.۔

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

إذا أدرت كل مكون على أنه كتلة واحدة = ملف واحد، فمن غير المرجح أن ينهار النظام.۔

مثال على card.scss

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

لأن كل شيء مكتفٍ ذاتيًا في هذه الوحدة، تصبح الحذف، الحركة، وإعادة الاستخدام سهلة.۔

الملخص

ساس و بيم ليستا تقنيات عصرية فقط—بل هما طرق عملية لتحويل CSS إلى كود يمكن تصميمه.۔

• بيم يسمي المعنى والدور.۔
• ساس يسمح بالكتابة بسهولة مع الحفاظ على البنية.۔
• الجمع بين الاثنين يجعل CSS أقل عرضة للانهيار.۔

لنكتب CSS اليوم بطريقة يفهمها نفسك في المستقبل.۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video