نكتب CSS أفضل وأكثر جمالا

لنكون صادقين: من الصعب كتابة CSS جيدة.
لا يحب العديد من المطورين كتابة CSS. أي شيء ، ولكن ليس هذا! ليس CSS.

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

عندما يبدأ المشروع للتو ، كل شيء يسير على ما يرام. لديك فقط اثنين من #app : .title ، input ، #app - بسهولة #app .

ولكن ينمو التطبيق تدريجيًا ، ومن المخيف النظر في CSS: ليس من السهل معرفة كل هؤلاء المحددات. تبدأ في كتابة شيء مثل div#app .list li.item a ، يتم تكرار بعض أجزاء الرمز مرارًا وتكرارًا ، وتفريغ كل ما تكتبه في نهاية الملف: أنت لا تهتم ، لأن CSS تمتص. والنتيجة هي 500 سطر من كود CSS التي لا يمكن دعمها.


إنه أنا عندما تقاتل CSS

ترجم إلى Alconost

التحدي الذي يواجهني اليوم هو تعليمك كيفية كتابة CSS بشكل أفضل. أريدك أن تنظر إلى المشاريع القديمة وتفكر: "يا إلهي! كيف يمكنك كتابة هذا؟ "

ولكن ماذا عن أطر CSS؟ - تسأل. بعد كل شيء ، تم اختراعهم لهذا - لكتابة كود CSS جيد.

حق. ولكن لديهم عيوب:

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

حسنًا ، أنت تقرأ هذا المقال - هذا يعني أن هناك سببًا ، أليس كذلك؟ لذا ، دون مزيد من اللغط ، امض قدمًا ، وتعلم كتابة CSS بشكل أفضل.

ملاحظة لا تتعلق هذه المقالة بكيفية إنشاء تطبيقات جميلة ، ولكن حول كيفية كتابة كود CSS المدعوم وكيفية تنظيمه.

SCSS

في الأمثلة ، سأستخدم SCSS .

إن SCSS عبارة عن معالج مسبق لـ CSS ، وهو في الأساس مجموعة شاملة من CSS تضيف بعض الميزات الرائعة ، مثل المتغيرات ، والتداخل ، والواردات ، والشوائب ("mixins").

بعد ذلك سأخبرك بالفرص التي سنستخدمها هنا.

المتغيرات

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

لذلك ، لديك أزرق في كل مكان: خلفية أزرار background-color ، ولون color الرؤوس ، والروابط. أزرق - في كل مكان.

وفجأة لم يعجبك اللون الأزرق. المفضلة الجديدة هي الخضراء.

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

 //   $primary-color: #0099ff; //    h1 { color: $primary-color: } 

التعشيش

في SCSS ، يمكنك استخدام التعشيش. لذلك من الجزء

 h1 { font-size: 5rem; color: blue; } h1 span { color: green; } 

يمكنك عمل رمز مثل هذا:

 h1 { font-size: 5rem; color: blue; span {  color: green; } } 

هذا الأخير يقرأ بشكل أفضل ، أليس كذلك؟ يتيح لك التعشيش قضاء وقت أقل في كتابة المحددات المعقدة.

استيراد الملفات الجزئية

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

يمكننا إنشاء "ملفات جزئية" - حيث يبدأ الاسم _animations.scss, _base.scss, _variables.scss سفلية : _animations.scss, _base.scss, _variables.scss وما إلى ذلك.

لاستيرادها ، يتم استخدام التوجيه المقابل: @import . على سبيل المثال ، يمكنك القيام بذلك:

 // _animations.scss @keyframes</i> appear { 0% {  opacity: 0; } 100% {  opacity: 1; } } <i>// header.scss</i> <b>@import "animations";</b> h1 { animation: appear 0.5s ease-out; } 

ربما كنت قد فكرت: "آها! لديه خطأ هنا! نحن بحاجة إلى كتابة _animations.scss ، وليس animations ".

كلا. إن SCSS ذكي بما يكفي لإدراك أن هذا ملف جزئي.

