كيفية كتابة CSS بشكل أفضل في فرق مع ACSS - مكتبة Atomic CSS الديناميكية

كتابة أوراق الأنماط المتتالية (CSS) الجيدة أمر صعب ويصبح أكثر صعوبة في فريق حيث يكتب العديد من المطورين CSS.

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

لكن أولاً ، اسمحوا لي أن أحدد بعض الشروط الأساسية التي تنطبق عليها مقالتي.

تفترض هذه المقالة بعض الشروط:

  1. أنت تعمل في فريق حيث يكتب العديد من المطورين CSS.
  2. من الصعب تطبيق الإرشادات إلا إذا كانت هناك أدوات آلية.
  3. المصممين طيور حرة. تحدث عمليات إعادة التصميم.

في ظل هذه الظروف ، سأقدم حلاً سحريًا يحل تقريبًا جميع المشكلات التي نواجهها بسبب CSS السيئ (تذكر ، CSS ليست سيئة. CSS مكتوبة بشكل سيء). لنبدأ بهذه المشاكل.

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

المشكلة رقم 1: تسمية الفئات صعبة

المطور 1 (أثناء الترميز) : يبدو لي أنه رأس ، اسمح لي باستخدام .headerالمحدد له.

المطور 2 (في طلب السحب) : T الخاص به ليس رأسًا. يبدو وكأنه عنوان لي. علاوة على ذلك ، لا يمكننا تسميته "رأس" فقط لأن هذا العنصر ليس عامًا بدرجة كافية. دعنا نسميها .panel-headerأو أفضل .panel-title.

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

الحلول المتاحة:

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

المشكلة رقم 2: محدد القوة

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

الحلول المتاحة:

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

المشكلة رقم 3: ماذا عن CSS غير المستخدمة؟

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

الحلول المتاحة:

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

المشكلة رقم 4: إعادة بناء ديون

المطور 1 : أصبح CSS هذا فوضويًا تمامًا. أعتقد أننا يجب أن نعيد بنائه.

المطور 2 : هل تعتقد أن هذا المحدد الذي تعدله قد يتم استخدامه أيضًا في الصفحة X؟ هل راجعت؟

المطور 1 : اللعنة! أنت محق ... فاتني ذلك. هذه الصفحة X حرجة للغاية للمس. هل تعلم لماذا استخدم هذا المطور نفس الفئة في كلتا الصفحتين؟

