التجريد بعيدًا عن CSS

Question

اسمحوا لي أن أوضح شيئا تماما.

أنا. يكره.CSS.

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

..لقص القصة الطويلة، إنه ألم.بيتا، إذا صح التعبير.

تسعى العديد من أطر العمل إلى الابتعاد عن HTML (العلامات المخصصة ونظام مكونات JSF) في محاولة لتسهيل التعامل مع غلاية الأسماك هذه.

هل هناك أي شيء استخدمته أيها الأشخاص وله مفهوم مماثل مطبق على CSS؟شيء يقدم لك مجموعة من السحر عبر المتصفحات، ويدعم مثل المتغيرات (لماذا يجب علي كتابة #3c5c8d في كل مرة أريد هذا اللون)، ويدعم الحقول المحسوبة (التي يتم "تجميعها" في CSS وJS)، وما إلى ذلك.

وبدلاً من ذلك، هل أفكر في هذا بشكل صحيح؟هل أحاول دفع كتلة مربعة جدًا عبر فتحة مستديرة جدًا؟

Answer 1

يمكنك دائمًا استخدام محرك القالب لإضافة المتغيرات والحقول المجمعة إلى ملفات CSS الخاصة بك.

Answer 2

ما وجدته يعمل بشكل أفضل هو تعلم CSS حقًا.أعني حقًا تعلم CSS.

يمكن أن تكون لغة مربكة للتعلم، ولكن إذا قرأت ما يكفي عنها وتدربت عليها، فسوف تتعلم في النهاية أفضل طريقة للقيام بالأشياء.

المفتاح هو أن تفعل ذلك بما يكفي بحيث يصبح طبيعيًا.يمكن أن تكون لغة CSS أنيقة جدًا إذا كنت تعرف ما تريد القيام به قبل البدء وكان لديك الخبرة الكافية للقيام بذلك.

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

كل ما يتطلبه الأمر هو الممارسة، وفي الوقت المناسب يمكنك أن تصبح جيدًا في ذلك.

Answer 3

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

أنا بالتأكيد معك، رغم ذلك.على الرغم من أنني أعتبر نفسي خبيرًا صغيرًا في CSS، إلا أنني أعتقد أنه سيكون من الجيد لو كانت هناك أدوات لـ CSS مثل تلك الموجودة في Javascript (النموذج الأولي، JQuery، وما إلى ذلك).أنت تخبر الأداة بما تريد، وهي تتعامل مع تناقضات المتصفح خلف الكواليس.أعتقد أن ذلك سيكون مثاليًا.

Answer 4

وهذا يوضح إجابتي السابقة.

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

على سبيل المثال، بدلاً من هذا:

a { color: red }
.entry { color: red }
h1 { color: red }

يمكنك ان تفعل:

a, .entry, h1 { color: red }

يمكنك الاحتفاظ باللون المعلن في مكان واحد من خلال القيام بذلك.

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

Answer 5

آسف لقول ذلك يا رفاق، ولكنكم جميعًا فاتتكم هذه النقطة.

الكلمة التجريد هو المفتاح.لنفترض أنك وسالي تقومان بإنشاء موقع ويب.أنت تقوم بتصميم الأشكال بينما تقوم هي بجعل الزوايا مستديرة.لقد قمت أنت وهي بتحديد عدد قليل من المحددات.

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

هذه هي أكبر مشكلة في الويب:فهو يفتقر تمامًا إلى آليات التجريد!سوف يصيح معظمكم: "هذا غير ضروري؛توقف عن تدخين الكراك!"

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

نهاية الثرثرة.

Answer 6

ثم تأتي مشكلة المتصفحات المتعددة

هنالك هذا الذي يساعد على إزالة بعض التناقضات من IE.يمكنك أيضًا استخدام jQuery لإضافة بعض المحددات عبر جافا سكريبت.

أنا أتفق مع دان, ، تعلمها ولا تمثل مشكلة كبيرة، بل إنها ممتعة.

Answer 7

انظر، هذه هي مشكلة SO-- كل إجابة حتى الآن قدمت نقطة صحيحة ويجب اعتبارها الإجابة النهائية.اسمحوا لي أن أحاول تلخيص ما يلي:

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

أعتقد أن الجمع بين كل هذه العناصر يحل بالتأكيد عددًا كبيرًا من المشكلات (على الرغم من أن التعلم العميق لـ CSS ليس خيارًا للجميع، لكي نكون منصفين)؛بعض الناس لا يستخدمونه بما يكفي لتبرير الوقت).

