كيفية جعل التعليمات البرمجية الخاصة بك بسهولة مع "دليل نمط المعيشة"
عادةً ما يُنظر إلى أدلة الأسلوب للسنوات الماضية على أنها وثائق موجهة نحو التصميم تركز على العلامات التجارية واستخدام الألوان. ولكن مع ظهور codebases كبيرة بجنون لمواقع مثل Facebook أو مجموعة واسعة من المنتجات ، تطورت أدلة الموضة منذ ذلك الحين.
في هذه الأيام ، تحتوي أدلة أنماط المعيشة دائمًا على وثائق محدّثة لقاعدة التعليمات البرمجية الحالية وحالات الاستخدام. من خلال هذه الوثائق ، يمكننا كتابة كود أكثر قابلية للصيانة وقابلية لإعادة الاستخدام ، مع رؤية كيفية تحسين قاعدة الكود على الفور.
ما هو في دليل نمط المعيشة؟
أدلة نمط المعيشة تشبه النظائر القديمة ؛ أنها تحتوي على الشعار ومعلومات العلامة التجارية ، واستخدام اللون ، فضلا عن الخطوط العريضة العامة لاستخدام التعليمات البرمجية. قسم مخطط الشفرة هو المكان الذي يمكنك فيه العثور بسهولة على شفرة مكررة أو متشابهة بشكل وثيق ودمجها لتحسين أمثلية التعليمات البرمجية الخاصة بك ، أو عرض المكونات المستخدمة بالفعل. تعرض معظم الأدلة إما أسلوب أسلوب "السجل" حيث يتم توثيق كل مثيل الكود أو يتم توثيق الكود النموذجي المتعمد فقط.
لا تركز هذه الأدلة على HTML و CSS فحسب ، بل أيضًا على اللغات الأخرى التي يمكن تعديلها لأداء مثل JavaScript و PHP. يمكن العثور على بعض الأمثلة الصلبة من أدلة نمط المعيشة في جيثب ، موزيلا و ميل تشيمب . كما ترى من هذه الأمثلة ، من الشائع أن يكون لديك صفحة أو موقع فرعي لعرض حالات الاستخدام جنبًا إلى جنب مع الرمز لكل مكون. هذا يجعل من السهل الذهاب والاستيلاء عليها عند الحاجة إليها ، وللمصممين غير المطورين أو المطورين لمعرفة كيفية عمل المكونات بطريقة تفاعلية.
بدء دليل نمط المعيشة الخاصة بك
قد تبدو وثائق دليل نمط المعيشة الخاصة بك من الصفر صعبة ، وخاصة بالنسبة للمشروعات الكبيرة. ولكن عادة ما يكون هناك عائد على استثمار الوقت اللازم لإنجازه. تستفيد المشاريع الكبيرة بشكل كبير من الوثائق الحية لأنماط الموقع وبنية الكود. المشروعات الأصغر حجمًا لا يمكن ملاحظتها ، ولكن في بعض الأحيان لا تزال جديرة بالاهتمام ، على الاستثمار في وقتك. في كلتا الحالتين ، إذا كنت تعمل على مشروع قد يتم تسليمه في يوم ما إلى مصمم أو مطور آخر ، فستتم إتاحة يومه لرؤية هذه الوثائق.
ابدأ بالأساس
المكونات التي تستخدمها بشكل متكرر هي أفضل حالة استخدام لدليل أسلوب المعيشة ، وتتبادر الأزرار على الفور. قائمة مختصرة من الأشياء التي قد ترغب في النظر في توثيقها هي خيارات تخطيط (ربما تحدد نظام شبكة) ، الطباعة ، استخدام اللون ، أزرار وأنماط الارتباط ، تصميم النموذج ، والإخطارات أو التنبيهات ، وتصميم قائمة. يمكن إضافة أي شيء قد يستفيد من إعادة الاستخدام بشكل أساسي. عند التخطيط ، تذكر الحفاظ على المرونة. لا تقم أبدًا بتهيئة تنبيه أو زر خاص بصفحة واحدة أو حالة الاستخدام ، ما لم يكن ذلك ضروريًا تمامًا. بدلاً من ذلك ، أضف فئات معدِّلة للبناء على الأساس الأساسي لأشياء مثل اللون أو الطباعة أو التغييرات الجمالية. بهذه الطريقة ، يمكنك دائمًا الاعتماد على فئة .button لتعيين عرض ثابت ، وارتفاع ، وحجم النص مع السماح لفئات التعديل بتغيير أشياء خاصة بكل حالة استخدام.
أهداف كود الصيانة
الغرض من التعليمات البرمجية القابلة للصيانة هو جعل الأشياء قابلة لإعادة الاستخدام ومستمرة. تعتبر المكونات مثل أشرطة الإعلام والأزرار والرؤوس والتذييلات أمثلة رائعة على التعليمات البرمجية القابلة لإعادة الاستخدام - أشياء يمكنك استخدامها عدة مرات عبر الموقع أو على نفس الصفحة. إذا كنت تكسر رمزًا قديمًا أو مكتوبًا بالفعل لجعله أكثر قابلية للإصلاح بعد حدوثه ، فهو في الواقع بسيط جدًا. ابدأ بإزالة CSS إلى الأساسيات. يجب أن يتم تركك بفئة مكون تحدد العناصر الهيكلية مثل الارتفاع والعرض والموضع. في حين يمكن استخدام فئات التعديل إضافية لتغيير الأشياء الجمالية مثل اللون أو الطباعة. بالإضافة إلى ذلك ، إذا كان مشروعك يستخدم هوية أو فصيلة نصية لكل صفحة ، فيمكنك استخدام حالات استخدام فريدة على أساس كل صفحة بهذه الطريقة. تأكد من عدم اللجوء إلى هذه الممارسة أكثر من اللازم ، لأنه يمكن إضافة الوزن بسهولة إلى دليل الأسلوب.
ال مبدأ KISS هو مبدأ تصميم مناسب تماما لعملية تطوير وحدات أيضا. كتابة كود بسيط وقابل للصيانة أسهل في العادة عن طريق الحفاظ على مكوناتك بسيطة. عندما يتعلق الأمر بالبساطة ، إذا كان من الممكن جعل الأشياء أكثر كفاءة و / أو استخدام رمز أقل أثناء تحقيق نفس النتيجة ، فيجب كتابة مكوناتنا للقيام بذلك. تتمثل الأهداف النهائية لهيكل شيفرة قابل للصيانة في أن يكون هناك شيء يمكن إعادة استخدامه وصغيره وأكثر فاعلية من النظير غير القابل للصيانة.
اصطلاحات التسمية في CSS
عندما يتعلق الأمر بالعمل مع بنية كود قابلة للصيانة ، تصبح اصطلاحات التسمية مهمة للغاية. إن كتابة فصول CSS وصفية ستقطع شوطا طويلا لضمان الحفاظ على قاعدة الكود الخاص بك ستكون مهمة سهلة. هناك لا حدود على أطوال طبقة CSS ، لذلك استخدم هذا لمصلحتك. تأكد من التمسك باتفاقية تسمية واضحة على الرغم من أن خلط الشرطات مقابل الشرطات السفلية أو حالة الجمل مقابل جميع الأسماء الصغيرة يمكن أن يكون مربكًا بسهولة. عادة ما تكون فكرة رائعة لجعل فصول المكون الخاصة بك وصفية للغاية ، مع جعل فصول التعديل أقل من ذلك. في ما يلي مثال على زر ، وقاعدة حالة الاستخدام الفريدة ، وفئات التعديل.
![]()
/ * هذه فئة مكون ، يجب أن تحتوي فقط على القواعد الهيكلية الأساسية * /. الزر {display: block؛ width: 250px؛ height: 48px؛ line-height: 48px؛} / * حالة الاستخدام الفريدة هذه تحدد الخطوط العريضة للزر المستخدم على الصفحة الرئيسية * /. homepage-cta-button {display: blockmargin: 0 auto 50px؛ width: 180px؛ height: 60px؛ line-height: 60px؛} / * فيما يلي فئات التعديل ، تضاف هذه بالإضافة إلى المكون class لإضافة لون أو تغييرات جمالية أخرى * /. أحمر {background: # C54F48} .مقاس {border-radius: 5px؛} الحلول الآلية
لقد بدأت المولدات التلقائية لموجهات النمط بالظهور يسارًا ويسارًا للمساعدة في الدفع لأدلة الأسلوب. نمط النموذج هو مولد ساس بناه رام ريتشارد وماسون ويندل من فريق ساس . انها واحدة من أفضل الخيارات المتاحة في الوقت الحالي ، مع مثل المولدات المماثلة صورة ثلاثية الأبعاد ، Kalei ، StyleDocco و KSS تثبت أيضا مفيدة.
الآلي مقابل اليد الحرفية
كما هو الحال دائمًا ، هناك إيجابيات وسلبيات لاستخدام أي من الطريقتين هنا. الحلول الآلية سريعة ويمكن استخدامها بعد حدوثها ، ولكنها أيضًا صارمة في بعض الأحيان. تركت لك أدلة الأسلوب المصنوع يدويًا معرفتك بكل تفاصيل كل شيء ، ولكن استغرقي وقتًا أطول. شخصياً ، يعتبر الأسلوب اليدوي الأفضل بالنسبة لي في معظم الحالات حيث أنه الأكثر مرونة من حيث العمل مع مطورين آخرين. ولكنه بالتأكيد يستحق الوقت لتجربة بعض الحلول التلقائية ، فقط للحصول على فكرة عن كيفية عملها وما يقولونه عن شفرتك.
مراجعة الكود الخاص بك
مواقع الويب لا تنتهي أبدا. نقوم بتعديل الأشياء ، والانتقال إلى أنماط واتجاهات جديدة ، وفي النهاية يمكننا أن ننتهي بالكثير من التعليمات البرمجية من المراجعات السابقة. من المهم أن نأخذ لحظة وننظر إلى "نهاية" كل مراجعة للتأكد من أن الأمور نظيفة قدر الإمكان. في هذه المرحلة ، أود أيضًا أن أرمي كل مكون (ومعدّل الفئات) في Codepen لاختبار دعم المتصفح وتدوين الملاحظات وفقًا لذلك. قد يؤدي ذلك إلى توفير الكثير من الوقت لاحقًا إذا كنت تصمم صفحة ذات قيود دعم. أثناء المراجعة ، تأكد أيضًا من الانتباه للمكونات التي قد تتعارض مع بعضها البعض بطرق غريبة أو تتسبب في حدوث مشكلات في نموذج الصندوق.
استنتاج
في الختام ، يجب أن يؤدي دليل الاسلوب إلى رمز خادع جدا ومرنا ، ومع ذلك لا يزال من السهل الحفاظ عليه وقراءته. وبالنظر إلى مقدار الوقت الذي يجب أن نستثمره للوصول إلى مثل هذه النتيجة ، فإن أدلة أسلوب الحياة لها تأثير أكبر بكثير على المشاريع الكبيرة أكثر من المشاريع الصغيرة. تستفيد المشاريع المعقدة أو الكبيرة كثيرًا من كل تحسينات الأداء والأداء ، وهي تستحق الوقت المستغرق للوصول إلى النتائج المذكورة. قد لا يكون إنشاء دليل أسلوب المعيشة لموقع ويب صغير أو مشروع صغير جديراً بالاستثمار في الوقت.
في الختام ، ينبغي علينا جميعًا أن نسعى جاهدين لكتابة رمز نظيف وقابل للصيانة يركز على التدقيق المستقبلي. تميل أدلة أسلوب الحياة لتشجيع مثل هذا العمل والمساعد في جعل المطورين والمشاهدين على حد سواء أكثر سعادة.