النص الأصلي | عبر: 9 نصائح لملفات CSS أصغر حجمًا ومُحسّنة
المؤلف|المؤلف: ستيفان فيرفورت
ترجمة|عبر: لوك
وبما أن ملفات CSS يتم تحميلها في أعلى صفحة الويب، يقوم كل زائر بتنزيل هذه الملفات. سنقوم بتحسين ملفات وصور PHP، ولكن غالبًا ما نتجاهل ملفات CSS. اليوم يجب أن نفكر في هذه المشكلة ونفعل شيئًا حيال ذلك.
من الممكن تحسين CSS باستخدام أدوات تحسين CSS، لكنني أعتقد أنه سيتم تحسين الكفاءة والقوة إذا كتبت التعليمات البرمجية الخاصة بك باستخدام التقنيات المذكورة أدناه.
يمكن أن يؤدي تحسين ملفات CSS أيضًا إلى توفير حركة المرور وزيادة سرعة تحميل الصفحة.
1. التعليقات التعليقات مفيدة بشكل خاص عند كتابة CSS حتى يتمكن الزملاء الذين يعملون معًا من فهم معنى الكود. هناك طرق عديدة للتعليق، يمكنك استخدام الطرق التالية:
/*-------------------*/
/*-----تعليق-------*/
/*-------------------*/
يمكنك أيضًا استخدام الطريقة التالية:
/*تعليق*/
يؤدي هذا إلى حفظ 20 حرفًا، وبافتراض وجود 15 تعليقًا، فإنه يوفر 300 حرفًا.
2. رموز الألوان المختصرة يتم تعريف رموز الألوان برموز HEX، والتي تحتوي على 6 أحرف، ولكن في بعض الحالات يمكن استخدام 3 أحرف بدلاً من ذلك. انظر إلى المثال التالي:
div{ اللون: #ffffff } /* الرمز القصير: اللون:#fff */
div{ اللون: #ff88ff } /* الرمز القصير: اللون:#f8f;
div{ color: #f8f7f2 } /* لا يوجد رمز قصير ممكن */
3. دمج العناصر، على سبيل المثال، إذا كان هناك مجموعة من العناصر مثل h2 وh3 وh4، وجميعها لها نفس السمات وتختلف بعض السمات فقط، فيمكنك كتابتها على النحو التالي:
h2، h3، h4. {
الحشو: 0؛
الهامش:0;
اللون: #333؛
تباعد الحروف:.05em؛
تباعد الكلمات: 0.1em؛
}
h2{ حجم الخط: 1.2em }
h3{ حجم الخط: 1.1em }
h4{ حجم الخط: 1em }
يؤدي هذا إلى دمج العناصر التي لها نفس السمات مع الإعلان عن سمات مختلفة لحجم الخط. يمكن أن يوفر الكثير من المساحة.
4. عندما تكون القيمة 0، يتم حذف Out Px/Em/%.
0 لا يتطلب علامة Px وEm والنسبة المئوية. عندما تكون القيمة 0 (والتي أفترض أنك ستستخدمها)، فإن حذف الوحدة يؤدي إلى حفظ ضعف عدد الأحرف.
شعبة { الحشو: 0px 5px 5px 10px }
/* الاختصار: الحشو: 0 5px 5px 10px */
5. دمج السمات يمكن كتابة بعض السمات مثل الحشو والهامش والحدود بشكل منفصل. على سبيل المثال: الحشو العلوي، والحشو لليمين، والحشو للأسفل، والحشو لليسار.
إذا أمكن، قم بدمجها لتسهيل الكتابة وتوفير المساحة.
شعبة {
الحشو الأيسر: 0؛
الحشو العلوي: 50 بكسل؛
الحشو السفلي: 23 بكسل؛
الحشو لليمين:4px }
/* الاختصار: الحشو:50px 4px 23px 0 */
إذا كانت القيم العلوية والسفلية متماثلة والقيم اليسرى واليمنى متماثلة، فيمكنك كتابة:
div{
الحشو العلوي: 5 بكسل؛
الحشو السفلي: 5px؛
الحشو الأيسر: 0؛
الحشو لليمين:0px }
/* الاختصار: الحشو:5px 0;
6. اختر الفئات/المعرف بحكمة
يجب أن تكون أسماء الفئات والمعرفات المحددة قصيرة وسهلة الفهم وذات معنى قدر الإمكان.
تجنب اختيار أسماء مثل "HeaderMiddleLeftCategories"، واستخدم "h-cats" بدلاً من ذلك. وهذا يوفر الكثير من الشخصيات.
7. قم بتنظيف ملفات CSS لتوفير المساحة عند إنشاء موقع ويب باستخدام CSS، قد تعمل أو لا تعمل التعليمات البرمجية المكتوبة، وتستهلك مساحة كبيرة. يجب فحص ملفات CSS طوال الوقت بحثًا عن الأخطاء والتعليمات البرمجية غير الصالحة لتوفير المساحة.
8. قم بإزالة الفاصلة المنقوطة من السمة الأخيرة في المحدد. هذه خدعة اكتشفتها باستخدام ضاغط CSS، راجع هذا المثال:
جسم{
الخلفية:#ccc؛
اللون: #333 }
/* الرمز القصير: اللون:#333 */ انظر، لقد قمت بإزالة الفاصلة المنقوطة الأخيرة. قد لا يكون التأثير واضحًا، لكن القليل يضيف 50 محددًا إلى 50 حرفًا.
9. حذف المسافات غير المفيدة وأحرف الإرجاع قد ترغب في حذف كافة المسافات وأحرف الإرجاع لأنها تشغل حرفًا واحدًا. لكن المشكلة في ذلك هي أنه يدمر بنية CSS ويقلل من سهولة القراءة.
لا أفعل ذلك عادةً عند تحسين ملفات CSS لأن البنية أكثر أهمية بالنسبة لي. إليك حل وسط، استخدم الملفات الموجودة على موقع الويب والتي لا تحتوي على أحرف إرجاع ومسافات. إن حفظ الملفات التي تحتوي على أحرف إرجاع ومسافات محليًا يجعل عملية التحرير مريحة للغاية.
الاستنتاج إذا كنت ترغب في تحسين ملفات CSS بشكل كامل، فإنني أوصي باستخدام ضاغط CSS، حتى تتمكن من تعلم المهارات المذكورة أعلاه بنفسك وتحسين سرعة الكتابة وجودة كود CSS.
إذا كان لديك نصائح أخرى، يرجى ترك رسالة.