يمكن أن تكون CSS لغة ترميزية قوية للغاية للمصممين.
ومع ذلك ، فإن CSS التي يتم إنتاجها هي فقط جيدة مثل المبادئ التي يتم اتباعها من قبل المصمم الذي ينشئ الرمز.
على الرغم من أنك قد تعتقد أن أي شخص يمكن أن يدير CSS ، هناك فرق كبير بين كتابة CSS وإنتاج CSS من الدرجة الأولى.
للتأكد من أنك على المسار الصحيح ، إليك ثمانية مبادئ CSS التي يجب على كل مصمم مواقع ويب اتباعها.
إذا كنت ستستثمر الوقت في ترميز CSS ، فمن المنطقي أن تأخذ الوقت الكافي ل التحقق من صحة الرمز الذي تقوم بإنشائه. ومع ذلك ، فإنه لا يتوقف عن تدهش لي كيف العديد من المصممين تخطي هذه الخطوة الحيوية. يسمح لك التحقق من شفرتك بتنظيف أي مشاكل والتأكد من أنها ستعمل بشكل جيد لزوارك.
بالإضافة إلى التحقق من صحة ملف CSS الخاص بك ، يجب عليك التحقق من صحة ملفات HTML أو XHTML. قبل التحقق من صحة هذه الملفات ، تأكد من أنك قد استغرقت وقتًا لإعلان HTML أو XHTML DOCTYPE المناسب. قد يبدو الإعلان عن DOCTYPE الخاص بك بمثابة تفصيل دنيوي ، ولكن لا يمكنني احتساب عدد المناقشات التي أجريتها مع مصممين محبطين ما زالوا يعانون من مشاكل في التصميم ، فقط لمعرفة ذلك لأنهم قد أعلنوا DOCTYPE قديمة (أو لم يعلن عن DOCTYPE على الإطلاق).
سواء كنت تعمل على مشروع بمفردك أو مع فريق من المصممين ، فمن المهم توثيق العمل الذي تقوم بإنشائه. من المحتمل أن ترى سبب أهمية ذلك في سياق فريق التصميم ، ولكن قد تتساءل عن سبب أهمية ذلك إذا كنت تعمل في مشروع منفرد. حسنًا ، هناك دائمًا فرصة لأن يتطور مشروعك المنفرد في النهاية إلى مشروع جماعي ، وإذا حدث ذلك ، فمن الأسهل بكثير الحصول على وثائق في متناول اليد بدلاً من محاولة التراجع وإنشاءها. ومع ذلك ، حتى في حالة استمرار مشروعك في عرض رجل واحد ، قد يفاجأك مدى فائدة الوثائق عندما تقرر إعادة زيارة المشروع بعد عدم النظر إليه لمدة عام.
عندما يتعلق الأمر بإنشاء وثائق لرمز CSS ، فإن الدافع الطبيعي لمعظم المصممين هو إضافته مباشرة إلى شفرته بوضعه بين / * و * /. مثل العديد من المبادئ الواردة في هذه القائمة ، لا يوجد شيء صحيح من الناحية الفنية حول اتخاذ هذا النهج. ومع ذلك ، فإن إضافة التعليقات مباشرةً إلى شفرة CSS الخاصة بك سيؤدي إلى زيادة حجم الملف ، مما يؤدي بدوره إلى زيادة أوقات التحميل وتباطؤ الأداء الكلي لموقع الويب. إذا كنت جادًا في كتابة رمز CSS من الدرجة الأولى ، فيجب عليك توثيق شفرتك ، ولكن في ملف منفصل.
على الرغم من أنني أعتقد بصدق أنه أكثر فعالية للتوثيق في ملف منفصل ، أعرف أن هناك الكثير من الملفات التي لا توافق ببساطة على هذه الممارسة. إذا رفضت المستند في ملف منفصل ، فإن أفضل ما يمكنك فعله هو استخدام ضاغط CSS (في الواقع ، حتى إذا اخترت استخدام ملف منفصل للوثائق ، فلا يزال بإمكانك الاستفادة باستخدام ضاغط CSS). يمكنك استخدام هذا ضاغط CSS من CSS Drive Gallery أو ببساطة ابحث في Google للعثور على ضاغط CSS بديل.
على الرغم من أن الاختراق أصبح ممارسة مقبولة للكثيرين داخل مجتمع CSS ، فإن هذا لا يعني أن "قرصنة CSS" مبدأ يجب أن تتبعه. تكمن المشكلة في هذا الأسلوب في التصميم في أنه يعني أنك تبحث عن حل معقد للمشاكل عن قصد. على الرغم من أنك قد تعتقد أن قرصًا واحدًا أو اثنين من الاختراق بين الحين والآخر لن يؤذي أحدًا ، فإن الدخول في عقلية "الاختراق" لأي مشكلات تواجهها قد يكون لها تأثير سلبي على عقلية التصميم العامة الخاصة بك.
إن تجنب الاختراق هو نصيحة يقدمها الخبراء لبعض الوقت. يمكنك العودة طوال الطريق إلى عام 2003 ورؤية ذلك بيتر بول كوخ (وهو مطور ومؤلف بارع) يحذر مصممي الآثار المترتبة على اختراق CSS لبعض الوقت: "لقد ظهر وحش التعقيد ، في وسط تطوير الويب الحديث. في الوقت الحاضر لا يظهر نفسه كطاولة متداخلة بلا نهاية ، ولكن كاختراق CSS لا نهاية له معقد ".
نظرًا لأن نظام div يوفر مستوى عاليًا من المرونة ، فقد يكون من السهل المبالغة في استخدامها. في الواقع ، أصبحت هذه المشكلة شائعة جدًا بين المصممين الذين أنشأ مجتمع CSS مصطلحه الخاص لتسمية هذه المشكلة: divitus. لتجنب الوقوع ضحية لهذه الحالة ، قبل استخدام علامة div تلقائيًا ، يجب أن تسأل نفسك دائمًا ما إذا كانت هناك علامة HTML فعلية ستنجز المهمة نيابةً عنك. على سبيل المثال ، بدلاً من إنشاء عناوين عناوين متعددة ، لماذا لا تستخدم علامات عنوان HTML المتوفرة بالفعل ، مثل H1 و H2؟
بمجرد البدء في أخذ مسألة div في الاعتبار ، سترى بسرعة فوائد استخدام علامة HTML المناسبة بدلاً من إنشاء div جديد تلقائيًا. لا يمكنها فقط تقليل كمية التعليمات البرمجية التي يجب عليك إنشائها (والتي ستوفر عليك الوقت ، بالإضافة إلى تقليل وقت تحميل موقعك على الويب) ، ولكنها ستعطي أيضًا كودك بنية أكثر منطقية.
إذا سألت مصممًا جديدًا أو عديم الخبرة عن الطريقة التي يقرر بها تسمية فصوله ، فقد يقول إنه لا يهم فعلًا. في حين أن هذا صحيح تقنيًا ، فهذه طريقة عرض قصيرة النظر لتسمية فئات CSS. على الرغم من وجود مصممين يندرجون ضمن فئة لا يهتمون بأسماء فئة CSS ، إلا أن هناك أيضًا مصممين يفكرون في أسماء الصف الخاصة بهم ، ولكنهم في الحقيقة يتخذون أسلوبًا خاطئًا.
بما أنني لا أريد أن أضربك ببساطة على رأسك بأمثلة نظرية ، دعني أوضح ذلك بعبارات محددة. لنفترض أنك تنشئ فئة للتحكم في أحد المربعات في صفحتك. سيكون المربع موجودًا في أسفل الصفحة ، وسيحتوي على تعليقات من القراء وستستخدم CSS لمنحه خلفية تان والتحكم في المساحة. بدلاً من تسمية هذا المربع .tan (وهو ما يفعله العديد من المصممين ذوي النوايا الحسنة) ، أطلق عليه اسم المربع .comment-box. السبب في أن المربع .comment-box هو اسم فئة أفضل من .tan-box لأنه إذا قررت تغيير لون الخلفية إلى اللون الأزرق على الطريق (أو قرر نقل المربع من أسفل الصفحة إلى منطقة مختلفة) لن يربكك أو أي مصمم آخر يبحث عبر CSS لموقع الويب هذا.
في حين أن الاختزال يمكن أن يكون مربكًا للمصممين الذين بدأوا للتو في كتابة شفرة CSS الخاصة بهم ، بمجرد أن تعتاد على أسلوب الاختزال ، تصبح واحدة من أكثر الممارسات الفعالة التي يمكنك اتباعها كمصمم .
هناك فوائد متعددة لاستخدام الاختزال. لأحد ، فهو يقلل من حجم ملفاتك ، مما يقلل من وقت تحميل موقعك. بالإضافة إلى ذلك ، فهو لا يسهل فقط تنظيم التعليمات البرمجية الخاصة بك ، ولكنه يجعلها أبسط إذا كنت تحتاج إلى إجراء تغييرات على التعليمات البرمجية الخاصة بك في المستقبل. عندما تبدأ التكيف مع الاختزال ، يجب أيضًا أن تتدرب على كتابة التعليمات البرمجية الخاصة بك على سطر واحد (بدلاً من نشر الإعلانات على أسطر متعددة).
كمصمم ، أنت أكثر ميلاً فنياً من أي شخص آخر في التيار السائد. لأنك جزء من أقلية تعيش وتتنفس التكنولوجيا ، فهناك الكثير من العادات التي لديك والتي لم يفكر بها معظم الناس. على سبيل المثال ، ربما تكون قد خرجت من طريقك للقضاء على أكبر قدر ممكن من "المسار الورقي" في حياتك. ومع ذلك ، من المهم أن نتذكر أن غالبية السكان ما زالوا يطبعون الأمور على أساس منتظم. على الرغم من أنك ربما تضع علامة على عنصر ما باستخدام del.icio.us عندما تريد حفظه كمرجع في المستقبل ، فإن مستخدم الإنترنت العادي سيطبع تلك الصفحة نفسها.
نظرًا لأن الأشخاص لا يزالون يطبعون معلومات من الإنترنت ، فمن المهم استخدام CSS لجعل طابعة المحتوى لديك ملائمة . سيقدر الزوار جميع الأعمال التي قمت بوضعها في إنشاء تخطيط جميل لموقع الويب الذي يزورونه ، ولكن عندما يقررون طباعة صفحة من هذا الموقع ، سيقدرونك أكثر عندما يدركون أن مطبوعاتهم تحتوي فقط على النص الذي يريدونه (ولا شيء من الرسومات المذهلة التي تبدو رائعة على أجهزة الكمبيوتر الخاصة بهم ولكنها قد تهدر الكثير من الحبر من الطابعة الخاصة بهم). نظرًا لأن CSS تجعل من السهل جدًا التأكد من تنسيق المحتوى بشكل صحيح عند طباعته ، لا يوجد عذر لمصمم حقيقي لإهمال هذه الخطوة في عملية التصميم.
قد تظن أن هذا المبدأ الأخير يبدو مبتذلاً ، لكن يمكن القول إنه أهم من القائمة بأكملها. إذا كنت ملتزمًا بكونك أفضل مصمم ممكن ، فعليك التأكد من أنك تعمل دائمًا على توسيع معرفتك بـ CSS . لحسن الحظ ، من السهل القيام بذلك إذا كانت لديك الرغبة والرغبة في الاستمرار في تعليم CSS الخاص بك. في حين أن التعليم المستمر يمكن أن يكون مهمة صعبة بالنسبة للأفراد في العديد من الصناعات غير الفنية بطبيعتها ، لأن الإنترنت هو أساس حرفياً لـ CSS ، فإن مقدار الموارد المجانية التي يمكنك أن تتعلم منها هي حرفياً لا نهاية لها. إذا كنت تعتقد أنني أبالغ ، فاكتب "CSS" في Google وستلاحظ أن هناك 483،000،000 نتيجة لتصفحها.
بالإضافة إلى التعلم من الموارد عبر الإنترنت (وموارد الطباعة إذا كنت تفضل ذلك) ، يمكنك تعلم الكثير من مصممي CSS الآخرين. سواء كنت تقوم بتحليل عملهم ، أو الاستماع إلى النصيحة التي يقدمونها عبر الإنترنت أو التحدث معهم في مواقف وجهًا لوجه ، يمكنك اكتساب الكثير من القيمة من خلال التفاعل وربما التعاون مع مصممين آخرين ملتزمين باتباع مبادئ من الدرجة الأولى تصميم CSS وإنتاج قطع مذهلة من العمل.