نصائح لصفحات أنماط انسيابية (css)

MaZeN · مشاركة رقم : 1 (permalink) 05-01-2008, 02:17 PM

تصميم صفحات الويب أصبح في الوقت الحالي ليس مجرد كتابة شيفرات برمجية، بل تعدى هذا المعنى بكثير وأصبح فن بحد ذاته، من اختيار العناصر المناسبة التي لها مدلوليتها في المكان المناسب، كاستخدام <p> للفقرات، <h1> للعناوين المهمة، إلى اختيار الهيكلة المناسبة لمحركات البحث، وضع المحتوى مثلا في المقدمة قبل قائمة التصفح.

كتابة CSS قد يكون كابوساً لمن ﻻ يعرف الأساسيات من ناحية تموضع العناصر، الفرق بين عناصر HTML المختلفة. في هذا المقال سأحاول تلخيص 10 نصائح لكتابة CSS بشكل أحسن وأرتب.
1- تأكد من أن جميع المتصفحات تتكلم بلغة واحدة
هناك عدة حيل وتقنيات لجعل المتصفحات تعيد خصائصها الافتراضية إلى ما تريد أنت لصفحتك، وحفظها في ملف reset.css، والميزة لإعادة هذه الخصائص هي عرض صفحتك بالشكل الذي تريده في جميع المتصفحات، ومن هذه التقنيات هي:
* Reset Reloaded
* Starting with CSS: revisited
* Christian Montoya’s initial CSS file

2- ابدأ بأبيض ورمادي
كأساس للصفحة أنصح بتخطيط الصفحة مسبقا على ورقة وقلم، وبعد هذا تنتقل إلى كتابة HTML وCSS ولكن فقط باستخدام لونين معاكسين، كالأبيض والرمادي، حيث بهذه الطريقة ستكون صفحتك مستقلة عن اختيار الألوان، هذا مناسب جدا للمصممين الذين يتعاملون مع عملاء متقلبي المزاج، ومن ثم تبدأ بإضافة الألوان والصور، يمكنك اعتبار هذه الخطوة كالمخطط الأزرق [Blueprint] الذي يستخدم عادة في بناء المباني الهندسية، وتصميم المواقع شبيه جدا بهندسة المباني.

3- توزيع ملفات CSS
استخدام ملف CSS أساسي للموقع وتوزيع باقي الأوامر كل على حسب مكانه في ملفات مستقلة سيوفر عليك عملية الصيانة، المتابعة، والوقت، بحيث مثلا لو أردت أن تغير حجم الخطوط في جميع الصفحات ستذهب إلى الملف الذي يهتم بالخطوط typography.css وتحدد القيمة التي تريدها وستطبق على جميع الموقع دون عناء.
محتوى master.css:

كود:
1. @import url("reset.css"); 2. @import url("global.css"); 3. @import url("structure.css");
وستستدعي الملف عن طريق السطر التالي في صفحة HTML، لاحظ أني أستخدم الأمر @import مع العلم أن هناك طريقة أخرى مشهورة لجلب الملف ولكن هذا ما سأشرحه في النقطة التالية:

كود:
1. <style type="****/css" media="screen,projection"> @import url("master.css"); </style>
4- استخدام @import لجلب ملفات CSS
حاول استخدام @import عندما تريد جلب ملفات CSS الأساسية إلى صفحات HTML، هذه الحيلة ستخفي ملف CSS الذي تريد جلبه عن [المتصفحات القديمة] ، أتكلم عن IE5 وأقل، NE4، من يستخدم هذه المتصفحات إلى الآن ﻻ يستحق أن يرى إبداع صفحتك باستخدام CSS، لسبب بسيط وهو القصور التي تعاني منه هذه المتصفحات وبعضها ستتوقف عن العمل في بعض الأحيان إن صادفت أمر ﻻ تستطيع تحليله مسببة خطأ لدى المستخدم، لذا سيتم منع جلب الملف وستظهر له الصفحة بالنصوص والروابط التشعبية العادية، لذا جرب صفحتك مع وبدون CSS لتقيس مدى قابلية صفحتك.

5- أكثر من فئة class للعنصر الواحد
في الحقيقة لا أرى الكثير من المصممين يستخدمون هذه الميزة في CSS، تتيح لك هذه الميزة باستخدام أكثر من فئة واحدة class للعنصر، مثال:

كود:
1. <p class="float-left align-left width-50">فقرة</p>

6- احتفظ بمكتبة للفئات Classes
بما أنك تستطيع استخدام أكثر من فئة على العنصر الواحد، فمن المفيد أن تحتفظ بمكتبة لبعض الفئات لتعيد استخدامها أكثر من مرة لأكثر من عنصر، ولكن مع مراعاة أن ﻻ تستخدمها عند الإنتهاء من مشروعك، استخدامك لهذه الفئات سيخلط بين التقديم والتوصيف Presentation and Markup.

كود:
1. .width-100 { width: 100%; } 2. .font-100 { font-size: 100%; } 3. .float-right { float: right; } 4. .float-left { float: left; } 5. .align-right { ****-align: right; } 6. .align-left { ****-align: left; } 7. .clear-me { clear: both; }
7- تخلص من ترقيعات المتصفحات
لعله يكون السبب الرئيس في [ظهور الصفحة بشكل خاطئ على متصفح IE7] ، الكثير من المصممين استخدموا ترقيعات المتصفحات CSS Hacks حتى يتمكنوا من تعديل خاصية معينة في متصفح IE6، ومنها:

كود:
1. html > body 2. * html 3. body > element
وللأسف آتت أكلها عندما ظهر IE7 بدأ بتطبيق هذه الخواص والتي كانت مخفية عن IE6 مما سبب هذه الأخطاء في الصفحات، لهذا ينصح دائما باتباع المعايير القياسية، وفي حالة الانترنت اكسبلورر يمكنك اعتماد [الجمل الشرطية التي وفرتها مايكروسوفت] لتطبيق قواعد CSS الخاصة بها.

8- استخدم عناصر HTML المتوفرة أولا
أرى الكثير من المطورين يعقدون مسألة CSS بشكل كبير وخلطها بشكل غير مناسب مع HTML، إما لعدم فهمهم لها بالشكل الصحيح، أو لعدم معرفتهم [بعناصر HTML (ملف PDF)] ومدلولياتها، أرى بعض الناس يستخدمون:

كود:
1. <div class="header-page"><strong>عنوان 1</strong></div>
أهذا أفضل، أم هذا؟

كود:
1. <h1>عنوان 1</h1>
والكثير من هذه الأخطاء والتعقيدات مما يؤدي إلى كبر ملفات CSS للموقع، وتشعب عناصر HTML، وكسر قانون فصل المحتوى عن التوصيف، وعدم المحاظفة على نظافة وبساطة HTML، وهي النقطة الجوهرية لوجود CSS.

9- التموضع ليس لكل شيء
ابدأ بعناصر HTML فقط، دون وضع أي قواعد CSS للتحكم في وضعها، إن لم تتمكن من وضع العنصر في المكان الذي تريده عندها إبدأ باستخدم float وposition.

10- استخدم ضاغط ملفات CSS
[ضاغط ملفات CSS] يمكنه أن يقلل من المساحة لملفات CSS لديك عن طريق بعض التقنيات الخاصة والتخلص من المساحات الفاضية وبالتالي تسريع عملية تنزيل هذه الملفات، ولكن هناك مساوئ ومنها أنك ستفقد التنسيق الذي يستطيع الانسان قرائته، أي بمعنى آخر احتفظ بنسخة لك للتعديل عليها ونسخة مضغوطة للموقع.