هناك بعض المشكلات التي لم تتناولها أي من النقاط المذكورة أعلاه (أعتقد أن أنواعًا معينة من الحقول المحسوبة تتطلب كتابة مكتبة JS لها) ولكنها بالتأكيد بداية جيدة.

Answer 8

للحصول على دعم متغير، استخدمت PHP مع رؤوس CSS لتحقيق تأثير كبير في ذلك.أعتقد أنه يمكنك القيام بذلك بأي لغة.إليك عينة PHP:

<?
header('content-type:text/css');
header("Expires: ".gmdate("D, d M Y H:i:s", (time()+900)) . " GMT"); 

$someColorVar = "#cc0000";
?>
BODY {
      background-color: <?= someColorVar ?>;
     }

Answer 9

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

أحصل على هذا فقط عند محاولة تشغيل الأشياء في IE.

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

اترك الألم والمعاناة المتوافقة مع IE حتى النهاية بعد أن تعمل في FF/Safari، لذلك سينسب عقلك اللوم إلى IE، حيث ينتمي جيدًا، بدلاً من CSS بشكل عام.

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

تحقق أيضا مخطط CSS, ، إطار تخطيط في CSS.إنه لا يحل جميع مشاكلك، بل الكثير منها، ولا يتعين عليك كتابة CSS بنفسك.

Answer 14

أعتقد أن الأخطاء الشائعة التي يرتكبها المبتدئون في CSS تتعلق بالخصوصية.إذا كنت تصفيف أ هل أنت متأكد من أنك تريد حقًا تصميم كل عنصر في المستند أو "فئة" معينة من أ العلامات؟

عادةً ما أبدأ في أن أكون محددًا للغاية مع محددات CSS الخاصة بي وأقوم بتعميمها عندما أرى ذلك مناسبًا.

فيما يلي مقال فكاهي حول هذا الموضوع، ولكنه إعلامي أيضًا:حروب الخصوصية

Answer 15

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

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

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

Answer 16

@SCdF:أعتقد أن تلخيصك هنا عادل.لكن الحجة القائلة بأن بعض الأشخاص ليس لديهم الوقت لتعلم CSS هي حجة زائفة - فقط فكر فيها للحظة.استبدل تقنية أتقنتها وستعرف السبب:

أنا.يكره.جافا.هل هناك شيء هناك سيكتبه لي؟ليس كل شخص لديه الوقت لإتقان جافا.

من المؤكد أن CSS هي تقنية غير مثالية - ولدي آمال كبيرة أنه بعد 5 سنوات من الآن لن نتعامل مع عدم توافق المتصفحات بعد الآن (نحن على وشك الوصول إلى ذلك)، وأننا سنحصل على أدوات أفضل من جانب المؤلف (لقد كتبت ماكرو Visual Studio لاستخدامي الخاص والذي يوفر نوع المتغيرات والحسابات التي تصفها، لذلك ليس مستحيلًا) - ولكن الإصرار على أنه يجب أن تكون قادرًا على استخدام هذه التكنولوجيا بفعالية دون فهمها حقًا ليس أمرًا معقولًا .

Answer 17

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

للتوضيح:هذا لا يتعلق بفهم CSS.إذا كنت تعرف اللغة جيدًا، فلا يزال يتعين عليك التعامل مع التكرار والازدواجية ونقص هياكل التحكم في اللغة.

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

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

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

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

Answer 18

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

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

• الشلال والميراث
• نموذج الصندوق
• طرق التخطيط بما في ذلك العوامات وflexbox الجديد
• التمركز
• أفضل الممارسات الحالية مثل SMACSS أو BEM للحفاظ على أنماطك معيارية وسهلة الصيانة

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