المطور 2 : لا توجد فكرة. ترك الشركة. دعنا فقط نترك CSS كما هو :(

ليس لدي ما أقوله هنا. هذا الحوار يشرح كل شيء.

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

في الفريق ، سيكون الحل الأكثر وضوحًا ولكنه مثالي - التوقف عن كتابة CSS!

"انتظر ، ماذا تقول؟ هذا غير ممكن! ". قد تفكر في ذلك ، لكن دعني أقدم لك شيئًا.

الحل الكل في واحد - ACSS (البخاخة)

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

لمتابعة نماذج التعليمات البرمجية في هذه المقالة ، أقترح عليك تثبيت Web Maker (ملعب أمامي يدعم كتابة ACSS بدون أي إعداد بناء) على متصفح Chrome.

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

 I am a button

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

إذا كنت قد قمت بالفعل بتثبيت Web Maker ، فافتحه بالنقر فوق أيقونة Web Maker في الجانب الأيمن العلوي من متصفح Chrome. الصق HTML أعلاه في جزء تعليمات HTML البرمجية وحدد Atomic CSS كوضع في جزء التعليمات البرمجية CSS. بمجرد القيام بذلك ، سترى بعض CSS التلقائي الذي تم إنشاؤه في جزء أكواد CSS ، مثل:

يتم إنشاء CSS الذي تراه بواسطة أداة Atomizer التي ذكرتها أعلاه. في الأساس ، يقرأ HTML (أو أي ملف) ، ويكشف عن فئات ACSS منها ويولد CSS لتلك الفئات المكتشفة. لذا فأنت تكتب HTML فقط مع الفئات المناسبة التي تريد استخدامها ويتم إنشاء CSS تلقائيًا!

الآن بعد أن عرفنا كيف تقوم بالتصميم في ACSS ، دعنا نرى كيف أنها أفضل منهجية CSS يمكن لفريقك اتباعها.

مضمنة ، ولكن ليست مضمنة؟

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

لا مزيد من التسمية! ؟

الميزة المفضلة المطلقة. لن تضطر أبدًا إلى التفكير في اسم لطيف ودلالي وغير متضارب للفصل.

يقول المثل المشهور:

لا يوجد سوى شيئين صعبين في علوم الكمبيوتر: إبطال ذاكرة التخزين المؤقت وتسمية الأشياء. - فيل كارلتون

تحديثات وإعادة بناء ديون فائقة السهولة

انتقل إلى HTML وقم بتغيير الفئات لتحديث بعض الأنماط. قم بإزالة أي فصل دراسي من أي مكان دون الخوف من كسر أي شيء في مكان آخر.

ليس بايت من CSS غير المستخدمة؟

نظرًا لأن Atomizer يولد CSS من الفئات التي استخدمتها بالفعل ، فلن يكون لديك CSS غير مستخدم في ورقة الأنماط الخاصة بك. أليس هذا هو الأداء الجنوني الذي كنا نبحث عنه جميعًا؟ هناك أيضًا أداة يمكنك من خلالها التحقق من مدى استفادة موقع الويب من ACSS - //atomize-io.herokuapp.com/

لا توجد إرشادات للمطورين الجدد؟

كل ما تحتاجه لمنح مطور جديد كجزء من CSS onboarding هو دليل بناء جملة لـ ACSS ورابط مرجعي للفئة - //acss.io/reference. هذه صفحة يمكنك من خلالها البحث بسهولة في فئة ACSS عن أي خاصية: القيمة. حتى هذه الاتفاقية تترسخ في ذاكرتك بينما تستمر في استخدامها.

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

بصرف النظر عن هذه المزايا ، هناك العديد من الأشياء الجيدة التي يأتي معها ACSS.

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

خرق الأسطورة

لقد تم تطوير الكثير من الأساطير المتعلقة بـ ACSS عبر الإنترنت. هذا بسبب التقييم الضحل للإطار والحكم من النظرة الأولى.

إنه نفس التصميم المضمن. إنه سيء!

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

من الصعب أن تكتب كل تلك المجموعات نفسها مرارًا وتكرارًا.

نعم إنه كذلك. يقول ACSS إنه إطار عمل قائم على المكون. إذا كنت لا تقوم بتصميم قالب لكل مكون من مكوناتك وتقوم بالفعل بتكرار HTML ، فلنقل لإنشاء زر في كل مرة ، فلن يكون ACSS مناسبًا لك.

على سبيل المثال ، يجب أن تنشئ أزرارًا باستخدام مكون زر مستخلص مثل:

Hello World

والتي يجب تجميعها في شيء مثل:

Hello World

الطبقات لا معنى لها على الإطلاق

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

أود أن أقتبس فقرة من إحدى مقالات هاري روبرت:

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

لكن ها نحن نستخدم BEM لجعل قواعد الكود لدينا عقلانية.

لن أكون قادرًا على القيام بأمر X في ACSS

ستندهش من رؤية كل ما هو ممكن من خلال مجرد فصول مقدمة في ACSS. العناصر الزائفة ، فليكس بوكس ​​، استعلامات الوسائط ، سمها ما شئت. والاتفاقية التي توصلوا إليها للقيام بكل هذه الأشياء هي ببساطة رائعة! على الرغم من أنه قد تكون هناك أشياء معينة غير ممكنة حتى الآن في ACSS ، مثل CSS Grids ، يمكنك دائمًا فتح مشكلة أو المساهمة في Atomizer.

فى النهاية

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

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

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

أخيرًا ، أود أن أشكر Thierry Koblentz و Jitendra Vyas على مراجعة هذه المقالة.

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

المزيد للقراءة

  • //www.smashingmagazine.com/2013/10/challen-css-best-practices-atomic-approach/ - بقلم تييري كوبلنتز
  • Atomizer GitHub repo - //github.com/acss-io/atomizer
  • وثائق ACSS - //acss.io/quick-start.html
  • الأسئلة الشائعة لـ ACSS التي جمعتها تييري - //github.com/thierryk/ACSS-QA
  • ملعب ACSS - //webmakerapp.com