فلسفة المغلق

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

تمت دعوتك اليوم لترجمة مقال لكيث غرانت (نُشر في يونيو) ، يعرض فيه المؤلف وجهة نظره حول CSS ويشرح فعليًا ما يريد التحدث عنه في كتابه. نقرأ ونعلق!



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

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

المغلق مقاومة

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

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

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

النظر في هذا المثال مع تصميم شبكة. إنه يعمل في المتصفحات التي تدعم الشبكة ، وفي المتصفحات التي لا تدعم الشبكة. في المتصفحات التي لا تكون الشبكة مدعومة فيها ، سيظهر التصميم بشكل غير متساوٍ قليلاً (قد تختلف أحجام العناصر بالضبط) ، ولكن ستظل الصفحة محددة تقريبًا كما ينبغي:

.portfolio { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } .portfolio__item { display: inline-block; max-width: 600px; } 

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

تعد ظاهرة سلوك "الأمان" جزءًا لا يتجزأ من العمل مع CSS ، لكنها غريبة على معظم لغات البرمجة التقليدية.

المغلق التعريفي

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

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

عليك أن تنظر في الكثير من المتغيرات. جوهر CSS هو تنظيم العملية بحيث لا داعي للقلق بشأن جميع هذه المتغيرات. تحديد نظام القيود. اللغة نفسها تهتم بالتفاصيل.

مثال بسيط

لنلقِ نظرة على نموذج CSS: font-size: 2em . ماذا يفعل هذا الرمز؟ "يزيد من حجم الخط" ، كما تقول. لكن هذا ليس كل شيء. كما أنه يصحح الواصلة في أسطر النص داخل الحاوية ، حيث إن عدد الكلمات الأقل يصل الآن إلى كل سطر. وفقًا لذلك ، يؤدي هذا غالبًا إلى زيادة عدد أسطر النص ، كما يزيد من ارتفاع الحاوية بحيث تتلاءم مع هذه الأسطر الجديدة. عندما تقوم بتغيير ارتفاع الحاوية ، فإن كل النص الموجود على الصفحة أسفل هذه الحاوية سوف يتحول وفقًا لذلك. أخيرًا ، يحدد الرمز أعلاه أيضًا قيمة em المحلية. يجب إعادة حساب قيم جميع الخصائص الأخرى التي تم استخدامها لتحديد وحدات em .

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

إذا كنت تريد ألا يحدث أي من هذا ، يمكنك القيام بذلك أيضًا. يمكنك الحد بشدة من ارتفاع الحاوية باستخدام max-height overflow: auto خصائص overflow: auto . يمكنك إعادة تعريف الهوامش الداخلية بحيث يتم قياسها بوحدات rem أو px ، أي أنه لا يتم إعادة حسابها بعد حجم الخط. يكشف هذا جانبًا مثيرًا للاهتمام من العمل مع CSS: في بعض الأحيان لا تخبر المستعرض بما يجب عليه فعله ، ولكن في الواقع ، يمنعه من فعل أي شيء.

مزايا الشبكة

ومع ذلك ، هناك ميزات جديدة في CSS أكثر برودة. الأمثلة الأكثر شيوعًا هي Flexbox و Grid. فقط عدد قليل من الإعلانات - ولديك تخطيط شبكي مرن للغاية يعمل فقط. لا داعي للقلق بشأن العديد من الحالات الخاصة. في الواقع ، فأنت تخبر المستعرض: "تكدس هذه الكتل في أعمدة بعرض 400 بكسل لكل منها" ، ويقوم المتصفح بذلك نيابة عنك. كل شيء عن كل شيء يتطلب حوالي ثلاثة أسطر من التعليمات البرمجية.

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

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

CSS حساس للسياق

في عصر React ، اعتمدنا نهجًا عمليًا للغاية: التطوير المعتمد على المكونات. يتوافق مع أفضل ممارسات CSS ، إلى جانب BEM و SMACSS و CSS-in-JS. لا أريد التقليل من أهمية كل هذه الميزات ، لأنها تلعب دورًا رئيسيًا في إنشاء تطبيقات كبيرة الحجم. لكن ، أعتقد أنه من المهم بنفس القدر إدراك أن CSS ليس وحداتًا بنسبة 100٪ ، ويجب ألا يكون كذلك.
هناك سببان لذلك. الأول والأكثر وضوحا - يجب تصميم التطبيق في الأنماط العالمية. دائما تقريبا ، تحتاج إلى ضبط سماعة الرأس وحجم الخط على مستوى الصفحة ، والتي سيتم استخدامها بشكل افتراضي. بعد ذلك ، سيتم توارث هذه القيم بواسطة جميع العناصر المنحدرة التي لن يتم تجاوزها بشكل صريح. تحتاج أيضًا إلى تطبيق بعض جوانب التصميم بشكل منهجي في جميع أنحاء الصفحة: سمة اللون ، دائرة نصف قطرها تقريبًا للكتل ، تظليل البلوك ، وأحجام الهامش الإجمالية. يتم تطبيق المزيد من الأنماط المحلية التي تعمل في أجزاء من الصفحة في سياق هذه الأنماط العامة.

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

 .the-thing { position: absolute; top: 10px; left: 10px; } 

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

علاوة على ذلك ، فإن قدرتك (أو استحالة) فرض العناصر على بعضها البعض تعتمد إلى حد كبير على مكان وجود هذين العنصرين في DOM. يمكن أن يؤثر خلط العناصر في DOM بشكل كبير على تخطيط العناصر وكيفية تداخلها. هذا هو السبب في أن تدفق المستند وسياقات التراكب موضوعات أساسية (وإن كانت معقدة في بعض الأحيان).

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

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

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

ملخص

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