تصغير CSS: نصائح وأدوات

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

كثير من الناس لديهم الهستيريا الرمزية. هذا ليس أمرا سيئا.

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

للضغط أو عدم الضغط

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

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

مع أخذ ذلك في الاعتبار، فلنبدأ بالنظر إلى بعض التقنيات للحفاظ على الحد الأدنى من ملفات CSS.

تعريف النمط الفارغ

لنبدأ بما هو واضح. إذا كان لديك نمط فارغ، تجاهله. لا تختلق أعذارًا بأنك قد تحتاجها لاحقًا وأنت تعلم أنها فوضوية. لا تقم بإضافتها إلا إذا كان لديك سبب وجيه.

اختصار

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

النسخة الطويلة:

 #حاوية {
    الحشو العلوي : 5 بكسل
    الحشو على اليمين : 10 بكسل
    الحشو السفلي : 30 بكسل
    المساحة المتروكة لليسار : 18 بكسل
}

النسخة المختصرة:

 #حاوية {
    الحشو : 5px 10px 30px 18px ؛
}

للتعرف على المزيد حول اختصارات CSS، يمكنك زيارة المقالات التالية:

العفاريت CSS

كانت الفكرة الأصلية وراء CSS sprites هي تقليل عدد طلبات HTTP لتسريع أوقات تحميل الصفحة. الطريقة التي يحقق بها Sprite هذا الهدف هي دمج صور متعددة في ملف صورة واحد، وعادة ما يكون صورة بتنسيق الشبكة. يتم عرض كل صورة فردية عن طريق تبديل موضع الخلفية لصورة الكائنات الأكبر حجمًا. بالنسبة لرمز CSS، يمكن أن يؤدي استخدام تقنية sprite إلى تحسين إمكانية إعادة استخدام الكود وصيانته بشكل كبير، مما سيقلل بشكل كبير من حجم كود CSS.

لمعرفة المزيد حول CSS Sprites، راجع البرنامج التعليمي لـ Chris Coyier حول CSS-Tricks:

بالطبع، تحتوي Front-End Observation أيضًا على بعض المقالات والنصائح القيمة حول CSS Sprites .

تقليل التعليقات

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

نوع الخط المعقول (font-Family)

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

قبل:

 #container { عائلة الخط : Palatino ، Georgia ، Times ، serif }

بعد:

 #container { عائلة الخط : Palatino ، serif }

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

استخدم اللون الست عشري

من أجل تقليل عدد البايتات، يتم تحويل جميع قيم ألوان RGB إلى القيم السداسية العشرية المقابلة لها. قد لا يعني هذا الكثير في البداية، ولكن أي بايت يستحق ذلك!

قبل:

 #container { اللون : rgb ( 131 , 100 , 219 ) ;​

بعد:

 #حاوية { اللون : # 8364DB }

إزالة فواصل الأسطر

قم بمراجعة كل سمة نمط وقم بإزالة أي عوائد ثابتة غير مطلوبة. يمكنك أيضًا إزالة الفاصلة المنقوطة الأخيرة.

قبل:

 #حاوية {
    الهامش : 5 بكسل ؛
    الحشو : 5px 10px 30px 18px ؛
}

بعد:

 #container { الهامش : 5 بكسل الحشو : 5 بكسل 10 بكسل 30 بكسل 18 بكسل }