ماذا يفعل مطورو CSS ولماذا تحتاج واحدًا

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

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

ماذا يفعل مطورو CSS؟

هيا لنبدأ مع الأساسيات. لماذا تعتبر CSS مهمة جدًا ، وما الذي يفترض أن يفعله مطورو CSS بالتحديد؟

CSS هي لغة محددة ، وعلى هذا النحو ، لا يمكن أن توجد بمفردها. يتطلب HTML معنى. لذا ، فإن أول شيء يفعله مطورو CSS هو كتابة كود HTML.

كتابة لغة HTML مرتبة أمر مهم دائمًا

تعد كتابة HTML مباشرة ونظيفة ومنظمة بشكل مناسب مسؤولية كبيرة لأن مستند HTML المتواضع هو أول شيء تقدمه إلى المستخدمين النهائيين.

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

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

غالبًا ما يحدد التصميم العام كيفية تنظيم مكونات HTML المختلفة. يعمل مطورو CSS بشكل وثيق مع المصممين ، ولا يستخدم كل مصمم نفس الأداة لتوفير التصميم. إن التعرف على Sketch أو Photoshop أو InVision أو Figma ، والقدرة على "تقسيم" التصميم ، هي مهارات لا غنى عنها لمطوري CSS. يجب على المرء دائمًا أن يضع في اعتباره كيفية هيكلة مكون لجعل من الممكن تطبيق التصميم في نفس الوقت. يجب أن يمنع استخدام اصطلاح تسمية جيد ، مثل BEM أو OOCSS ، كتابة HTML متضخم أو كود CSS غير قابل للاستمرار.

جافا سكريبت في كل مكان

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

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

CSS

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

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

لحسن الحظ ، المجتمع مفيد للغاية ، ويمكن لمواقع مثل Flexbugs أو Gridbugs توفير الكثير من الوقت.

أدوات وتقنيات ومبادئ CSS

في بعض الأحيان ، يمكننا الاعتماد على أدوات مثل مشغلي المهام أو الحزم مثل Grunt و Gulp و webpack لمساعدتنا في تقديم تعليمات برمجية موثوقة. يمكنك زيادة شحن الكود الخاص بك باستخدام linters أو minifiers أو babel أو PostCSS لتحويل الشفرة.

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

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

أود أن أقول إن هذا صحيح بشكل خاص عند العمل مع CSS ، ولهذا السبب:

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

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

Cascade هي أفضل ميزة في CSS ، ويجب أن تعمل من أجلك وليس ضدك. يتغلب بعض المطورين على ذلك من خلال اختراع أساليب مخصصة مثل CSS-in-JS. إذا قمت بتعبئة CSS في بيئة مغلفة مثل React ، فلا يمكنك استخدامها في أي مكان آخر. أشك في أن هذا هو النهج الذي تريده في نظامك الأساسي القابل للتطوير. إذا كانت لديك مشاكل مع الشلال ، فتعلم كيف تتقبله ، ثم تعلم كيفية ترويضه.

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

لماذا تحتاج إلى مطور CSS؟

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

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

معايير الترميز CSS

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

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

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

تنفيذ تصميم CSS

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

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

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

تنظيم كود CSS الخاص بك

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

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

كود CSS في الإنتاج

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

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

يكتب مطورو CSS كود HTML و JavaScript أيضًا. هذا يعني أن تسليم الأصول هو مسؤولية مطور CSS. يجب أن يكون مطورو CSS مسؤولين عن تحميل الخطوط واستخراج CSS الحرجة واستخدام تحميل JavaScript المؤجل وغير المتزامن وتوفير صور سريعة الاستجابة.

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

ما يمكن لمطوري CSS القيام به من أجلك

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

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

تغليف

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

في مقالته ، The Great Divide ، يقتبس كريس كويير بعض قادة التكنولوجيا ، ويتفق معظمهم على وجوب وجود فجوة ، يجب أن يكون هناك دور قائم على CSS لا يتطلب معرفة أطر عمل JavaScript الحديثة. يمكن أن يساعدك إذا كنت تعرف أكثر من "CSS فقط" ، ولكن الدور يجب أن يكون موجودًا ، ويجب قبوله على أنه مساوٍ للأدوار المستندة إلى JavaScript.

بعد كل شيء ، هل تريد أن تترك منتجك في أيدي متخصص متخصص يمكنه صقله إلى حد الكمال ، أم أنك ترضى بما يكفي ؟

مزيد من القراءة على مدونة Toptal Engineering:

• كيفية التعامل مع رسوم SVG المتحركة في CSS