تطوير كفاءة ، مبسط المغلق
يمكن مقارنة CSS بمجموعة أدوات النحات ؛ مثل المصممين في العمل ، نحن المصممين استخدام CSS لإنشاء تخطيطات منسقة للمواقع.
على مر السنين ، أصبحت هذه العملية أكثر تنظيماً ؛ تم وضع القواعد لإنشاء أفضل ممارسات الترميز.
في هذه المقالة ، سنلقي نظرة على بعض الأفكار التي يمكنك استخدامها عند كتابة أوراق الأنماط لتسريع التعليمات البرمجية.
تتسم إدارة CSS الفعالة بسهولة الإدارة وسهولة القراءة ويمكن أن تكون موردًا لمصممي الويب. يعد تنظيم العمل خطوة كبيرة ، ولكن استخدام CSS يمكن أن يكون أكثر تعقيدًا من ذلك.
أثناء قراءة هذه المقالة ، ضع في اعتبارك التفضيلات الخاصة بك ؛ أفضل نصيحة يمكنك الحصول عليها من أي مطور هو العثور على طريقة العمل الخاصة بك. الجمع بين عدد قليل من التقنيات هنا مع الطرق الخاصة بك للحصول على أكبر قدر من الفائدة.
لماذا Bother تبسيط CSS؟
يخلط العديد من المصممين بين اللغات الأمامية والخلفية عند التحدث عن شفرة التحليل. تعد CSS و HTML لغات تصميم أمامية تُستخدم لتنسيق وعناصر النمط على موقع الويب. يتم تنزيل الملفات وتحليلها من خلال متصفح الزائر ، مما يعني أن رمز الواجهة الأمامية يحتوي على وقت تحميل كبير.
يستغرق الرمز الذي تم تنزيله وتحليله بواسطة المتصفح وقتًا ليتم قراءته وحسابه ، تمامًا مثل الشفرة المكتوبة باللغات الخلفية (مثل PHP أو Ruby). يمكن أن تستفيد CSS المبسّطة بشكل كبير من موقع الويب ؛ حيث يمكن أن تقصر أوقات التحميل وتسريع بنية عنصر الصفحة.
قد لا تكون الفوائد واضحة مع اتصالات اليوم عالية السرعة وأنظمة التشغيل المتقدمة. قد ترغب في إلقاء نظرة على موقع الويب الخاص بك على متصفح المحمول لمقارنة أوقات التحميل ومعرفة كيفية تحميل موقع الويب.
عندما يتم ترميز CSS بكفاءة ، يجب أن تشاهد نموذج ونمط عناصر موقع الويب أثناء معالجتها. قد يبدو هذا مختلفًا عن المتصفح إلى المتصفح ، لكنه لا يزال يحدث. كلما اختبرت رمز موقع الويب الخاص بك أكثر ، كلما سترى المزيد.
حافظ على الرمز الخاص بك موحدة وبسيطة. إذا كنت تقوم بتحديث مدونتك أو موقع الويب الشخصي الخاص بك بعد بضعة أشهر من التطوير المبدئي ، فإن استخدام أنماط CSS التي تعرفها أسهل من التعامل مع الأنماط الجديدة. التكيف مع المعايير المعمول بها يساعد على المدى الطويل.
كيفية العمل مع قانون فعال
لبدء أنماط التشفير بكفاءة قصوى ، سيكون عليك اعتماد بعض الأفكار الجديدة. هذه هي تقنيات CSS الأساسية التي يتم استخدامها اليوم من قبل مواقع الإنترنت ومصممي التطبيقات من الدرجة الأولى.
ابق على الرمز الخاص بك بسيطة
هذا يمكن التغاضي عنها بسهولة. عند تخطيط مجموعة من البيانات للأنماط الخاصة بك ، اجعلها بسيطة. إنشاء مجموعات البيانات في مكدس العمود إذا كنت تريد ذلك.
ابدأ بإنشاء قائمة من الأقسام المختلفة للعمل عليها في الأنماط الخاصة بك. يمكنك تضمين النص والنماذج ومربعات التخطيط والرؤوس والتذييلات وأي شيء آخر قد تحتاج إليه. للحصول على تنظيم حقيقي ، يمكنك تقسيمه إلى أنماط قليلة معروفة ، مثل id أو class لارتباطات التنقل.
تساعد هذه الخطوة الأولى في إنشاء مخطط لموقع الويب الخاص بك باستخدام كلمات واضحة ، قبل الدخول إلى أي لغة نمط. بعد ذلك ، سيكون الجلوس لكتابة الرمز أكثر بساطة ؛ إن وجود قائمة الموارد أمامك سيساعدك على سكب الشفرة بمعدل فائق عن الإنساني.
ابق كتل من الكود المحدد والمتناثرة
هناك جدل مستمر حول كيفية كتابة شفرة CSS. عندما بدأت لأول مرة ، استخدمت علامة الترميز لأنه كان كل ما رأيته في حياتي. ولكن تدوين الخط المفرد أسرع بكثير عندما يتعلق الأمر بتحليل النص وجعله مقروءًا.
أنا لا أودع قضية لتجاهل نمط CSS بعيد عنه. عندما تتعامل مع عنصر مهم أو id التي تحتوي على ستة أو سبعة خصائص رئيسية ، سيكون الاحتفاظ بها في شكل حظر أسهل. ستقوم بعزل الأجزاء المهمة من أسلوبك ، مما يسهل العثور عليها في لمح البصر.
كما أن قراءة الأنماط الطويلة في تدوين الكتل أسهل أيضًا لأن معظم برامج تحرير النصوص تقوم بلف خطوط طويلة ، ويمكن أن يؤدي قراءة أزواج الخصائص - القيمة إلى إرباك عندما يكون لديك 10 أو أكثر لتخوضها. كونك مصمم الويب ، يجب عليك إجراء المكالمة على كيفية تفريغ شفرة CSS. ضع في اعتبارك الكفاءة ، واستخدم أفضل حكم.
العمل مع المطورين الآخرين
إذا كنت مصمم ويب محترفًا أو تطمح إلى أن تكون واحدًا ، فمن المحتمل أنك ستعمل مع فريق عاجلاً أم آجلاً. هذا يمكن أن يكون نعمة أو نقمة ، اعتمادا على الفريق.
غالبًا ما يحجم المصممون عن إجراء تغييرات كبيرة في عملهم. يختلف رمز CSS قليلاً لأنك تحاول إنشاء تخطيط جميل باستخدام قيم الخاصية فقط ، ويمكن أن تتعطل الملفات عند تمريرها بين عدد قليل من الأيدي. لذلك ، ابق منظما.
التعليقات هي مساعدة كبيرة. إذا كانت الخطوط أو الكتل البرمجية قد تربك الآخرين أو تضللهم ، فستوفر التعليقات ساعات. اشرح كل شيء تضعه في ورقة الأنماط بأناقة قدر الإمكان.
تأكد من الكتابة فوق أي أنماط مكررة أو إلحاق. تخيل أن h1 إلى h4 تم تصميم العناوين عالية في وثيقة CSS ، ولكن بعد ذلك يقوم بعض الكود السفلي بتغيير خطوطهم. قد يكون هذا الأمر محيرًا للغاية بالنسبة لشخص لم يكتب الشفرة ويجب عليه الآن إصلاح الخطأ وإصلاحه.
التواصل هو أيضا بالغ الأهمية. يمكنك كتابة أكثر الأكواد فعالية ، لكن قلة التواصل ستؤذي فريقك. ركز على المهمة التي بداخلك ، واعمل مع الأفكار الإبداعية التي تم إنتاجها بشكل جماعي من قبل الفريق (وليس فقط بنفسك).
تتبع وثائق CSS منفصلة
هناك طريقة أخرى للمحافظة على نظافة الشفرة وتنظيمها وهي الاحتفاظ بأنماط النمط منفصلة. يعمل هذا بشكل جيد مع مواقع الويب الكبيرة التي قد تكون فيها جميع الأنماط الموجودة في مستند واحد غير واقعية.
الفيسبوك هو مثال جيد. من المحتمل أن يكون لديه العديد من الأنماط المختلفة لجميع صفحاته المختلفة: الملف الشخصي ، البحث ، التسجيل ، الصور ، إلخ. إذا تم دمج جميع الأنماط في ملف واحد ، لا أريد أن أكون الشخص الذي يجب عليه أن يقوم بالفرز من خلال الكود فقط إصلاح خطأ بسيط.
يحصل Facebook على عدد زيارات أكبر بكثير من موقعك على الويب ، ولكن المبادئ هي نفسها. إذا كانت المنظمة تمثل مصدر قلق ، يمكن أن تقطع أوراق النمط المنفصلة شوطا طويلا. غالبًا ما يقوم مصممو الويب بتنظيم الكود استنادًا إلى جانب المستند الذي يقوم بتكوينه (على سبيل المثال ، layout.css ، text.css ، forms.css ).
لا يلزم تحميل جميع الأنماط على كل صفحة. وهنا تكمن الفائدة: تسمح لك الطريقة بتخصيص أكبر عند بناء موقع الويب الخاص بك. ستعمل على تقليل وقت التحليل بشكل كبير فقط من خلال إنشاء طرق عرض وأنماط منفصلة.
اختبار دعم IE
لطالما طور مطورو الويب Internet Explorer باعتباره الشرير ، لا سيما مع CSS. لحسن الحظ ، يمكنك تطبيق التعليقات الشرطية (التي تبدو كتعليقات منتظمة لمعظم المتصفحات) على HTML.
يمكنك استخدام هذه لتطبيق الأنماط في Internet Explorer. تحقق من التعليقات الشرطية إذا لم تكن على دراية بها ؛ يمكن أن تثبت أنها لا تقدر بثمن عندما لا تعمل خصائص CSS بشكل صحيح وتحتاج إلى بديل.
مع الافراج عن إنترنت إكسبلورر 9 بيتا نحن نقترب قليلاً من تجربة الإنترنت الموحدة. المشكلة الوحيدة هي عدد الأشخاص الذين لا يزالون يستخدمون المتصفحات القديمة مثل IE6 و IE7 ، التي لديها أخطاء معالجة خطيرة (بسبب محركات العرض المعيبة) وتتطلب أحيانًا أنماطًا خارجية. لحسن الحظ ، تحسن الدعم ، ويبدو أن شركة Microsoft تعمل على تغيير الأمور.
إضافة جدول المحتويات
هذه الخطوة اختيارية ، لكني أجد أنها تعمل معجزة لأوراق الأنماط الخاصة بي. يمكنك تخزين الجدول خارج مستند CSS نفسه ، ولكنني وجدت أن هذا الأمر سيأتي بنتائج عكسية خاصة لأن إضافة مضمنة التعليقات أمر سهل للغاية.
الأسباب الرئيسية لوضع جدول المحتويات في الأنماط الخاصة بك هي أنه يسهل الوصول ويسهل عملية التحرير. ضع علامات في بداية المستند لفصل التعليمة البرمجية إلى أقسام منطقية.
يعد إنشاء مفاتيحك الخاصة طريقة جيدة. على سبيل المثال ، إذا كنت تخطط لتقسيم الجدول الخاص بك وفقًا للمجالات الرئيسية للمستند (التخطيط ، الخط ، الرأس ، التنقل ، إلخ) ، يمكنك أن تقوم بإدارة المقاطع ذات الأحرف الفريدة.
يمكنك استخدام =!layout و =!font لتحديد تخطيط ومقاطع الخط ، على التوالي. من المحتمل ألا تصطدم بتسلسلات محددة من الرموز في أي مكان في الشفرة ، لذا يجب أن تكون إضافتها إلى كل من جدولك وبداية كل قسم من التعليقات آمنة. ثم ، استخدم وظيفة البحث في محرر النص الخاص بك لتخطي إلى القسم الذي تريده.
هذه أيضًا إستراتيجية جيدة للمشاريع التي سيبحث فيها العديد من الأشخاص عن الشفرة. يبقي كل شيء منظم ويمكن الوصول إليها.
هناك العديد من الطرق لتحسين الشفرة وجعلها أكثر فعالية ، وتعتبر هذه النصائح بداية رائعة. تتطور CSS ، ويتم بناء الكثير من الأفكار الجديدة حولها.
أنت بحاجة إلى العاطفة والتفاني لجعله في صناعة التصميم. إذا تمكنت من التمسك بشغفك بالتصميم الرقمي ، فلن يكون من الصعب مواكبة أفضل ممارسات CSS. يمكن أن يكون الوصول إلى الآخرين في هذا المجتمع العالمي الضخم لمصممي الويب مساعدة كبيرة ؛ عادة ما يسعد خبراء الصناعة بمشاركة تقنياتهم وابتكاراتهم.
هذه الوظيفة كانت مكتوبة حصرياً لـ Webdesigner Depot by جيك روشيلو ، مصمم ويب عاطفي وعشاق وسائل الاعلام الاجتماعية. جيك يحب القراءة والكتابة عن أحدث الاتجاهات الرقمية والإنترنت والتواصل مع مجتمع التصميم. لمعرفة المزيد عن عمله ، ابحث عنه على Twitter @ jakerocheleau .
ما هي طرقك لتبسيط CSS؟ أي اقتراحات لمطوّري CSS للمبتدئين؟ ما الميزات الجديدة أو الدعم الإضافي الذي ترغب في مشاهدته في التكرارات المستقبلية لـ CSS؟