أحيانا تنجز عملا نظيفا لأحد الزبناء، تحرص على أن تكون جميع الصفحات متوافقة مع اختبارات W3C، إلا أن صاحب الموقع يضيف محتويات أو يغير بعض الأشياء التي تسبب عشرات الأخطاء في الصفحة.

أبسط مثال أن يقوم صاحب الموقع بإضافة شريط محترك marquee في أعلى الصفحة، أو يضيف صورة دون إضافة وسم alt.

شخصيا أحاول التبرء من هذه الأعمال ما أمكن، بحيث لا أذكرها للآخرين، ولنفس السبب تقوم بعض الشركات بإخفاء بعض الأعمال من صفحة portfolio الخاصة بها.

تمة مطور يقطع تصاميم PSD ويحولها الى صفحات CSS و XHTML، هذا الشخص سيتعلم تقنيات وأشياء جديدة، لكنه لن يبذل أي جهد في تنسيق المحتويات وتوزيعها أو اختيار الالوان المناسبة وتغيير الخطوط والاحجام عدة مرات، نسبيا هذا المطور مثل Robot الذي يكرر نفس المهمة باستمرار.

لم أتوقع أنني سأجد وظيفة أتقاضى عليها 1000 دولار شهريا وتكون مهمتي هي تقطيع التصاميم وكتابة عشرات الاسطر من أوامر CSS، هذا العمل بالنسبة لي مرفوض خاصة ان كان نفس العمل أقوم به خلال اليوم، الأسبوع، الشهر، السنة.

وهناك مطور ويب يرسم الفكرة على الورق، يختار باقة من الألوان، ثم يبدأ في العمل، مع الكثير من التفاصيل المضنية والتي تأخذ وقتا كثيرا، كتغيير الخطوط عدة مرات، تغيير درجات الألوان واعادة توزيع المحتويات في الصفحة، البحث عن إيقونات مناسبة، ترك الصفحة والعودة لها في وقت لاحق للاطلاع عليها، هذا العمل مضني لكن هنا المطور يقوم باشياء عديدة، وهذا هو الفرق بين Robot ومطور يحب ما يفعل.

لكن إن وصلت الى مرحلة أن يصبح المال أولية في حياتك (كما حدث معي) لظروف أو لإعالة شخص ما، عندها فقط، اضغط على مشاعرك والتحق لتعمل مثل Robot.

بالإضافة الى عملي ب CSS فأنا أعمل ب PHP, MySQL, Jquery، لكن ما من هذه التقنيات جلبت لي وظيفة، لأن كل الوظائف التي عرضت علي، لأنني (مع قليل من التواضع) أجيد CSS و XHTML.

ذلك جعلني أقتنع، أنه لا يوجد بعد، ذلك القدر من المطورين الملمين ب CSS والذين ينجزون أعمالا نظيفة وأنيقة، فالشكل العام والألوان هي الأخرى تلعب دورا ولا يكفي أن تعرف أوامر CSS جافة.

وجدت وظيفة براتب مغري وبعد سنة سافرت الى دولة أجنبية للعمل براتب أكثر إغراء، ثم رجعت ووجدت عملا مع شركة أجنبية براتب أكثر من ممتاز خصوصا أنني لن اضطر لأبارح مدينتي كي أعمل في هذه الوظيفة.

في كل هذه الوظائف، كانت الشركات هي من اتصلت بي وراسلتني ليس لانني مبرمج PHP, MYSQL منذ 4 سنوات، وإنما لأنني أعمل ب CSS و XHTML.

هذا جانب بسيط من المكاسب التي ستحصل عليها في حال كنت تعمل ب CSS وتجيد ما تفعل، فالجميع سيرغب بالتعاون معك، عكس ان كنت مبرمج PHP لانه يوجد المئات والالاف ممن يبرمجون بأكثر من لغة.

قبل أن أتعرف على CSS كنت أستخدم Front page لتصميم صفحات HTML عادية، لم أكن أطلع على الأكواد التي يولدها البرنامج التعيس، ولم أكن أعرف شيئا عن وسوم HTML أيضا.

عندما بدأت أتعلم CSS أعتقدت لوهلة أنها طريقة لجعل العمل أكثر صعوبة، بل لم أكن أصدق أنه يمكنني تصميم صفحات كاملة من الألف إلى الياء اعتمادا على محرر بسيط، لأنني تساءلت كيف سأعرف القياسات والأحجام، وكيف سأوزع المحتويات في الصفحة وأنا أكتب أكوادا مبهمة ؟

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

الان أستطيع أن أقول لكل مطور ويب مبتدئ يرغب بالعمل ب CSS و XHTML بأن لا تتردد في المحاولة والتجربة، لأنك لن تندم بعدما تصبح قادرا على تصميم عشرات الصفحات بشكل أنيق ونظيف وخالي من الأخطاء، وفي دقائق معدودة، لأنك ستكتشف كما اكتشفت أنا، أن استعمال CSS سيشعرك بمتعة خاصة، بالإضافة الى جودة وسمعة عملك ناهيك عن أنك ستكسب المزيد من الوقت لانجاز عمل كثير.

لنتصور أنه لدي Class التالية:

<div id="wrap">
<div class="inner">
 
	    <span>edit</span></div>
</div>

و:

<div id="footer">
<div class="nav">
 
	    <span>copy</span></div>
</div>

وأريد إعطاء لون مختلف للعبارات الموجودة بين الوسم span، ان كتبت مباشرة:

span {
  color:#f00
}

فجميع العبارات الموجودة بين وسم span في كامل الصفحة ستأخذ اللون الأحمر، كذلك ان حددت فقط وسم span الموجود في الوسم p كالتالي:

p span {
  color:#f00
}

قد تكون هناك عبارات أخرى بين span ثم بين p هي الأخرى ستأخذ اللون الأحمر، إذن ما العمل ؟

هنا يوجد أكثر من حل، إما أن تنشئ كلاس خاص بهذا الجزء فقط مثل:

<div id="footer">
<div class="nav">
 
	    <span class="alert">copy</span></div>
</div>

وشخصيا لا افضل هذه الطريقة كثيرا، خصوصا أنني سأنتج الكثير من Class في صفحة HTML، الطريقة الأخرى وهي صلب الموضوع، تكون بالحاق أي وسم Tag ب Class الذي ينتمي إليه:

#wrap .inner p span {
   color:#f00
}

في حال كان لدينا وسم span داخل وسم p مثلا ونريد تغيير خصائص كل الوسوم span أينما وجدت في الصفحة، وتكون فقط ضمن وسم p فهذه الحالة يمكننا استعمال:

p > span {
   color:#f00
}

أو حتى:

p  span {
   color:#f00
}