إعادة تعلم CSS بالطريقة الصحيحة

StackOverflow https://stackoverflow.com/questions/1574016

  •  21-09-2019
  •  | 
  •  

سؤال

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

  • ما زلت أقوم بالتخطيط باستخدام الجداول وليس باستخدام CSS فقط.لم أجد بعد طريقة لتقديم البيانات بشكل محاذاة وجدولية بشكل صحيح.
  • لا أعرف الفرق بينهما display: none و visibility: hidden (حسنا، أعرف ذلك الآن.ولكن هناك العديد من الحالات مثل الحشو والهوامش والتجاوزات وما إلى ذلك)
  • لم أتبع حقًا طريقة الميراث لكتابة CSS.يبدأ كل نمط تقريبًا بـ # وليس فئة.
  • عندما يتم تحميل الصفحة ببطء، تكون عناصر html في غير مكانها ولا يتم ترتيبها إلا عند تحميلها بالكامل.
  • لا أعرف ما الذي تنقله هذه الصورة في Firebug (بالمناسبة، Firebug هو منقذي.كانت الحياة مستحيلة بدون Firebug)

alt text

  • عندما يكون التخطيط في حالة من الفوضى، فإنني أميل إلى استخدام الموضع: المطلق.دائمًا ما ينتهي الأمر بفوضى أكبر.

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

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

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

هل كانت مفيدة؟

المحلول

الدفع التصميم مع معايير الويب بقلم جيفري زيلدمان.

نصائح أخرى

فيما يلي بعض القواعد العامة للعيش بها:

  • الجداول جيدة للبيانات الجدولية. إذا كانت البيانات التي تقدمها تنتمي إلى جدول ، فلا تخرج عن طريقك في محاولة لإنشاء شبكة <div>س. لا معنى له.
  • بقدر ما يتعلق الأمر بالتخطيط ، والاستخدام <div> العلامات ، ابتعد عن الجداول. تعرف على يطفو الممتلكات حسنا. مع CSS3 ، سيكون هناك جديد ، تحسين المعايير إلى عرض منشأه. نتعلم منها.
  • display: none يزيل العنصر تمامًا من منفذ العرض. على العكس visibility: hidden يحتفظ بالمسافة البيضاء التي كان العنصر قد أخذها بطريقة أخرى. في كلتا الحالتين ، العنصر لا يزال في دوم.
  • القاعدة العامة للفئات والمعرفات. يجب أن يكون عناصر الصفحات ومعرفاتها علاقة فردية لكل صفحة. على سبيل المثال ، #Column1 ، #Column2 ، #Footer ، #Header. من ناحية أخرى ، يجب أن تكون عناصر الصفحات والفئات علاقة كثيرة ، مثل:. container أو .NavLink. استخدم الفصول عندما تعلم أنك ستستخدم عنصرًا معينًا قليلاً.
  • فكر من حيث الكفاءة. كلما كانت القواعد الأقل نمطًا لديك ، زادت سرعة تحميل صفحتك وستكون المشكلات الأسهل للأناقة في التصحيح.

لدي حوالي مليون شيء آخر لأقوله ولكن هذا يجب أن يبدأ.

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

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

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

كما هو الحال دائمًا ، يمكنك التقاط الكثير من النصائح والحيل الرائعة في حيل CSS, ، والتي ساعدتني دائمًا على معرفة المزيد عن الاستخدام الصحيح للغة (مثل عندما علمت عنها overflow: auto للعناصر العائمة المحتوى! عبقري!).

امل ان يساعد!

  1. يزور CSS Zen Garden لمعرفة ما يمكنك فعله فقط مع CSS.

  2. يزور مدارس W3 واتبع البرنامج التعليمي. قد يبدو الأمر بسيطًا بالنسبة لك ، لكنك ستتعلم الأشياء الأساسية.

  3. قم بزيارة بعض المواقع ، مثل قائمة منفصلة لمعرفة كيفية القيام بالأشياء وتعلم الحيل.

  4. معرفة ما إذا كان إطار عمل CSS يناسب احتياجاتك (مثل 960 شبكة).

أفترض أنك قمت بتثبيت Firebug?

ايضا، http://www.doctype.com قد تحصل على نتائج أكثر صلة.

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

إريك ماير Cascading Style Sheets 2.0 مرجع مبرمج هو مورد رائع لفهم بالضبط كيف يعمل المحددون والقواعد ، ويعمل كمرجع رائع أيضًا.