هذا كل ما نحتاج إلى معرفته عن المتغيرات والتداخل والملفات الجزئية والاستيراد. لدى SCSS إمكانيات أخرى - الشوائب ، والميراث ، والتوجيهات المختلفة ( @for ، @for ، ...) ، لكنني لن أتطرق إليها هنا.

إذا كنت مهتمًا ، اقرأ الوثائق : فهي واضحة بما فيه الكفاية ومكتوبة بشكل جيد.

ترتيب CSS: منهجية BEM

لقد استخدمت الأسماء الشائعة لفصول CSS مرات لا تحصى. حسنًا ، أنت تعرف: .button .page-1 .page-2 .custom-input .

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

يساعد BEM على حل هذه المشكلة. BEM عبارة عن اصطلاح تسمية ؛ لتقف على عنصر ، عنصر ، معدل.

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

كتل

يمكن تخيل كتلة كمكون. خذ ، على سبيل المثال ، مُنشئ Lego.

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

التسمية: اسم الكتلة : كتلة
أمثلة: .card, .form, .post, .user-navigation

العناصر

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

التسمية: اسم الكتلة + __ + اسم العنصر .block__element
أمثلة: .post__author, .post__date, .post__text

المعدلات

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

التسمية: اسم الكتلة OR element + -- + اسم التعديل: .block__element--modifier, .block--modifier
أمثلة: .post--important, .post__btn--disabled

ملاحظات

• BEM يعني تسمية الفئات والفصول فقط . ليست معرّفات وليست علامات - فصول فقط.
  
• يمكن أن تتداخل الكتل والعناصر في الكتل والعناصر الأخرى ، ولكن يجب أن تكون مستقلة تمامًا. مستقل بالضرورة. لذلك ، ليس من الضروري إضافة حقل إلى الزر بحيث يكون تحت العنوان ، وإلا سيتم إرفاقه بالعنوان. من الأفضل استخدام فئات المساعدة.
  
• نعم ، سيتم تحميل ملف HTML بشكل زائد ، ولكنه ليس مخيفًا: تفوق مزايا BEM هذا العيب.
  

مثال

تمرين صغير للقراء. انتقل إلى المواقع التي تزورها كثيرًا وفكر في الكتل والعناصر والمعدلات التي قد تكون هناك.

على سبيل المثال ، يمكنني أن أتخيل مثل هذه الصورة في متجر Google:



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

تنظيم ملفات CSS: المبدأ 7-1

لم اتعبك بعد؟ عظيم! دعونا نكتشف كيفية تنظيم ملفات CSS. سيؤدي ذلك إلى تحسين كفاءة العمل إلى حد كبير ويساعدك في العثور على الفور على رمز CSS الذي يجب إصلاحه.

حان الوقت للتعرف على مبدأ "7-1".
هذه الأرقام لا تخبرك بأي شيء ، أليس كذلك؟

لكن كل شيء بسيط للغاية. هناك قاعدتان يجب اتباعهما:

1. ضع الملفات الجزئية في 7 مجلدات.
   
2. قم باستيرادها جميعًا في ملف main.scss واحد موجود في الجذر. هذا كل شيء.
   

سبعة مجلدات:

• المجلد base هو رمز CSS للقالب الذي تكتبه عندما تبدأ مشروعًا جديدًا. يمكن أن تكون هذه قواعد التخطيط والرسوم المتحركة والفصول الإضافية (على سبيل المثال ، margin-right-large ، text-center ، ...) وما إلى ذلك.
  
• مجلد components - جميع المكونات المستخدمة لتكوين الصفحات: الأزرار والنماذج ووحدات الترحيل - "swipers" ، والنوافذ المنبثقة ، وما إلى ذلك.
  
• مجلد layout - لتخطيط أجزاء مختلفة من الصفحة ، أي الرأس والتذييل والتنقل والأقسام والشبكة المخصصة وما إلى ذلك.
  
• مجلد pages مخصص للصفحات التي تحتاج إلى نمط منفصل يختلف عن النمط القياسي.
  
• مجلد themes - لمختلف مواضيع التطبيق (الوضع المظلم ، الإدارة ، إلخ).
  
