Freecodecamp: إنشاء دليل أسلوب CSS الخاص بـ freeCodeCamp

تم إنشاؤها على ٨ يناير ٢٠١٨ · 47تعليقات · مصدر: freeCodeCamp/freeCodeCamp

أود أن أقترح دليل أسلوب CSS الخاص بـ freeCodeCamp لتحسين إمكانية الصيانة الشاملة لقاعدة التعليمات البرمجية. نظرًا لأن FreeCodeCamp لديه الكثير من المساهمين ، والجميع يكتب CSS بطريقة مختلفة. ومن الصعب تتبع الطرق المختلفة لكتابة CSS.

التوصيات الأولية:

تعليقات

أضف تعليقات ، عند بدء تشغيل ملف LESS جديد ، حتى يعرف المطورون ما الذي يعملون معه ، أضف أيضًا تعليقات عند بدء قسم جديد مرتبط بكتلة التعليمات البرمجية ، فهو يساعد في سهولة القراءة ، انظر الأمثلة أدناه (لقد صادفت هذا النمط من التعليقات عبر قاعدة الكود ، لذلك أود الاستمرار في كتابته ، بدلاً من اقتراح نمط جديد)
مثال 1 - عند بدء ملف LESS جديد:

//
// Navigation
// --------------------

مثال 2 - عند إضافة قسم متعلق بالملاحة

//
// Navigation - Mobile Styles
// ------------------------------

مباعدة

أضف مسافات بعد خاصية ، سيكون من الأسهل بكثير قراءة قاعدة البيانات هذه والمحافظة عليها. انظر الأمثلة أدناه.
مثال 1 - الطريق الصحيح

p {
  color: #fff;
}

مثال 2 - طريقة غير صحيحة
ما المشكله؟
لا توجد مساحة بعد القولون

p {
  color:#fff;
}

الألوان

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

p {
  color: #fff;
}

مثال 2 - طريقة غير صحيحة
ما المشكله؟
قيمة سداسية ذات غلاف علوي ، غير مختصرة

p {
  color: #FFFFFF;
}

ألوان RGBA أو RGB

أضف مسافات بعد القيم ، ويحسن القراءة. انظر الأمثلة أدناه:
مثال 1 - الطريق الصحيح

p {
  color: rgba(123, 123, 0, 0.1);
}

مثال 2 - طريقة غير صحيحة
ما المشكله؟
لا مسافات بعد القيم

p {
  color: rgba(123,123,0,0.1);
}

لا توجد وحدة عند التصريح عن 0

في خاصية مثل box-shadow ، إذا قمت بتعيين قيمة 0 ، فعليك تجنب إضافة الوحدة. انظر EXAMPLE أدناه.
مثال 1 - الطريق الصحيح

p {
  box-shadow: 1px 1px 0 rgb(0, 0, 0);
}

مثال 2 - طريقة غير صحيحة
ما المشكله؟
الوحدات بعد 0

p {
  box-shadow: 1px 1px 0px rgb(0, 0, 0);
}

تجنب الأرقام العائمة

إذا أمكن ، يجب عليك تجنب الأرقام العائمة في CSS لحجم مختلف ، حيث يمكن أن تظهر بشكل مختلف قليلاً. انظر الرابط المرفق أدناه.

المستعرض التقريب

help wanted docs on the roadmap

مصدر

tomasvn

👍1

التعليق الأكثر فائدة

raisedadeadtomasvn ووفقا للي عملية إنشاء دليل نمط CSS والالتزام به وفي المدى الطويل لا تسفر عن نتائج مفيدة. تستخدم React و Yarn و Babel والكثير من المشاريع الأخرى مفتوحة المصدر Prettier وغيرها من الامتدادات المماثلة لتنسيق نمط CSS الخاص بهم.

بدلاً من إنشاء دليل أسلوب. يجب أن نخبر مساهمينا بتثبيت Prettier في محرر IDE / Code الخاص بهم وسنكون على ما يرام.
raisedadead أفكار حول هذا؟

vkWeb في ٨ يناير ٢٠١٨

👍6

ال 47 كومينتر

raisedadead ما رأيك؟

tomasvn في ٨ يناير ٢٠١٨

شكرا ، هل أنت على علم بأي طريقة يمكن أن تدرس هذه؟ باستخدام أي لينت؟

