عندما تكتب الكثير من رمز CSS ، قد تواجه أكثر من خطأ واحد. قد تكون هناك حاجة إلى بعض الأدوات لمنع أخطاء كتابة CSS الخاصة بك.
ربما ، في بعض الأحيان خطأك هو حقا خطأ. من الممكن أيضًا أن تكون التناقضات أو أنماط التعليمات البرمجية غير واضحة تسبب ببساطة عن طريق المتسرع. ربما يبدو الكثير منهم تافهة (اعتمادًا على شخصيتك) ، ولكن مع نمو قاعدة التعليمات البرمجية وتراكم الوقت ، فإن الكثير من الناس سيصنعون أشياء قبيحة عند استخدامها. عواقب الأشياء ليست شيئًا يمكنك تخيله.
تحاول التحكم في نفسك. يساعدك زملائك أيضًا عندما تكون حرًا في تصحيح أخطائك في الوقت المناسب. ومع ذلك ، فإنك أنت وزملاؤك كلاهما صانع الأخطاء ، لذلك في النهاية ، فهي تعتبر حتماً على الأقل إلى حد ما. في وقت لاحق ، ستحل أنت أو الآخرين المشكلة الناجمة عن أخطاء CSS على صفحتك.
لا ترغب أنت ولا زملائك في مناقشة الأخطاء التي ارتكبتها لأنها محرجة. يمكن أن يكون محبطًا أو تمزق عاطفيًا في بعض الأحيان. تكون هناك مواصفات معينة مفيدة في بعض الأحيان في الحفاظ على قاعدة الكود ، مثل أسلوب الكتابة المتسق ، والذي قد يبدو متحمسًا ومملًا بعض الشيء عند تنفيذه يدويًا. وإلا فإنهم سيظهرون عناصر حبك المعتاد للظهور والعناد.
بالإضافة إلى ذلك ، قد تفضل تصحيح الأخطاء في الوقت المناسب بدلاً من انتظار مراجعة الكود والآخرين للإشارة إلى الأخطاء ، وتعديلها بنفسك وإعلان أنه لن يكون لديك مثل هذه الأخطاء مرة أخرى. عندما يحدث خطأ CSS الخاص بك ، ستساعدك التعليقات في الوقت المناسب على توفير الكثير من الوقت.
ما تحتاجه هو آلة تمنع الأخطاء
أنت بحاجة إلى آلة تمنع حدوث الأخطاء ، ويمكنها فهم CSS وفهمك: نواياك وتفضيلاتك وأفكارك وضعفك.
هذه الآلات سيكون لها قيود. كل شيء ليس مثاليًا. لكن هذا القيد يختلف عنك وزملاؤك. طالما أنه يمكن أن يمنع الأخطاء ، فسوف يستمر في منعها ، والعمل بلا كلل. في الوقت نفسه ، يمكنك أنت وزملاؤك دائمًا تحسين الماكينة وتوسيع وظائفه وإضعاف حدوده. إنه مصدر مفتوح ، ويمكن للناس في جميع أنحاء العالم الانضمام والقيام بدورهم-وهما مؤلفون آخرون يريدون منع أنفسهم من وجود أخطاء في كتابة CSS.
مثل الآخرين ، يحتاج مؤلفو CSS
نسمي هذه البرامج التي تمنع الأخطاء "المبيدات". هناك العديد من المبيدات الأفضل في JavaScript. ESLINT على وجه الخصوص ، فهي تعمل بأعجوبة ، تبين لنا أن linter جيد مفيد للغاية. ولكن في CSS ، لسنا محظوظين للغاية ، فإن خياراتنا محدودة للغاية: SCSS-Lint المستندة إلى Ruby مع المعالجات المسبقة الخاصة و CSS Lint السابقة.
ولكن كان كل هذا قبل ظهور postcss. بالإضافة إلى ذلك ، يوفر PostCSS بعض الطرق لبناء المزيد من أدوات CSS التفاعلية. يمكن أن يحلل أي بناء جملة من فئة CSS في مكون إضافي لشجرة بناء الجملة (AST) للتحليل والتشغيل. ومع وجود محلل مخصص ، يمكن لـ PostCSS حتى التعامل مع أنماط غير منتظمة (مثل // التعليقات)
يمكن أن تنتج ظروف النضج بالفعل مخططًا بميزات أكثر قوة-مدعوم من PostCSS ومستوحاة من أفضل ميزات SCSS-Lint و ESLINT.
عملت مع عدد قليل من الأصدقاء في هذا المشروع ، والآن سأبدأ في تقديم الأدوات التي طورناها: Stylelint.
الأشياء التي يمكنك القيام بها مع Stylelint
فيما يلي ملخص للوظائف التي تمت تجربتها في Stylelint ، مع أكثر من 100 قواعد وقابلية التوسع.
في هذه المرحلة ، إذا وجدت نفسك تحصل على القليل من الصبر ("حسنًا ، حسنًا: أعتقد أن Stylelint سيكون له تأثيرات عمل معجزة. لا حاجة إلى الكثير من الملخص."). فقط انتقل إلى القسم التالي ، أنا هنا فقط أشرح بعض المشكلات وأقدم بعض النصائح.
التقاط الخطأ
تم تصميم بعض قواعد Stylelint لتحديد الأخطاء الواضحة ، مثل الأخطاء الإملائية أو الإغفالات التي أنشأتها عيونك المضطربة أو غيرها. على سبيل المثال ، يمكنك تعطيل كتل فارغة ، وقيم سداسية سداسية غير صالحة ، ومحددات مكررة ، وأسماء الرسوم المتحركة التي لم يكشف عن اسمها ، وبناء جملة التدرج الخطي الخاطئ.
القواعد الأخرى هي بذل قصارى جهدك لالتقاط المزيد من الأخطاء الدقيقة. فيما يلي قاعدة: عندما تستخدم الخصائص المختصرة (مثل margin ) التي يمكن أن تتجاوز أقرانها للممتلكات (مثل margin-top ) ، سيتم إصدار تحذير لأن هذا قد يكون ناتجًا عن إهمالك. بالإضافة إلى ذلك ، هناك قاعدة أخرى تحذرك: عندما تحدث الفوضى ، إذا ظهرت القاعدة "أ" قبل القاعدة ب ، ولكنها تغطي في الواقع القاعدة "ب" ، لأن محدد القاعدة "أ" له أولوية أعلى (على سبيل المثال ، القاعدة .foo{・・・} .foo.bar{・・・} هذا وضع صعب للغاية.
هناك أيضًا قاعدة تستخدم المكون الإضافي postcss doiuse للتحقق مما إذا كان متصفحك يدعم هذا النمط. يستخدم واحد آخر المكون الإضافي CSS-Colorguard للمطالبة بتشابه اللون لتجنب إرباك استخدامك. (يرجى ملاحظة: هذه واحدة من المزايا الرئيسية لـ Stylelint استنادًا إلى PostCSS: مقارنةً بالمكونات الإضافية الأخرى لـ PostCSS ، يمكن أن يطالبك Stylelint بجهد ضئيل.)
فرض أفضل الممارسات
إذا كنت تستخدم طرق النظام في أوراق الأنماط الخاصة بك ، أو لديك دليل نمط للرمز الخاص بك ، فيجب عليك حظر هذه الأنماط. يوفر Stylelint هذه الميزات بالفعل.
أولاً ، تحتاج إلى التحكم في محددك بشدة. مع Stylelint ، يمكنك تعطيل المختارين الذين يتجاوزون خصوصية معينة أو وضع حدود على عمق التعشيش. يمكنك تعطيل محددات الفئات (مثل المحددات بدون معرفات) واستخدام تعبيرات منتظمة لتسمية الاتفاقيات لبقيةها.
يمكنك حظر استخدام !important ، أو متسلسلات المتصفح التي لا يدعمها متصفحك. إذا كنت تستخدم AutoPrefixer (أو يجب عليك) ، فيمكنك تعطيل استخدام بادئات البائع في ورقة أنماط المصدر.
إذا كنت ترغب في أن تكون أكثر صرامة - يمكنك قضاء بعض الوقت في التكوين لضمان الاتساق المطلق - يمكنك فرض ترتيب خصائص ورقة الأنماط وتوفير الخصائص والقيم والوظائف والوحدات للقوائم السوداء والطوائم البيضاء.
تنفيذ اتفاقيات نمط الكود
لدى Stylelint اتفاقيات لتنفيذ أنماط التعليمات البرمجية تلقائيًا ، لذلك لا تحتاج أنت وزملاؤك في الفريق إلى إعدادها بنشاط. نحن ملتزمون بجعل هذه القواعد أكثر شمولاً ومرونة.
تهدف هذه القواعد بشكل أساسي إلى المساحات ، ولكن أيضًا للحصول على تفاصيل أخرى ، مثل علامات الاقتباس ، والرسائل العلوية والسفلية ، وكتابة الأصفار قبل العشرية ، وذلك باستخدام الكلمات الرئيسية ، والقيم الإملائية ، إلخ.
تحلم بأنك وزملاؤك يمكن أن تنشئ اتفاقية تنسيق (على سبيل المثال ، نترك دائمًا مساحة بعد إعلان القولون) وتعديلها في تكوين Stylelint الخاص بك ، ولن تناقشها مرة أخرى بعد ذلك. فليتم تنفيذها في مملكة الماكينة.
تطوير وتوسيع كل شيء
كتب نيكولاس زكاس ، منشئ ESLINT (و CSS LINT) ، عن نجاح ESLINT يكمن في قابلية التوسع. يحاول Stylelint متابعة تقدم ESLINT وتزويد مؤلفي CSS باختلاط ، وهو أمر قابل للتمديد أيضًا.
يمكنك كتابة ونشر المكون الإضافي لقواعدك الخاصة. الآن لدينا الكثير من الأشياء لاستخدامها ؛ ونحن حريصون على رؤية المكونات الإضافية الممتازة للأشخاص الآخرين.
التكوين قابل للتمديد وبالتالي يمكن مشاركته. بالنسبة للمكونات الإضافية ، تعلمنا قيمة هذه الميزة من ESLINT. تأكد من أن ذلك يتضمن تكوينات WordPress و Suitcss وتم نشرها.
إذا كنت لا تحب النصائح المدمجة لـ Stylelint ، فيمكنك إنشاء أسلوبك الخاص باليد ، أو حتى إنشاءه لمؤسستك. يمكنك أيضًا تخصيص القواعد المستخدمة لتوفير رسائل تحذير.
باستخدام API Stylelint ، يمكنك إنشاء مكونات إضافية لمرسلات النصوص النصية وإجراء اختبارات لجعل Stylelint دمجها في كل جانب من جوانب سير العمل.
إذا كان لديك أفكار حول امتدادات Stylelint ، فيرجى إخبارنا!
إجابات على الأسئلة المتوقعة
قد يكون هناك عدة أسئلة في عقلك. فيما يلي بعض التفسيرات الأكثر شيوعًا:
هل من الممكن استخدام Stylelint في SCSS أو أقل؟
الجواب نعم ، يمكنك استخدام Stylelint في SCSS ويتم دعمه بأقل من ذلك! نظرًا لأن PostCSS يتيح محللين مخصصين ، يمكن لـ StyleLint أن تدعم بسهولة مجموعة واسعة من بناء الجملة غير القياسي - يمكنك تخصيص محلل PostCSS لتحليله.
بسبب محلل PostCSS-يدعم Stylelint SCSs ، أقل من السكريات الجديدة. إذا كنت ترغب في تطبيق دعم بناء جملة مخصص آخر ، فيمكنك القيام بذلك مع Postless!
بالطبع ، هناك بعض القواعد التي ترتبط ببناء بناء الجملة غير القياسي (مثل #{$interpolation} في محدد معرف SASS). نظرًا لأن Stylelint يحاول التستر على نمط أوراق الأنماط لدينا - يستخدم بعض الأشخاص CSS القياسية ، ويستخدم بعض الأشخاص لغات ممتدة مثل SCSs ، وبعض الأشخاص يستخدمون خصائص مخصصة غريبة ، وما إلى ذلك - سيؤدي ذلك حتماً إلى إنشاء بعض نقاط الضعف التي تحتاج إلى ملء. ومع ذلك ، فقد تعاملنا مع هذه الأخطاء التي وجدناها ؛ يمكن إغلاق أي قواعد خلال هذه الفترة بالكامل أو تعطيلها في ورقة أنماط صف كلها أو بأسلوب صف كل صف.
هل Stylelint قادر على استخدام بناء جملة CSS المستقبلي؟
نعم! على غرار الإجابة المذكورة أعلاه: يمكن أن يفهم Stylelint أي شيء يفهمه PostCSS ، بما في ذلك تمكين أي بناء جملة CSS في المستقبل (ربما من خلال المكون الإضافي PostCSS). في الواقع ، تتعامل بعض قواعد Stylelint على وجه التحديد مع بناء جملة CSS المستقبلي وبعض الخصائص المخصصة.
تكوين StyleLint ضخم ، من أين يجب أن أبدأ؟
نوصي بثلاث طرق تكوين:
تمديد التكوين المنشور. نحافظ على معايير تكوين Stylelint لتسهيل المستخدم لتوفير معيار متأصل. وقد تم الإعلان عن العديد من التكوينات. ابدأ من الصفر وأضف قاعدة واحدة في وقت واحد. بشكل افتراضي ، لا يتم تشغيل أي قاعدة ، لذا عن طريق إضافة القواعد يدويًا ، ستعرف أي شخص سيتم فرضه ويمكنك فهم كل قاعدة تضيفها. ابدأ تكوين نسخ ملصق النسخ ، حدد الخيارات التي يجب استخدامها وحذفها بشكل انتقائي.
لحسن الحظ ، لا تحتاج إلى كتابة تكوين Stylelint ضخم مرارًا وتكرارًا. يمكنك اختيار نمط تريده ويمكنك استخدامه في أي مكان.
أسهل طريقة لتشغيل Stylelint؟
بالنسبة لمعظم الناس ، فإن أسهل طريقة هي من خلال خط الأوامر.
إذا كنت تفضل المكون الإضافي Gulp ، فيمكنك استخدام Gulp-Stylelint. بالنسبة إلى WebPack ، هناك العديد من الاحتمالات للاختيار. نأمل أن تلهمك هذه المكونات الإضافية لإنشاء مكونات إضافية Stylelint ، مثل تلك الخاصة بـ Grunt. (يمكنك البحث في مشاريع مفتوحة المصدر!)
يمكنك أيضًا تشغيل Stylelint باستخدام المكون الإضافي PostCSS ، بما في ذلك كل ما يتم تضمينه في البرنامج المساعد. هذا يعني أنه يمكنك استخدام Stylelint في أي مكان يمكنك استخدام PostCSS (والذي يغطي كل أداة تجميع تقريبًا)!
بالإضافة إلى ذلك ، هناك أيضًا مكون إضافي لتجميع نص Stylelint للذرة ، النص السامي ، VS Code لتوفير أسرع التعليقات. لمزيد من المعلومات ، يرجى الرجوع إلى قائمة الأدوات التكميلية على موقع StyleLint.
كما هو موضح أدناه ، في سطر الأوامر ، النتائج التي تتوقع رؤيتها:
تظهر على النحو التالي في Atom ؛
هل يمكن لـ Stylelint إصلاح خطأي؟
لا ، ولكن تم تصميم واحد آخر يسمى StyleFMT للقيام بذلك. يتطلب تكوين Stylelint - مشابه جدًا لما تستخدمه في Linting - ويمكنه إصلاح أي أخطاء. نأمل أن يتطور Stylelint مع سلام موظفي المجتمع ، لتصحيح الأخطاء تلقائيًا التي تنتهك قواعد Stylelint. الرجاء مساعدتهم على تحقيق هذا الهدف!
يمكنك أيضًا استخدام أدوات أخرى مثل CSSComb أو Perfectlist المستخدمة بالاقتران مع Stylelint لإصلاح الراحة تلقائيًا وإجبارها تلقائيًا.
استخدم الضبط لمكملات القيد
هناك كميات هائلة من القيود في CSS جيدة. لهذا السبب نقضي الكثير من الوقت في مناقشة أساليب مثل SMACSS و ACSS و BEM و SOUTCSS و ITCSS ، وما إلى ذلك. نعلم جميعًا أن كتابة CSS سيئة للغاية ، لذلك إذا لم نعد نخاف من الكتابة على غرار CSS ، نحتاج إلى وضع استراتيجية ذكية في العمل والاستمتاع بشجاعة.
الهدف من Stylelint هو أتمتة التنفيذ - توفير مجموعة من القواعد الأساسية والإطار القابل للتوصيل الذي يمكن أن يستخدمه مؤلفو CSS لتنفيذ استراتيجياتهم الخاصة.
دعنا نحاول أن نعلمنا كيف نخدمك. إذا كان لديك أفكار تحسين أفضل ، مثل قواعد المساهمة ، والتحسينات ، والاختبار ، أو إصلاح الأخطاء ، والملفات ، أو الأفكار الجديدة أو مجرد التعليقات ، يرجى تقديم رسالة لنا! بهذه الطريقة ، جميع مطورينا على جميع المستويات لديهم عمل للقيام به.