معلومة على السريع
بسم الله نبدأ سلسلة ملاحظات عن الـCSS تحت هاشتاج CSS Notes، بحيث تقدر ترجعلها في أي وقت زي ما تحب
وكلامنا النهاردة هيكون عن قاعدة @import، وخليني أخترعلك مشكلة الأول وبعدين نبدأ نفكرلها في حلول
تعالى نتخيل دلوقتي إنك شغال على موقع كبير، الموقع ده فيه صفحات كتير وبالتأكيد ليه Styles كتيرة جدًا، ممكن ملف الـCSS الواحد يشيل Styles الموقع كله، ولكن هينتج عن ده حجم كبير للملف وبطئ في التحميل، مع إنك مش بتحتاج كل الـStyles الموجودة فيه، انت بس محتاج الـStyles بتاعة صفحة معينة والسلام
هنا الحل المنطقي والأكثر عملية، إنك تقسم فايل الـCSS الكبير لفايلات أصغر، كل فايل بيعمل مهمة معينة، ولكن لحظة، وانت بتقسم الـCSS File لقيت Global Styling، يعني مثلًا انت بتدي الـBody ستايل واحد في كل الصفحات، فـ هل من المنطقي انك تكتب نفس الـStyle ده في كل الصفحات؟
بالبديهة مش منطقي، لأنك ببساطة لو حبيت تعدل عليه بعدين هتضطر تمشي على صفحة صفحة تعدل عليه وده مش حل عملي إطلاقًا، وهنا الحل ببساطة إنك تعمل فايل شايل كل الـGlobal Styling اللي في الموقع، وفايل تاني حاطط فيه الـVariables مثلًا وهكذا
وييجي السؤال هنا، هتضيف الفايلات دي ازاي لصفحتك؟ ببساطة ممكن تحطها في Link Tag في صفحة الـHTML عادي جدًا، ولكن تقدر برضه من خلال الـCSS بس تضيفها للموقع، وده من خلال الـRule اللي معانا النهاردة وهي الـImport Rule
ودي بتقبل مدخلين، الأول وده اجباري، وببساطة هو مكان الملف اللي عاوز تعمله Import، هاشتاج بديهيات 😂، والتاني وده اختياري، وببساطة ده الـMedia Rule اللي حابب تطبق فيها الـCSS Styles ده، زي ما هو واضح في الصورة.
وده لأن الـImport Rule ماينفعش تبقى Nested (بداخل) أي Rule تانية، فـ ببساطة تقدر في المُدخل التاني تضيف الـMedia Rule وعيش يا معلم.
أخيرًا برضه خليني أقولك إن من أكتر استخدامات الـImport هي انك تجيب Fonts وتركبها على موقعك، وهتلاقي في أول كومنت لينك لويبسايت Google Fonts ممكن تجرب بنفسك
المعلومة دي أغلب الناس عارفها، ولكن فكرة الـMedia Rule هنا اعتقد مش الكل يعرفها 😄.
وبس كدة، ده الموضوع ببساطة.
الجينيص
الجنيص