يتطلب تعلم كتابة CSS النظيفة والمحسّنة الكثير من التدريب ورغبة قهرية غير واعية في التنظيف. إن الحفاظ على CSS الخاص بك مرتبًا لا يتعلق فقط بحاجتك النفسية المجنونة إلى أن تكون نظيفًا، ومع ذلك، خاصة بالنسبة للمواقع الكبيرة، فإنه سيجعل الصفحات يتم تحميلها بشكل أسرع. أوقات التحميل الأسرع تعادل تحسين سهولة الاستخدام وزيادة رضا المستخدم.
كثير من الناس لديهم صنم الكود. هذا ليس أمرا سيئا.
ستجمع هذه المقالة التقنيات التي يمكنك استخدامها لتحسين CSS الخاص بك، بالإضافة إلى بعض أدوات الضغط عبر الإنترنت وسطح المكتب التي يمكنها ضغط التعليمات البرمجية الخاصة بك تلقائيًا.
للضغط أو عدم الضغط
قبل أن نناقش كيفية ضغط CSS، من المهم ملاحظة أنه غالبًا ما يكون هناك توازن بين الضغط وسهولة قراءة التعليمات البرمجية. يفخر العديد من المبرمجين بالتنظيم النظيف لـ CSS الخاص بهم ولا يريدون تشغيل التعليمات البرمجية الخاصة بهم من خلال ضاغط لإزالة التعليقات وفواصل الأسطر. كمصمم، يجب عليك تحليل أهداف الكود الذي تكتبه. إذا كنت تقوم بإنشاء موقع ويب صغير لا يتطلب سوى بضعة أسطر من CSS، فقد لا تكون هناك حاجة إلى إجراء ضغط إضافي. وبالمثل، إذا كنت تكتب تعليمات برمجية تحتاج إلى مشاركتها مع فريق مفتوح، فإن إدراج تعليقات إضافية وفواصل أسطر يمكن أن يوفر على زملائك الكثير من الوقت ويكسبهم خالص شكرهم. ومع ذلك، إذا كنت تصمم موقعًا إلكترونيًا كبيرًا يتطلب الكثير من CSS، فستحتاج بالتأكيد إلى الانتباه إلى حجم ملفك وإبقائه صغيرًا قدر الإمكان.
قد يستغرق الأمر بعض الوقت للعثور على المزيج المثالي بين الضغط والإمكانية، لكن كلاهما يستحق الاستكشاف وتحقيق التوازن بينهما يمكن أن يجعل عملك أسهل كثيرًا. وفي الوقت نفسه، من الواضح أن الضغط لا يؤدي بالضرورة إلى انخفاض في سهولة القراءة. هناك العديد من التقنيات المتاحة لضغط التعليمات البرمجية التي تؤدي إلى تعليمات برمجية أفضل وأكثر تنظيمًا.
مع أخذ ذلك في الاعتبار، فلنبدأ بالنظر إلى بعض التقنيات للحفاظ على الحد الأدنى من ملفات CSS.
تعريف النمط الفارغ
لنبدأ بما هو واضح. إذا كان لديك نمط فارغ، تجاهله. لا تختلق أعذارًا بأنك قد تحتاجها لاحقًا وأنت تعلم أنها فوضوية. لا تقم بإضافتها إلا إذا كان لديك سبب وجيه.
اختصار
يعد اختصار CSS طريقة لدمج أسطر متعددة من CSS في سطر واحد. إن التعود على استخدام جميع حيل الاختصارات التي تعرفها يمكن أن يقلل بشكل كبير من عدد أسطر التعليمات البرمجية التي تنتهي بكتابتها. هنا مثال:
النسخة الطويلة:
#container{padding-top:5pxpadding-right:10pxpadding-bottom:30pxpadding-left:18px}النسخة المختصرة:
#حاوية{الحشو: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{font-family:Palatino,Georgia,Times,serif;}بعد:
#container{font-family:Palatino,serif;}فيما يتعلق بالخطوط، أوصي بشدة بقراءة "ثلاثة محادثات حول خطوط الويب الافتراضية" التي كتبها يو بو، كما أن العديد من المقالات المذكورة في المقالة تستحق القراءة والتفكير فيها.
استخدم اللون الست عشري
من أجل تقليل عدد البايتات، يتم تحويل جميع قيم ألوان RGB إلى القيم السداسية العشرية المقابلة لها. قد لا يعني هذا الكثير في البداية، ولكن أي بايت يستحق ذلك!
قبل:
#حاوية{لون:RGB(131, 100, 219);}بعد:
#حاوية{لون:#8364DB;}إزالة فواصل الأسطر
قم بمراجعة كل سمة نمط وقم بإزالة أي عوائد ثابتة غير مطلوبة. يمكنك أيضًا إزالة الفاصلة المنقوطة الأخيرة.
قبل:
#حاوية{الهامش:5px;الحشو:5px 10px 30px 18px;}بعد:
#حاوية{الهامش:5px;الحشو:5px 10px 30px 18px}10 أدوات ضغط CSS عبر الإنترنت
يمكن لمصغرات CSS أتمتة الكثير من أعمال تنظيف التعليمات البرمجية الخاصة بك. سيخبرك الكثير منها عن النسبة المئوية لملفاتك المضغوطة، لذا جرب القليل منها لمعرفة أي منها هو الأفضل.
محرك CSS
خيارات:
وضع الضغط: ضغط منخفض، عادي، عالي
ضغط التعليق: لا يوجد ضغط، كل شيء، أو أطول من قيمة معينة.
ضاغط CSS
الخيارات الاختيارية (يمكنك اختيار نعم أو لا لكل منها):
إعادة ترتيب السمات
ضغط اللون
ضغط وزن الخط
محدد الحروف الصغيرة
قم بإزالة المساحة غير الضرورية
قم بإزالة الفواصل المنقوطة غير الضرورية
أرانتيوس
الخيارات الاختيارية (يمكنك اختيار نعم أو لا لكل منها):
إزالة التعليقات
قم بإزالة التعليقات التي يبلغ طولها x بايت على الأقل
قاعدة واحدة في كل سطر