إجابة على "كيفية الحصول على الخير مع CSS"

تلميح - الأمر يتطلب الممارسة ، ولكن أيضًا فهم الصورة الأكبر.

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

أحد أكثر أنواع الأسئلة التي أراها في الغالب هو الصورة الأكبر للأشياء. بينما يشبه نوع مفهوم الإجابة عن السؤال - StackOverflow ، تختلف طبيعة الأسئلة والأجوبة.

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

لكن الأمر المثير للاهتمام هو "كيف أحصل على الصيام" أو "كيف يمكنني تنظيم الكود". نوع من الأسئلة غير مرحب به في StackOverflow كما تعلم ربما لأنها ليست محددة بما فيه الكفاية.

وهذا هو هدفي هنا - الإجابة على السؤال البسيط "كيف تتحسن."

فهم المفاهيم

هذا هو المهم. فهم الصورة الأكبر.

ربما تعرف ما هو لون الخلفية ، وربما تعرف ما يفعله transformX والعوامة و flexbox والشبكة. يمكنك أن تقرأ عنها ، وكيفية استخدامها وتنفيذها. هذا ليس الجزء الصعب. (+ هناك google للمساعدة.)

لكن ما يناضل معظم الناس هو كيف يرتبط كل شيء مع بعضهم البعض. لماذا يتم اتخاذ بعض القرارات ولماذا يحب الناس اختراع الأطر الخاصة بهم واتفاقيات التسمية.

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

أولاً ، لنبدأ بكيفية وضع الأساسيات بشكل صحيح.

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

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

بعد بضعة أشهر من العمل الشاق ، سيكون الأمر مثل الكتابة باللغة الأم.

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

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

https://xkcd.com/1350/

عليك أن تكتب الكثير من التعليمات البرمجية

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

ماذا تكتب بالضبط؟

إذا كنت تعمل في وكالة أو كمستقلة ، فمن المحتمل أن يكون لديك ما تعمل عليه ، ولكن إذا لم يكن كذلك ، فإليك بعض النصائح:

انظروا كيف يفعل الرجال الكبار ذلك

إذا كانت الأولى ، فربما يكون لديك متسع من الوقت تحت تصرفك. وهذا جيد ، وهذا يعني أنك حر في فعل ما تريد.

وهذا شعور رائع ، الكثير سيحسدك.

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

بعض الاتجاهات حول ما يجب البحث عنه:

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

ولكن كل هذا مملة. لا يمكنك الحصول على الخير بمجرد القراءة ، عليك القيام بشيء ما. وإليك ما يمكنك القيام به في كل مرة:

ثم حاول أن تفعل ذلك بنفسك

فتح سال لعابه على سبيل المثال. هناك فقط الكثير من التصاميم الرائعة! ماذا تفعل معهم؟ تنفيذها. اختر منها سهلة ومحاولة جعل كل شيء مثاليًا على جميع الشاشات.

لماذا ا؟ لأنها تبدو جيدة ، وسوف تشعر أنك عظيم عندما ترى أنها تعمل.

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

يمكنك مشاهدته على: https://dribbble.com/shots/3466131-Prism-Web-Theme-Template-designerbundle-com

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

لماذا ا؟ لأنه صعب. ستجعلك تفكر أكثر حول كيفية تنظيم علاماتك وأسلوبك. محاولة للحصول عليه بكسل الكمال! نقاط المكافأة للرسوم المتحركة.

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

تمت في أقل من ساعتين ، وتم ترميزها في حوالي 6 ساعات أثناء البث المباشر لها.

يمكنك رؤية النسخة المنفذة هنا. لا يستجيب لأن هذا لم يكن جزءًا من الخطة الأولية. يمكنك أيضًا مشاهدة تسجيل زمني للعملية بأكملها.

مراجعة الرمز الخاص بك

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

ما الذي تسبب في إعادة كتابة أجزاء منه؟ ما الذي جعلك تضيف المخيف! مهم؟ هل واجهت صعوبات مع استفسارات وسائل الإعلام؟ هل كتبت 4-5 مستويات محددات عميقة؟

هناك العديد من أفضل الممارسات للبحث عنها. هنا عدد قليل منهم:

  1. 20 Protips لكتابة الحديث المغلق
  2. اصطلاحات تسمية CSS المعيارية
  3. أو هذا المبدأ التوجيهي الضخم إلى حد كبير كل شيء CSS.

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

يجب أن تخطط للمستقبل من البداية!

كيف ستعمل المكونات مع بعضها البعض؟ ما هو متداخل ، ما سوف ترث الأنماط؟

يجب أن تتعلم أن تخطط بشكل جيد

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

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

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

لاحظ

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

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

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

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

  • مرة أخرى ، اصطلاحات التسمية المعيارية من مدونة sass
  • مقدمة إلى كائن CSS الموجه (OOCSS)
  • SMACSS
  • BEM
ما هو شعورك بالقتال مع CSS عندما لا يتم تنظيم شيء. الكتابة فوق ، التغيير والتبديل ، إضافة وإضافة المزيد والمزيد من الخصائص سوف يؤدي في كثير من الأحيان إلى فوضى التي تنقطع بسهولة.

هناك العديد من الآخرين ، يجب أن تجد ما يناسب احتياجاتك بشكل أفضل. لكن ما أقترحه هو أن تقرأ الوثائق والسبب والمشاكل التي تحلها هذه الاتفاقيات.

قد لا تستخدم أيًا منها ، لكن من المهم معرفة سبب وجودها.

TL، DR

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

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

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

إذا أعجبك هذا المقال ، فالرجاء ألا تنسى أن تضغط على رمز القلب أدناه.