raisedadead في ٨ يناير ٢٠١٨

vkWeb في ٨ يناير ٢٠١٨

👍6

شكرا ، هل أنت على علم بأي طريقة يمكن أن تدرس هذه؟ باستخدام أي لينت؟

أجمل يعمل بشكل جيد ؛). يحذرك عندما تنتهك أي قاعدة نمط CSS.

vkWeb في ٨ يناير ٢٠١٨

بدلاً من إنشاء دليل أسلوب. يجب أن نخبر مساهمينا بتثبيت Prettier في محرر IDE / Code الخاص بهم وسنكون على ما يرام.

الاختباء من المشاكل لم يساعد أحدا ... 😅!

أنا أؤيد بشدة تجنب المُنسِّقات واستخدام لينتير بدلاً من ذلك. تبدو أتمتة الأشياء أمرًا رائعًا وسهلاً ، لكنها تزيل النقطة الأساسية في كتابة التعليمات البرمجية القياسية.

IMHO ، كوننا المجتمع الذي يدور حول التعلم لا ينبغي أن نخجل من إصلاح المشكلات في نمط الكود الذي يشير إليه linters ، بدلاً من ذلك.

يرجى أيضًا ملاحظة أن Prettier هو منسق رمز _Opinionated_

raisedadead في ٨ يناير ٢٠١٨

👍1

وفقًا لي ، فإن عملية إنشاء دليل أسلوب CSS والالتزام به لن يؤدي إلى نتائج مفيدة على المدى الطويل.

أعتقد أن هذه حجة غير صحيحة (لا تتردد في إثبات أنني مخطئ إذا كانت لديك إحصائيات).

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

raisedadead في ٨ يناير ٢٠١٨

raisedadead نحن لا نختبئ من المشاكل ...! يمكننا استخدام linters ولكن يمكن القيام بنفس المهمة باستخدام مفتاح واحد ملزم مع Prettier فلماذا نحاول تشغيله لفترة طويلة؟

vkWeb في ٨ يناير ٢٠١٨

أعتقد أن هذه حجة غير صحيحة (لا تتردد في إثبات أنني مخطئ إذا كانت لديك إحصائيات).
إذا قمت بالتحقق من دليل أسلوب Airbnb JS و JS Standard وما إلى ذلك ، فلديهم رمز مساعد لكتابة التعليمات البرمجية القياسية ويتم استخدامه من قبل الآلاف من الشركات والمطورين كل يوم.

أنا أتفق معك بشدة في هذا! أدلة أسلوب JS الخاصة بهم مفيدة جدًا حقًا.

vkWeb في ٨ يناير ٢٠١٨

نحن لا نختبئ من المشاكل ...! يمكننا استخدام linters ولكن يمكن القيام بنفس المهمة باستخدام مفتاح واحد ملزم مع Prettier فلماذا نحاول تشغيله لفترة طويلة؟

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

raisedadead في ٨ يناير ٢٠١٨

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

يبدو tomasvn RFC مثيرًا للاهتمام ، وبما أنك مهتم بالتعليقات ، فهل تعتقد أنه سيكون من الممكن لك البحث عن بعض أدلة الأسلوب الراسخة والأدوات التي يمكننا أن نستلهم منها.

raisedadead في ٨ يناير ٢٠١٨

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

أنا معك في هذا أيضًا. حسنًا ، دعنا نذهب إلى دليل الأسلوب ويمكننا استخدام stylelint باعتباره

vkWeb في ٨ يناير ٢٠١٨

raisedadead stylelint يبدو جيدًا 👍 لأنه سيحذر المساهم من التناقضات في وثيقته

tomasvn في ٨ يناير ٢٠١٨

👍2

tomasvn لقد أطلقنا للتو منهجنا الجديد ومنصة التعلم. هل ما زلت مهتمًا بالمساعدة في هذا؟

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

QuincyLarson في ٣ يونيو ٢٠١٨

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

tomasvn في ٣ يونيو ٢٠١٨

tomasvn سيكون ذلك مذهلاً!

لا يحتوي freeCodeCamp على الكثير من CSS. يقع CSS الخاص بـ freeCodeCamp بشكل أساسي في "main.less". ونحن نستخدم Bootstrap 3.0.

