إذا كنت تريد أن تصبح خبيرًا في CSS، فلا يكفي أن تكون ماهرًا في استخدام محددات CSS. كما أنها تكمن في التخطيط الشامل للعمل، وإتقان سير العمل وتحسين قابلية الصيانة وكفاءة ورقة الأنماط. في هذه المقالة، تختار جينا بولتون 10 تقنيات لتطبيقات CSS من 12 من كبار المصممين وتوصي بها للجميع.
لقد كنت أبحث مؤخرًا عن طرق لإنشاء أوراق أنماط أكثر جاذبية. باستخدام CSS يمكننا إنشاء المواقع الرائعة التي نريدها، وكتابة CSS هي متعة بحد ذاتها.
كيفية إنشاء ورقة أنماط أكثر جاذبية؟ ما هي الميزات التي يجب أن تحتوي عليها ورقة الأنماط الخاصة بك؟
قبل بضعة أشهر، كان من دواعي سروري حضور مؤتمر رؤية الويب لعام 2007 في بورتلاند، أوريغون، الولايات المتحدة الأمريكية. في هذا الحدث، قمت بالبحث عن 12 مصممًا قدموا مساهمات بارزة في تصميم وتطوير الويب. ساعدتني نتائج هذا البحث، بالإضافة إلى خبرتي العملية، في تلخيص مجموعة من الأساليب الجيدة لإنشاء أوراق أنماط جميلة.
01. لا تدع CSS يحتوي على عدد كبير جدًا من العلامات
قد يبدو ربط أوراق الأنماط أو استيرادها مهمة مربكة. لكني أريد أن أؤكد على سبب أهمية هذا الأمر. لقد رأيت العديد من مطوري مواقع الويب لديهم مستندات CSS أنيقة ومنظمة جيدًا، ولكن ببطء، لأنهم قد لا يتمكنون من التحديث بسرعة في فترة زمنية قصيرة، أو لأنهم ببساطة كسالى جدًا بحيث لا يمكنهم إدارتها، أوراق الأنماط الرائعة التي تم إنشاؤها مسبقًا أصبحت القمامة.
تخيل أنك تعمل على موقع ويب ضخم يحتاج إلى نشر مئات الأجزاء من المحتوى. نظرًا لأن الوقت محدود، فأنت بحاجة إلى إجراء تغييرات أو تحديثات سريعة عن طريق تداخل CSS أو ترتيبه. تمر سنة بعد سنة، وتستمر هذه العادة، حتى يتم إخبارك ذات يوم أن موقع الويب سيتم إعادة تصميمه بالكامل (لكن المحتوى سيظل كما هو) وأن لديك أسبوعًا فقط لإنشائه (بما في ذلك الاختبار).
عادةً ما يكون تحديث ورقة الأنماط طريقة بسيطة جدًا. إلا إذا قمت بإجراء تغييرات على مناطق متفرقة من موقع الويب لفترة طويلة. لا يمكنك الحصول على فهم شامل لبنية ورقة أنماط موقع الويب. والآن لديك خياران: أ. تنظيم كل شيء وإعادة تصميمه خلال شهر (حظ سعيد)؛ ب.
لا تدع عملك يصبح مثل هذا. إن ربط ورقة الأنماط الخاصة بك أو استيرادها ليس أمرًا عاديًا. قم بإنشاء ورقة أنماط نظيفة ومرتبة واحتفظ بها هناك، وستكون أكثر سعادة في العمل.
ملحوظة: لا تقم بإضافة الكثير من العلامات إلى ورقة الأنماط الخاصة بك. إذا حاولت إنشاء ورقة أنماط جديدة في كل مرة تقوم فيها بتحديث أو إضافة محتوى جديد، فمن المؤكد أنك ستواجه مشكلة. سيؤدي وجود عدد كبير جدًا من الروابط وأوراق الأنماط المستوردة إلى صعوبة إزالة الأخطاء وجعل صيانة ورقة الأنماط الخاصة بك أمرًا صعبًا. من المفهوم أن تقوم مواقع الويب الكبيرة بإنشاء أوراق أنماط منفصلة لأجزاء مختلفة. فقط احرص على عدم المبالغة في التطرف.
ومن الجدير بالذكر أن إضافة الكثير من أوراق الأنماط سيؤدي إلى زيادة عدد طلبات http، مما قد يؤثر أيضًا على العمل اللاحق. بالإضافة إلى ذلك، يحتوي متصفح Microsoft IE6 على قيود معينة على ورقة أنماط الاتصال المكونة من 32 اتصالًا. .
02. علم الدلالة ليس مجرد كلمة صناعية
كما تعلم، يجب أن أذكر ذلك، ستكون الدلالات صديقًا جيدًا لك. بالإضافة إلى اختيار العناصر الأكثر ملاءمة وذات مغزى للتعبير عن المحتوى الخاص بك، يجب عليك أيضًا التأكد من اختيار قيم سمات الفئة والمعرف. خارج وظيفتك، سيجعل ذلك حياتك أسهل (وسوف يجعل حياة فريق العمل الخاص بك أكثر بساطة - إذا كنت تعمل في فريق). ألقِ نظرة على التعريف أدناه:
.l13k { اللون: #369 }
إذا أتيت للتو إلى العمل ورأيت هذا الفصل في ملف CSS هذا، فهل ستجد هذا الفصل على الفور؟ ربما لا يكون ذلك ممكنًا، لأن اسم هذا الفصل ربما يكون اختصارًا، لذلك لا توجد طريقة دقيقة يمكنك من خلالها معرفة ذلك على الفور. أو ربما تضعه هناك وأنت تعرف ما يعنيه اليوم، ولكن هل يمكنك ضمان أنك ستظل تعرف ما يعنيه بعد سنوات عديدة؟
والآن لننظر إلى هذا التعريف:
.يسار-أزرق { اللون: #369 }
من المحتمل أن تعرف على الفور ما يفعله محدد الفئة هذا تمامًا كما تعلم أن الوحدة الزرقاء في العمود الأيسر موجودة، وهذا يعني أنها تعمل. لقد ذكرت سابقًا أنك قد تحتاج إلى إعادة التصميم في غضون أسبوع. أثناء إعادة التصميم، تم وضع هذه الوحدة على اليمين وكانت لا تزال حمراء. هذه الفئة لم تعد لها قيمة موجودة. والآن علي أن أختار، إما تغيير جميع قيم السمات، أو تركها بمفردها. (وهذا قد يؤدي إلى مزيد من الارتباك.)
من الأفضل عدم إضافة أبعاد اللون أو الطول والعرض إلى سمات صفك. يجب عليك تجنب أي قيم خصائص تكون كلمات حرفية. يمكن أن تؤدي السمات المباشرة (مثل المربع) إلى فصل المحتوى.
أخيرًا، دعونا نلقي نظرة على اصطلاح تسمية أكثر ملاءمة:
.وصف المنتج { اللون: #369 }
هنا يمكنك رؤيته. وصف المنتج المحدد في هذا النمط واضح جدًا بغض النظر عن كيفية تغييره.
03.فوائد إضافة التعليقات
إذا كانت تعليقاتك منظمة بشكل جيد وضمن نطاق CSS، فقم بتسمية كل قسم بشكل واضح. من الأفضل التأكد من أن التعليقات بارزة بشكل مرئي حتى يمكن تحديد موقعها بسرعة عند تمرير المحتوى وإلقاء نظرة سريعة على عشرة أسطر، وسيكون التعليق على مستند CSS الخاص بك مفيدًا جدًا لك أو للآخرين في التطوير المستقبلي. سوف تلمح معظم التعليقات الأساسية إلى سبب استخدام هذه القاعدة هنا.
نصائح وملاحظات
يمكن أن تساعدك إضافة التعليقات أنت أو المطورين المستقبليين على تجنب الالتباس غير الضروري. استمر في هذه العادة. انظر المثال:
/* إيقاف حدود الصور المرتبطة */
إمج { الحدود: 0 }
الوقت والتوقيع
يفضل بعض المصممين والمطورين الإشارة إلى تاريخ ووقت آخر تحديث لمستند CSS، بالإضافة إلى الاسم والحالة الأولية. يمكن أن توفر لك هذه المعلومات معلومات حول الأشخاص المشاركين، بالإضافة إلى تلميح حول أحدث الوثائق.
/* أنماط الطباعة سوشيمونستر
تم التحديث: الخميس 10.18.07 @ 5:15 مساءً
المؤلف: جينا بولتون
-------------------------------------------------- --*/
هذه فكرة جيدة خاصة إذا كنت تعمل ضمن فريق، ضع في اعتبارك أن بعض الفرق تحتاج إلى حذف هذه المعلومات (بعض الشركات تفضل عدم وجود هذه الأسماء والتواريخ في المستند.) لذا، من الجيد أن تأخذ مجرد فكرة انظر هل هذه المعلومات مطلوبة؟
تصنيف المنظمة
إنها فكرة جيدة أن تستخدم التعليقات لوصف أجزاء مختلفة من CSS الخاص بك بإيجاز. على سبيل المثال، إذا تم تجميع كافة أنواع العناوين معًا، فستحتاج إلى النظر إليها لتمييزها.
/* رأس
-------------------------------------------------- --*/
سأوضح هذا لاحقًا عندما أناقش "التمييز بين الأنواع".
وضع علامة توضيحية
إذا كان مستند CSS الخاص بك ينظم أنماطًا متفرقة كما قلت أعلاه، فيمكن أن تساعدك علامات التعليق على تسهيل الأمر عندما تريد العثور على هذا الجزء من الملف. يمكنك استخدام رموز الميزات والكلمات الرئيسية والعثور على النتيجة النهائية.
/* =الرأس
-------------------------------------------------- --*/
وهذا مفيد في أوراق الأنماط الطويلة والمعقدة. يمكنك أن تقرأ عن هذا في Stop Design. .
الرجوع إلى