• مجلد abstracts - جميع الوظائف والمتغيرات والشوائب. باختصار ، الأشياء المساعدة.
  
• مجلد vendors عبارة عن مكتبة خارجية ، والتي بدونها ربما لا يمكن لتطبيق واحد القيام بها. يحتوي مجلد vendors على ملفات مستقلة عنك: Font Awesome ، ملفات Bootstrap وكل ذلك.
  

الملف الرئيسي

يتم استيراد جميع الملفات الجزئية هنا.

 @import abstracts/variables; @import abstracts/functions; @import base/reset; @import base/typography; @import base/utilities; @import components/button; @import components/form; @import components/user-navigation; @import layout/header; @import layout/footer; … 

نعم ، يبدو أنها منتفخة قليلاً ، أعترف. ولكن تم اختراع هذه البنية للمشاريع الكبيرة - وللمهام الأصغر ، هناك خيار آخر.

أولاً ، لا نحتاج إلى مجلد vendors : كل ​​كود CSS الخارجي سيكون في علامة link الموضوعة في الرأس. أيضًا ، مجلد themes غير مطلوب: على الأرجح ، سيكون للتطبيق الصغير موضوع واحد فقط. أخيرًا ، لن تكون هناك أنماط لصفحات معينة - لذلك نزيل المجلد المقابل. لذا ، تبقى أربعة مجلدات - رائع!

الآن لدينا خياران:

1. إذا اتبعت مبدأ "7-1" ، فستحتاج إلى حفظ abstracts المجلدات components layout base .
   
2. إذا كنت أكثر راحة في العمل مع مجلد كبير حيث سيكون هناك جميع الملفات الجزئية و main.scss ، main.scss على شيء مثل هذا:
   

 sass/ _animations.scss _base.scss _buttons.scss _header.scss … _variables.scss main.scss 

الأمر متروك لك.

أنا مقتنع! كيفية تطبيق كل هذا؟ أعني ، المتصفحات لا تدعم ملفات scss ، أليس كذلك؟

صحيح أن يلاحظ! في الخطوة الأخيرة ، سنقوم بتجميع SCSS في CSS.

جعل CSS من SCSS

سنحتاج إلى Node.js و NPM (أو غزل ).

سنستخدم node-sass ، التي ستسمح لنا بتجميع ملفات .scss في .css .

واجهته بسيطة للغاية:

 node-sass <> <> [] 

سنستخدم معلمتين فقط:

• -w - مراقبة الدليل أو الملف. ستنتظر node-sass تغييرات في التعليمات البرمجية ، وبمجرد اكتشافها ، ستقوم على الفور بتجميع الملف المقابل في CSS ، وهو مناسب جدًا أثناء التطوير.
  
• المعلمة --output-style الإخراج - كيف سيبدو ملف CSS الناتج. يمكن أن يأخذ القيم التالية: nested|expanded|compact|compressed . سنستخدم هذا الخيار عند إنشاء ملف CSS.
  

إذا كنت فضوليًا (آمل ذلك: يجب أن يكون المطور فضوليًا!) ، فإن الوثائق الكاملة هنا .

الآن نعرف ما هي الأدوات التي سيتم استخدامها. والباقي أسهل للقيام به:

• إنشاء مشروع: mkdir my-app && cd my-app
  
• تهيئة: npm init
  
• إضافة node-sass npm install node-sass --save-dev : npm install node-sass --save-dev
  
• قم main.scss المجلدات الضرورية main.scss index.html و main.scss :
  

 touch index.html mkdir -p sass/{abstracts,base,components,layout} css cd sass && touch main.scss 

• أضف البرامج النصية التالية إلى ملف package.json :
  

 { … "scripts": {  "watch": "node-sass sass/main.scss css/style.css -w",  "build": "node-sass sass/main.scss css/style.css --output-style compressed" }, … } 

• أضف الرابط إلى ملف CSS المترجم إلى علامة الرأس لملف index.html:
  

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <b><link rel="stylesheet" href="css/style.css"></b> <title>My app</title> </head> <body> <h1 class="heading">My app</h1> </body> </html> 