قد ننتقل في النهاية إلى Bootstrap 4.0 أو نعيد كتابة CSS لدينا لاستخدام Flexbox. ولكن في الوقت الحالي ، نستخدم React Bootstrap في العديد من تطبيقاتنا ، وهو مقفل حاليًا في Bootstrap 3.0. لذلك أوصي فقط بالدخول وتنظيف CSS المخصصة الموجودة في main.less وجعلها أقل تكرارًا وأكثر ترتيبًا منطقيًا.

QuincyLarson في ٣ يونيو ٢٠١٨

QuincyLarson حصل عليه ، و main.less موجود في client / less / main.less ، هل هذا هو الملف الصحيح؟

tomasvn في ٣ يونيو ٢٠١٨

tomasvn شكرًا على صبرك - لقد رأيت هذا للتو. نعم - يجب أن يكون الملف client / less / main.less هو الملف الصحيح.

QuincyLarson في ١٦ يونيو ٢٠١٨

tomasvn بحاجة الى مساعدة في هذا؟ سأكون سعيدا للمساهمة

borisyordanov في ٤ أغسطس ٢٠١٨

tomasvn هل borisyordanov نعم - فنحن نرحب بمساهماتك بهذا.

QuincyLarson في ١٨ أغسطس ٢٠١٨

borisyordanov آسف للتأخير ، بالتأكيد تفضل لدي بعض المشكلات في تشغيل dev env على windows ، لذا يمكنك البدء ، عندما أقوم بإصلاح أشيائي يمكنني مساعدتك في إعادة بنائها

tomasvn في ١٩ أغسطس ٢٠١٨

tomasvn لقد أرسلت إليك بريدًا إلكترونيًا ، على الدليل إذا لم تكن قد قمت بذلك بالفعل أو اطلب المساعدة على Gitter

borisyordanov في ٢٧ أغسطس ٢٠١٨

إذا كان لا يزال هناك حاجة ، يمكنني المساعدة في ذلك

Jgriebel1990 في ٣١ أكتوبر ٢٠١٨

@ Jgriebel1990 لم أستطع الاتصال بـ tomasvn لذلك لم يتم إحراز أي تقدم على حد علمي. لا تتردد في تولي الأمر

borisyordanov في ٣١ أكتوبر ٢٠١٨

@ jgriebel1990 لا تتردد في تولي الأمر ، لم أتمكن من الحصول على نسختي تعمل على جهاز windows ، كل ما يمكنني فعله هو مراجعة الكود بمجرد الانتهاء

tomasvn في ٣١ أكتوبر ٢٠١٨

tomasvn يبدو مثل @ Jgriebel1990 و borisyordanov لم

QuincyLarson في ٢ يناير ٢٠١٩

QuincyLarson سأحاول أن بيئتي ، فما عليك سوى إغلاق الموضوع.

tomasvn في ١٥ يناير ٢٠١٩

tomasvn لا تقلق - أي حظ في تشغيلها محليًا؟

QuincyLarson في ٢٤ يناير ٢٠١٩

raisedadead في ٧ فبراير ٢٠١٩

QuincyLarson لا حظ ، تشغيله محليًا

tomasvn في ٩ فبراير ٢٠١٩

tomasvn ما هي المشكلات التي

Nirajn2311 في ٩ فبراير ٢٠١٩

tomasvn يرجى قراءة هذا - https://github.com/freeCodeCamp/freeCodeCamp/blob/master/docs/how-to-setup-freecodecamp-locally.md

borisyordanov في ١١ فبراير ٢٠١٩

raisedadead مع التحديثات على https://github.com/freeCodeCamp/design-style-guide ، هل هذه المشكلة ضرورية؟

RandellDawson في ٣ مايو ٢٠١٩

المزيد على خارطة الطريق. في النهاية سيكون المورد المركزي لمكونات واجهة المستخدم الخاصة بنا.

raisedadead في ٣ مايو ٢٠١٩

نمط الحدود CSS
تحدد خاصية نمط الحدود نوع الحد المطلوب عرضه.

القيم التالية مسموح بها:

