أوراق الأنماط المتتالية (CSS) هي أساس التصميم لمعظم مواقع الويب. يصف كيفية عرض العناصر على الشاشة. هذا هو المكان الذي يتدخل فيه CSS @importat-rule للمساعدة. و @importحكم يحكي محرك CSS لاستيراد ورقة أنماط خارجية في ورقة نمط آخر. يسمح ذلك بإضافة قواعد نمط من ورقة أنماط إلى ورقة أنماط أخرى. يمكن أيضًا استخدام هذه القاعدة مع استعلامات الوسائط لاستيراد ورقة أنماط بناءً على نوع الجهاز. تعتبر @importقاعدة النمط مفيدة لأنه يمكن استخدامها لتجنب قواعد النمط المكررة وحتى استيراد أنماط معينة بناءً على جهاز الوصول. و @importيجب أن يكون الحكم في أعلى ورقة الأنماط.
@import "style.css"; /* using a string */
@import url("rebrand.css"); /* using a URL */
@import "print.css" print; /* using a media query */لا تكمن المشكلة في تعقيد اللغة أو صعوبة الترميز. تكمن المشكلة في الحجم الهائل للمعلومات اللازمة لإنشاء موقع ويب متوسط الحجم. إذا كنت تفكر في مقدار HTML المطلوب لإنشاء ميزات تصميم بسيطة ثم استقراء ذلك في العديد من الصفحات ذات التصميمات والمعلومات في كل صفحة ، فقد تكون المهمة شاقة.
قد يكون من الصعب أيضًا البقاء على اطلاع بهذه الكمية الكبيرة من المعلومات. إذا كنت ترغب في نسخ قواعد معينة ولصقها ، فعليك العودة للعثور عليها. حتى إذا قمت بعمل رائع في تنظيم CSS الخاص بك ، فإن الحجم الهائل لموقع الويب وكمية المعلومات يمكن أن يكونا مربكين تمامًا. تعتبر @importالقاعدة طريقة رائعة لتنظيم قدر كبير من قواعد الأسلوب.
@importأفضل شيء في CSS @importهو أنه يوفر لك الوقت والإحباط. إذا كنت لا تستخدم ، @importفأنت ، على الأقل ، ستعود إلى CSS القديم لنسخ ولصق المعلومات التي تحتاجها أو إدارة جميع قواعد النمط في ورقة أنماط واحدة. قد يكون هذا مضيعة للوقت ، ومحبطًا ، وحتى صعبًا حيث ينمو موقع الويب الخاص بك بشكل أكبر وأكبر ويصبح العثور على الشفرة أكثر صعوبة. والأسوأ من ذلك هو وجود أنماط مكررة تؤدي إلى ورقة أنماط أكبر يمكن أن تقلل من أداء موقع الويب.
@importيوفر CSS الكثير من الوقت ، ولكنه يوفر أيضًا دقة كبيرة. بدلاً من احتمال كتابة قواعد نمط رديئة أو نسخ المعلومات الخاطئة ولصقها ، كل ما عليك فعله هو استيراد القواعد الموجودة. هذا بسيط ودقيق للغاية ، خاصة بالمقارنة مع البدائل. يمكن استخدامه أيضًا لفصل قواعد النمط إلى أوراق أنماط منفصلة ، على سبيل المثال:
@import "buttons.css";
@import "links.css";
@import "forms.css";علاوة على تلك الإيجابيات ، إليك قائمة أكثر تفصيلاً لماذا @importتعتبر CSS أداة رائعة لتطوير الويب:
- إنه يوفر الوقت حتى مقارنة بنهج النسخ واللصق أو طريقة إضافة الروابط.
- من الصعب ارتكاب خطأ بهذه
@importالطريقة. - يوفر مساعدة تنظيمية عند إنشاء موقع ويب متوسط إلى كبير. هناك الكثير من المعلومات والترميز المتضمنة أن أي مساعدة مهمة.
- يمكنك إنشاء العديد من ملفات CSS التي تريد استيرادها. يمكنك إنشاء ملف أساسي ثم الحصول على ملفات إضافية مثل الطباعة أو الصور.
- إنها أداة بناء ويب مجانية وموفرة للوقت وبسيطة وفعالة.
@importالسلبي الحقيقي الوحيد المرتبط بـ CSS @importهو أنه يمكنه إضافة وقت تحميل الصفحة إلى موقع الويب الخاص بك إذا لم يتم استخدامه أثناء عملية الإنشاء. عندما يتم تحميل صفحة @importبالأمر ، يجب أن تذهب للقراءة وتستورد ورقة الأنماط المحددة في القاعدة ثم تطبقها على الصفحة الحالية. هذا لا يستغرق الكثير من الوقت ، وحتى أكبر مواقع الويب التي تستخدم @importالأمر لن تواجه فرقًا ملحوظًا في وقت التحميل. ومع ذلك ، بالنسبة إلى الروبوتات التي تستخدم وقت التحميل لحساب تصنيف البحث الخاص بك ، فقد يؤدي ذلك إلى تحريكك لأعلى أو لأسفل في قائمة محرك البحث المرغوبة.
@importهناك بعض البدائل لـ CSS @import. تم ذكر بعضها سابقًا ، ولكن سيتم طرحها هنا بمزيد من التفاصيل. في حين أن هناك بدائل ، فإن CSS @importهي الطريقة الأسرع والأكثر دقة لجلب الأنماط الموجودة بالفعل من ورقة أنماط واحدة إلى أخرى. البدائل هي كما يلي:
- الروابط:
<link>يتيح استخدام علامة لربط ملفات CSS الخاصة بك داخل رأس HTML تنزيل ملفات CSS بدلاً من استدعائها. هذا يعني أن المتصفح ليس مضطرًا للانتقال إلى ورقة أنماط أخرى لاستيرادها ، بل يمكن تنزيلها على الفور. يعتبر الارتباط ميزة لأنه لا يزيد من أوقات التحميل ، ولكن هناك بعض السلبيات أيضًا. الأكبر هو أنه إذا كنت تريد الارتباط بملف CSS الخاص بك ، فعليك معرفة مكانه. إذا لم تقم بذلك ، وكان موقع الويب الخاص بك كبيرًا ومعقدًا ، فقد يستغرق الأمر بعض الوقت للعثور على هذا الرابط. - إعادة كتابة نفس قواعد النمط: هذا أحد طرق الدمج ولكنه ليس بديلاً صالحًا حقًا. إن إعادة كتابة نفس الشيء مرارًا وتكرارًا على صفحات مختلفة سيكون أمرًا أكثر من اللازم وغير فعال في أحسن الأحوال. في حين أنه يمكن القيام به ، ويمكن القيام به بشكل فعال ، إلا أن خطر الخطأ والوقت الهائل اللازم يجعل هذا الأمر غير ذي صلة.
- النسخ واللصق: الطريقة الأخرى لدمج البيانات هي ببساطة النسخ واللصق. إذا كنت قد أنشأت موقعًا على الويب من قبل ، فأنت تعلم أن هناك قدرًا كبيرًا من النسخ والكثير من اللصق. ومع ذلك ، عندما تكون أوراق الأنماط ، والأشياء الطويلة في ذلك ، هي الأشياء التي يتم نسخها ولصقها ، فقد يصبح الأمر صعبًا. لسبب واحد ، إذا فاتتك حرفًا واحدًا أو أضفت المزيد من المسافات ، فيمكنك بسهولة العبث بالرمز الموجود. عليك أيضًا أن تعرف إلى أين تذهب على CSS قديم للعثور على المعلومات التي تريد نسخها.
@importتستحق الاستخدام؟الإجابة القصيرة هي نعم. الإيجابيات تفوق ببساطة السلبيات وبهامش كبير إلى حد ما. إذا كنت شركة لديها الموارد اللازمة لتوظيف شخص ما للعمل بدوام كامل على الترميز وبناء وصيانة موقع الويب الخاص بك ، فقد تكون على ما يرام بدون @importالأمر. من ناحية أخرى ، إذا كنت مصمم ويب أو مالكًا لشركة صغيرة تقوم ببناء موقع الويب الخاص بك ، فلا يمكن تجاهل المزايا.
@importيمكن أن تضيف CSS وقت التحميل إلى موقع الويب الخاص بك. ومع ذلك ، فإن الحيلة هي أنها لن تضيف وقت تحميل إلى صفحتك الرئيسية. هذا أمر أساسي لأن أي شخص يزور صفحتك الرئيسية ، في الغالب ، موجود هناك لسبب ما. إذا قاموا بزيارة صفحات لاحقة ، فذلك لأنهم مهتمون ومعلقون بفكرتك أو منتجك. من المحتمل أن يكون هذا النوع من الزوار لموقعك على استعداد للبقاء في الوقت الإضافي 074 ثانية (هذا رقم مختلق لكنك تحصل على النقطة) التي يستغرقها تحميل صفحتك بسبب CSS @import. يمكن إزالة هذا الوقت الإضافي تمامًا إذا @importتم استخدامه أثناء عملية الإنشاء.