هذا كل شيء! عند كتابة الرمز ، قم بتشغيل npm run watch وافتح ملف index.html في المستعرض. لتقليل CSS ، ما npm run build سوى تشغيل npm run build .

شيء آخر

إعادة التشغيل على الطاير

من أجل الجدل بشكل أفضل ، يمكنك إضافة إعادة تحميل تلقائي لملف index.html المحلي.

للقيام بذلك ، قم بما يلي:

• قم بتثبيت حزمة live-server : npm install -g live-server
  ملاحظة: هذه حزمة عالمية .
  
• أضف npm-run-all اعتمادًا على المشروع: npm install npm-run-all --save-dev - سيتيح لك ذلك تشغيل العديد من البرامج النصية في نفس الوقت.
  
• أضف البرامج النصية التالية إلى package.json :
  

 { … "scripts": { <b>   "start": "npm-run-all --parallel liveserver watch",  "liveserver": "live-server",</b>  "watch": "node-sass sass/main.scss css/style.css -w", }, … } 

الآن ، إذا بدأت npm run start ، سيتم عرض التغييرات على الفور - بدون حركات غير ضرورية من npm run start .

البادئات التلقائية

أنشأنا أدوات التطوير - عظيم! الآن دعونا نتحدث عن أدوات البناء ، على وجه الخصوص - حول هذا: Autoprefixer .
تقوم هذه الأداة (أو بالأحرى ، المكون الإضافي postcss) بتحليل CSS وإضافة بادئات البائعين إلى قواعد CSS باستخدام قيم من Can I Use .

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

مثال على كيف سيبدو:

 -webkit-animation-name: myAnimation; -moz-animation-name: myAnimation; -ms-animation-name: myAnimation; 

نعم ، كتابته باليد مملة. إن تسهيل الحياة بالنسبة لنا هي أداة لإضافة البادئات تلقائيًا تجعل كود CSS متوافقًا مع المتصفحات دون أي جهد إضافي.

لذا ، لتجميع CSS:

1. نقوم بتجميع جميع ملفات SCSS في ملف CSS واحد.
   
2. أضف البادئات باستخدام Autoprefixer.
   
3. ضغط ملف CSS.
   

لم يبق شيء - لا تقم بتبديل القناة.

• إضافة postcss-cli - postcss-cli و autoprefixer : npm install autoprefixer postcss-cli --save-dev
  
• نقوم بتعديل البرنامج النصي build وإضافة هذه السطور إلى package.json :
  

 { … "scripts": {  "start": "npm-run-all --parallel liveserver watch",  "liveserver": "live-server",  "watch": "node-sass sass/main.scss css/style.css -w", <b>   "compile": "node-sass sass/main.scss css/style.css",  "prefix": "postcss css/style.css --use autoprefixer -o css/style.css",  "compress": "node-sass css/style.css css/style.css --output-style compressed",  "build": "npm-run-all compile prefix compress"</b> … } 

الآن عند بدء npm run build ، ستتم إضافة بادئات الموفر ، وسيتم ضغط رمز CSS نفسه. مجرد سحر!

هل تريد المزيد من السحر؟ رفعت المستودع - حتى تتمكن من معرفة ذلك بشكل أسرع؟

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

و ... هذا كل شيء لهذا اليوم! الآن يمكنك كتابة كود CSS المعتمد القابل لإعادة الاستخدام.



عن المترجم

تمت ترجمة المقال بواسطة Alconost.

تقوم Alconost بتوطين الألعاب والتطبيقات والمواقع بـ 68 لغة. مترجمون لغتهم الأم ، اختبار لغوي ، منصة سحابية بواجهة برمجة تطبيقات ، تعريب مستمر ، مدراء مشاريع 24/7 ، أي تنسيق لموارد السلسلة.

ننشئ أيضًا مقاطع فيديو إعلانية وتدريبية - للمواقع التي تبيع ، والصور ، والإعلانات ، والتدريب ، والتشويش ، والشرح ، والمقطورات لـ Google Play و App Store.

مزيد من التفاصيل