منقط - لتحديد حد منقط
متقطع - لتحديد حد متقطع
متصل - يحدد حدًا متصلًا
مزدوج - يحدد حدًا مزدوجًا
groove - يحدد حدًا مجوفًا ثلاثي الأبعاد. يعتمد التأثير على قيمة لون الحدود
ريدج - يحدد حدًا مموجًا ثلاثي الأبعاد. يعتمد التأثير على قيمة لون الحدود
أقحم - يحدد حد داخلي ثلاثي الأبعاد. يعتمد التأثير على قيمة لون الحدود
البداية - تحدد حدود البداية ثلاثية الأبعاد. يعتمد التأثير على قيمة لون الحدود
بلا - لا تحدد أي حدود
مخفي - يحدد حدًا مخفيًا
يمكن أن تحتوي خاصية نمط الحدود من قيمة واحدة إلى أربع قيم (للحد العلوي ، والحد الأيمن ، والحد السفلي ، والحد الأيسر).

مثال-
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

rohaanmd في ٢ أكتوبر ٢٠١٩

مهلا! ما هو التقدم في هذا؟ أنا متواجد للمساعدة!

ManasMahanand في ٤ أكتوبر ٢٠٢٠

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

ahmadabdolsaheb في ٥ أكتوبر ٢٠٢٠

@ahmadabdolsaheb Will do!

ManasMahanand في ٦ أكتوبر ٢٠٢٠

👍1

ahmadabdolsaheb انتظر ماذا تقصد إضافة إلى الريبو؟

هل تريدني أن أقوم بتثبيت linter على أنه تبعية ، مثل eslint بالفعل؟

أم أن هناك طريقة لتثبيت الاختبارات على جيثب نفسه ، لذا لن يسمح بالدمج ما لم يتم اتباع دليل النمط؟

ManasMahanand في ٧ أكتوبر ٢٠٢٠

حسنًا ، يبدو أن stylelint هو خيار جيد بحد ذاته. أنا أقوم بتثبيت ذلك.

للتجربة ، سأضع القواعد على النحو الذي اقترحه OP. سأقوم بعد ذلك بإزالة جميع القواعد وفتح ملف العلاقات العامة. يمكننا بعد ذلك مناقشة القواعد ووضعها

ManasMahanand في ٧ أكتوبر ٢٠٢٠

https://stylelint.io/user-guide/rules/about

يمكنك إلقاء نظرة على هذا الارتباط لمعرفة أنواع القواعد التي يمكن تعيينها

ManasMahanand في ٧ أكتوبر ٢٠٢٠

يوجد حاليًا بالفعل أمر lint: css يستخدم أجمل. يمكننا تغييره لاستخدام الأسلوب.

بأي طريقة ، لقد قمت بتثبيته ، وهو يكتشف الأخطاء بنجاح بناءً على القواعد المحددة. هل يجب أن أفتح علاقات عامة؟

ManasMahanand في ٧ أكتوبر ٢٠٢٠

لا حاجة لإزالة أجمل ، أجمل لديه تكوين لقواعد النمط التي يمكنك استخدامها لتوسيع ملف التكوين أجمل

tomasvn في ٧ أكتوبر ٢٠٢٠

رائع. ستعمل عليها غدا.

ManasMahanand في ٧ أكتوبر ٢٠٢٠

لم أجد تكوينًا أجمل لقواعد stylelint (أو كيفية القيام بذلك) ، لكنني حاليًا قمت بتثبيت حزمة أخرى stylelint-config-prettier والتي ستتحقق من التعارضات وستوقف أي قواعد لا تتعارض.

ما أفكر فيه هو في أمر lint: css ، يمكننا أيضًا تشغيل أمر stylelint جنبًا إلى جنب مع أجمل

ManasMahanand في ٨ أكتوبر ٢٠٢٠

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

ManasMahanand في ٨ أكتوبر ٢٠٢٠

شكرًا @ ManasMahanand على تقدمك. أضع علامة على ojeytonwilliams للحصول على رأي ثان.

ahmadabdolsaheb في ١٥ أكتوبر ٢٠٢٠

أعتقد أن الأجمل تقوم بعمل جيد مع التنسيق ، لذلك أفضل الاحتفاظ بذلك. إذا استخدمنا https://github.com/prettier/stylelint-prettier ، فسيتم استخدام أجمل كمكوِّن إضافي لـ stylelint ونحصل على أفضل ما في العالمين.

هذا يعكس الطريقة التي نستخدمها بالفعل لفحص JavaScript.