بعض الأفكار حول ما نشرته.

  • أ إعادة تعيين Master ستساعد ورقة الأنماط في اختلافات المتصفح.

  • ويجب أن تستخدم البيانات الجدولية الجداول.
    إنها تخطيطات يجب أن تتجنب علامات الجدول لصالح CSS.

الكثير من الناس هنا يقدمون نصائح جيدة. سأضيف فقط اثنين آخرين:

  • أولاً ، حاول كتابة (x) html. يمكنك بسهولة اختبار رمز HTML الخاص بك باستخدام مدقق HTML من W3C. ركز بشكل أساسي على المحتوى ، وليس على الأناقة.
  • ثانياً ، حاول كتابة CSS صالحة ، ويفضل أن يكون ذلك في منفصلة .css ملف. تجنب استخدام style ينسب. (يمكن أن يكون هذا الجزء صعبًا ، إذا كنت ترغب في دعم بعض المتصفحات القديمة من ريدموند). يمكنك اختبار CSS باستخدام مدقق CSS من W3C.

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

تجربة في Firebug

لا أعرف ما الذي تنقله هذه الصورة في Firebug

Firebug نفسها يمكن أن تساعدك هناك. افعل هذا:

  • إنشاء div مع بعض النص فيه.
  • استخدم CSS لإعطائه padding: 5px; margin: 5px; border: 1px solid black;
  • افحصه في Firebug ، كما تظهر في سؤالك.
  • انقر على أي واحد من هذه الأرقام في نموذج المربع الذي يعرضه لك ، وابدأ في الضغط على الأسهم لأعلى ولأسفل (أو اكتب رقمًا مختلفًا).
  • ترى كيف يتغير في الوقت الفعلي؟ هذه واحدة من أفضل الأشياء في Firebug: إنها تتيح لك التعديل دون إعادة التحميل ، ثم تعديل ورقة الأنماط عندما تبدو صحيحة.
  • استمر في القيام بذلك حتى تفهم كيف الحشو والهوامش والعمل الحدودي.

أعتقد أنه يجب عليك استخدام ، لاحتياجات التخطيط الخاصة بك ، واحدة من ما يسمى "أطر CSS" (960.GS فمثلا).

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

CSS سهلة وليست لغة برمجة حقيقية: لا تخف من كلمة "إطار" ؛)

يمكنك أن تبدأ من خلال قراءة بعض الكتب الجيدة في هذا الشأن. تلك من اريك ماير هي اليدين وجودة عالية جدا. الكتاب الآخر الذي تعلمته كثيرًا هو كتاب تصميم Zen of CSS.

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

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

الفرق بين display:none و visibility:hidden هو عندما يتم تعيين الشاشة ، لا يتم حجز المساحة لهذا العنصر. لذا ، تخيل ذلك كما هو الحال عندما يتم تعيين الشاشة ، فإن العنصر قد انتهى من الصفحة. بينما إذا كنت تستخدم خيار الرؤية ، فإن العناصر موجودة في الصفحة ، في مكانها غير مرئي. هل أوضحت ذلك بوضوح؟ نأمل أن يكون هذا منطقيًا بالنسبة لك.

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

الانتقال إلى CSS هو في بعض الأحيان صعبة ولكن يستحق ذلك.

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

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

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

لي، أنماط تصميم CSS و HTML بقلم مايكل باورز غير كل شيء. لا مزيد من التجارب والخطأ التي لا نهاية لها ، ولكن المشكلة - نمط - الحل. لا غنى عنه.

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

اعتمادًا على أسلوب التعلم الخاص بك ، قد أوصي بالانتقال مباشرة إلى المصدر: تعريف CSS. يمكنك العثور على كل من المواصفات المختلفة هنا: http://www.w3.org/style/css/. على الرغم من أن المواصفات لا تغطي حقًا المراوغات المحددة للمتصفح (إذا حدث ذلك ، فلن تكون المراوغات ، فهل هم؟) ، فإنها تقوم بعمل جيد حقًا (بالنسبة لي) لشرح كيفية عمل كل قطعة.

سأخبرك سرًا: اتبع هذا الدروس الكلاسيكية

listutorial

تعويم

وستعرف 80 ٪ مما تحتاج إلى معرفته عن CSS.

http://htmldog.com/ في رأيي ، أحد الموارد النهائية لتعلم تطوير الويب الأمامي بالطريقة الصحيحة.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top