6 طرق لتنظيم أكواد CSS
6 طرق لتنظيم أكواد CSS
عندما تبدأ العمل مع CSS لفترة من الوقت ، ستجد أن لديك مشكلة بسيطة في تنظيم الكود الخاص به. يحتوي CSS على طريقة تنظيم متأصلة تسمى Cascade. بهذه الطريقة ، يؤثر ما تكتبه في البداية على كل ما يأتي بعده ، والذي يمكن بالطبع أن يكون override إذا لزم الأمر.
ومع ذلك ، تفترض هذه الطريقة Cascade أنك تقوم بإنشاء موقع ويب ثابت صغير في عام 1998 في html. لا تخطئ ، لا تزال وظيفة Cascade مهمة وقوية. يجب القول أن مواقع الويب اليوم أصبحت أكثر تعقيدًا. غالبًا ما يكتب مطورو Front-end آلاف الأسطر من كود CSS لمشروع شخصي صغير.
يمكن أن يكون تنظيم مثل هذا القدر الكبير من التعليمات البرمجية لا يقل أهمية عن أنظمة البناء والتطبيقات. كل أداة تستخدمها تحتاج إلى شيء. قد تكون كتابة stylesheet كبيرة الحجم مناسبة لصفحة ويب بسيطة وحتى موقع كتيب من خمس صفحات ، لكنها بالتأكيد ليست الطريقة المثلى للقيام بعمل أكثر تعقيدًا.
1. استخدم المعالج الأولي CSS
الطريقة الأولى لتنظيم كود CSS بشكل صحيح هي استخدام المعالج الأولي CSS الذي يساعدك على تخزين كل شيء من تصميم الصفحة إلى ملف. نعم ، لم أنس الجملة السابقة التي ذكرتها في هذا المقال.
قلت إن وضع جميع أكواد CSS في ملف واحد ليس صحيحًا ، ولكن يجب أن تعلم أنه عند استخدام ملفات مختلفة من CSS للتصميم ، يجب عليك الرجوع إلى المزيد من الروابط على صفحات html ، ومن ناحية أخرى ، يجب أن يكون متصفحك طلب إنشاء المزيد من http ، مما يؤدي إلى بطء تحميل الموقع. هذه العملية تخلق الحد الأدنى من العمل الإضافي للمعالج.
تحتوي القاعدة @ import في CSS العادي أيضًا على هذه المشكلة. ولكن باستخدام معالج مسبق ، يمكنك فصل CSS إلى ملفات ومجلدات متعددة ثم تجميعها في ملف واحد في النهاية. هذه الطريقة ممتازة ، أقترح عليك استخدام المعالج المسبق Sass ، والذي يعد حاليًا أشهر المعالج المسبق CSS.
2. ملفات منفصلة CSS للصفحات الفردية
هذه الطريقة أكثر فائدة للمواقع الصغيرة. احصل على ملفات CSS منفصلة لكل صفحة من صفحات موقعك على الويب. هذه الطريقة مفيدة بشكل خاص لمواقع الويب حيث تستخدم كل صفحة نمطًا مختلفًا. الحقيقة البسيطة المتمثلة في أنك لست مضطرًا إلى تغيير رموز CSS أثناء التنقل بين الصفحات هي نصيحة إنتاجية كبيرة.
على سبيل المثال ، عند فتح الصفحة الخاصة بنا ، يتم استخدام الملف فقط about-page.css وليس هناك حاجة لتغيير رموز CSS.
تنظيم أكواد CSS
3. ملفات بديلة للمكونات المعقدة والمتكررة
تعمل هذه الطريقة مع المواقع الأصغر والأكبر على حد سواء. إذا كان لديك شيء معقد ، على سبيل المثال عرض شرائح على الصفحة الرئيسية ، فيجب أن تفكر في ملفات CSS منفصلة لذلك. الأكواد CSS لا تقم بتضمين مثل هذا المكون في الأكواد CSS بصفحتك الرئيسية. تنطبق هذه القاعدة على أي عنصر يمكن استخدامه في أكثر من صفحة واحدة ، على سبيل المثال ، الرؤوس وأشرطة القوائم والتذييلات ومعارض الصور.
لا يساعد هذا فقط في الحفاظ على كود CSS منظمًا ، ولكن إذا احتفظت بالشفرة لكل مكون بشكل مستقل عن المكونات الأخرى ، فسيكون من الأسهل إعادة استخدامها.
4. المزيد من الانقسام
يعد الترميز CSS مهمة صعبة للمواقع الكبيرة مثل مواقع المتاجر أو المواقع المشابهة. من ناحية أخرى ، فإن الترميز الخاص بهم في نفس الفريق مختلف تمامًا. إذا كنت تخطط لكتابة أكواد CSS لمثل هذه المواقع ، فيجب أن تلاحظ أنك بحاجة إلى التفكير في طريقة جديدة تمامًا للتصميم.
الطريقة التي أقترحها تسمى Atomic Design. تقسم هذه الطريقة عناصر التصميم إلى خمس فئات:
- الذرات
- جزيئات
- المجموعات
- القوالب
- الصفحات
في هذه الطريقة ، الذرات هي نفس العناصر الفردية مثل الأزرار وحقول النص ، إلخ. يمكن أن تكون الجزيئات في هذه الطريقة نموذجًا تم إنشاؤه من خلال الجمع بين حقول النص والأزرار. المجمعات أكبر ويتم إنشاؤها من تجميع الجزيئات. مثال على مجموعة يمكن أن يكون رأس موقع ويب.
الآن ما علاقة هذا بـ CSS ، يمكنك كتابة أكواد CSS بنفس الطريقة. ركز على الذرات أولاً. لديك ملف تضع فيه الأنماط الأساسية للنماذج. يمكنك تعيين ملف آخر للأنماط الأساسية للطباعة (لقد استخدمت هذه الطريقة في المشاريع الصغيرة أيضًا). يمكنك بعد ذلك إنشاء ملفات CSS منفصلة للتجميعات أو حتى الجزيئات الأكثر تعقيدًا.
تنشئ هذه الطريقة عدة ملفات CSS ، ولكن الميزة هي أنه يمكنك الوصول إلى الكود الذي تريد العمل معه بشكل أسرع.
5. تجنب CLASS-ITIS
ما هو CLASS-ITIS؟ مرض رهيب يجبر المستخدم على استخدام class = attribute باعتباره البعض لديه مثل هذا المرض. الكود التالي هو مثال على هذا المرض:
| 1 | <br><div class="red-bg corners-rounded-5px columns-3 height-flexible helpme icantgoonlikethis">[Insert content here]</div> |
انه محزن جدا. الأسوأ من ذلك كله ، أن هذا المرض يمكن أن ينتقل عن طريق بعض أطر CSS الكبيرة. كن حذرًا ، بغض النظر عن السمة التي تستخدمها ، إذا كنت تكتب أنماطًا في ملفات html ، فستفعل الشيء الخطأ. هذا أمر لا يطاق خاصة عندما تكبر المواقع.
في ما يلي سادس طرق تنظيم أكواد CSS
6. العمق الأدنى
هنا أود أن أذكر طريقة في CSS أحبها حقًا: SMACSS. في هذا القسم ، نناقش مشكلة توضح تطبيق الحد الأدنى من العمق. الآن ما معنى هذه الطريقة؟ تذكر أنني قلت إن استخدام فصول متعددة ليس بالأمر الجيد. يمكننا تنفيذ نفس القاعدة في كتابة أكواد CSS. هذا يسمح لنا بتجنب كتابة أكواد مكررة:
| 1 | header nav ul, footer nav ul, aside div ul {margin-top: 1rem;} |
لا يمكن للكود أعلاه زيادة حجم الترميز الخاص بك فحسب ، ولكن نظرًا لأن الرموز ليست محددة ، يمكن أن تؤثر أيضًا على أجزاء أخرى من موقع الويب نظرًا لتطبيق السمة المطلوبة على العلامات بدلاً من الفئة. لكن يمكن كتابة الكود أعلاه على النحو التالي:
| 1 | .molecule-nav {margin-top: 1rem;} |
كما ترون أعلاه ، تم تقليل الترميز بشكل كبير.
أخيرا نتمنى أن يكون درس 6 طرق لتنظيم أكواد CSS قد أفادكم
يسعدنا إثراء الموضوع من خلال تعليقاتكم و استفساراتكم المفيدة
مع تحيات موقع hdegy