ما هو CSS Optimization ؟

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

مثال سريع على الـ CSS Optimization

لنفرض أن لديك ملف Style.css أو أياً كان إسمه و يحتوي على الأكواد التالية:

.header {

background-color:#65CB40;

padding:5px 3px 5px 3px;

color:#D1303C;

}

.body {

background-color:#FFFFFF;

color:#000000;

}

لنلاحظ بعض الأخطاء في التكويد و التي يجب الإنتباه لها قبل حتى التفكير في عمل CSS Optimization. اولاً لماذا نكتب كود اللون الأسود أو الأبيض كاملاً مع اننا يمكنا كتابة أول ثلاث حروف فقط كالتالي #FFF أو #000
و هذا بالضبط ما يتم عمله في الـ CSS Optimization. طبعاً ليس هذا فقط فهذه مبادئ و يتم عملها للكسالى أو المبتدئين فقط الذين لا يعلمون بعض خصائص CSS الرهيبة. وعند الإستكمال مع الألوان لنأخذ مثال درجة من درجات اللون الوردي الغامق أو أياً كان اسمه و لنوضح هو اللون الـPINK و كوده في CSS هو #FF33CC ، هل لاحظت تكرار ثلاثة حروف مرتين ؟ إذا لماذا التكرار تستطيع كتابته #F3C و على CSS عمل الباقي.
ثانياً نلاحظ في الكود السابق ذكره القيمة padding:5px 3px 5px 3px و للعلم القيم كالتالي من اليمين إلى اليسار ( أعلى Top | يمين Right | أسفل Bottom | يسار Left )
وهي في حد ذاتها إختذالاً للكود

Padding-top:5px;
padding-right:3px;
padding-bottom:5px;
padding-left:3px;

لتصبح كما ذكرنا سابقاً و لكننا يمكننا إختذالها بشكل أكبر لتصبح

Padding:5px 3px;

ثالثاً ستلاحظون المسافات المتباعدة بين السطور و هذا خطأ شديد فالسطر الواحد يساوي تقريباً 1 بايت Byet و نحن في أمس الحاجة لتوفير كل بايت ممكن دون المساس بجودة أعمالنا. لذلك لنلغي السطور و لو أمكن كتابتها كلها في سطر واحد و بعد عمل Optimization سيصبح الملف بهذا الشكل

#header{background-color:#65CB40;padding:5px 3px;color:#D1303C}#body{background-color:#FFF;color:#000}

بإختصار شديد القاعدة تقول حروف أقل >> مساحة أصغر >> تحميل أسرع للملف و يجب عليك أن تتبعها ليصبح عملك أكثر إحترافية فكما يُقال نحن اليوم في عصر السرعة.
و لن أطيل في شعار CSS Optimization و الذي يشبه شعار مكتبة الجافا Jquery و هو أكتب أقل و أفعل أكثر و للمزيد عن بعض خصائص CSS لكتابة أقل تفضل بزيارة هذه التدوينة بمدونة CSSeven
طبعاً لقصر الملف يسهل عليك كتابته في سطر واحد و لكن ماذا عن التصاميم المعقدة و التي تأخذ منك أكثر من 500 سطر و أكثر. هنا يأتي دور خدمات CSS Optimization
و هناك الكثير من المواقع التي تقدم الخدمة بشكل مجاني مثل

• CSS Optimizer


• Icey’s CSS Compressor


• Flumpcakes CSS Optimiser


• CleanCSS

و لن أشتتكم بين المواقع الكثيرة فهناك من قام بالإختبارات بالنيابة عنا و هو موقع Blogging Pro و تستطيع الإضطلاع على نتائج الإختبارات بشكل كامل بزيارة رابط تدوينتهم عن هذا الموضوع و ذلك عن طريق إستخدام أكثر من ملفات CSS لمواقع مشهورة و تجربتها على المواقع السابق ذكرها و ملاحظة الفرق بينها و كان الأفضل بينها Icey’s CSS Compressor و الذي أستخدمه و قد قام بتقليص حجم الملفات بنجاح بنسبة 53.91% و تستطيع رفع الملفات له أو إضافة الكود بشكل يدوي و لديه كثير من الخيارات مثل تغيير أسماء الألوان الطويلة لأكواد hex و تقصير الأكواد الطويلة لأكواد قصيرة و تحويل صيغ الألوان RGB إلى أكواد hex و إزالة القيم المصفرة الغير مفيدة من margins و padding ، و بعد الإنتهاء تستطيع طلب عرض إحصائيات العملية لتعلم كم وفرت من مساحة الملف دون الإخلال بالتصميم.
في النهاية أقتبس مرة أخرى من مدونة CSSeven

اجعل optimization آخر مرحلة في كتابة ملفات css (لا تنس هذا مطلقا)