أطر CSS و "تسمية دلالية"

Question

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

<div class="span-24 last">

و 960gs مثل: <div class="grid_6 prefix_3 suffix_3">

هذا لا يزعجني شخصيا، لكنني رأيت ذكر أن استخدام هذه الأسماء غير القياسية للفئات لا ينصح وتذهب مقابل معايير الويب. نظرا لأن أكثر من مطور الطرف الخلفي، فأنا لا أملي على أحدث معايير الويب، وإمكانية الوصول، وما إلى ذلك، ولكن أود أن أبقى على الأقل متوافقا إلى حد ما. هل ستضيف ببساطة معرفات هادفة؟ يحب: <div class="grid_12" id="menu"> هل هناك أفضل الممارسات عند استخدام أطر CSS مثل هذه؟

ملاحظة: أحب أيضا اقتراح Nicholaides باستخدام البوصلة / SASS!

Answer 1

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

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

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

Answer 2

أنا لا أرى كيف

<div class="span-24 last">

و

<div class="grid_6 prefix_3 suffix_3">

فشل في الامتثال لمعايير الويب. هذا هو ببساطة فئات متعددة تم تعيينها لعنصر واحد.

Answer 3

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

Answer 4

الدفع بوصلة.

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

بدلا من القيام بذلك

<ul class="column_6">...</ul>

أنت تفعل:

ul.naviation
  color: #fff
  +column(6)

التي تجمع إلى

ul.navigation {
  color: #fff;
  /* all the rules for the 6th column a placed here */
}

يمكنك الاستفادة من أطر CSS مع الحفاظ على تطويقك نظيفة ودلالية.

Answer 5

لا تستخدم Framework CSS
لأن موقع الويب الخاص بك لن يستخدم كل شيء عروض الإطار.

من الجيد فقط أن أعتبر كمرجع واكتب CSS الخاص بك.
سيكون من الأسهل الحفاظ عليها، وسيكون ملف CSS أصغر.

الجزء الوحيد الذي كنت أستخدمه هو ... ملف Reset.css من 960.gs
يستخدم ملف إعادة تعيين CSS على نطاق واسع لإزالة جميع التباعد البيضاء الافتراضي مع عناصر DOM.

Answer 6

يمكنك تجربة تسمية العناصر مع معرف مواصفات اسم HTML5 القادمة:ورقة HML5 وهو واسع جدا المحدد للاستخدام في كل مكان. إذا التزمت بهذه الاتفاقيات التسمية، يجب عليك تذكر الغرض من عنصر التصميم. إذا كانت هناك حاجة إلى مزيد من الدقة محاولة لاستخدام بعض التنسيق القابل للقراءة البشرية التي ستفهمها - راحة الكتابة الخاصة بك هي مفتاح جودة رمز الجودة.

إذا كنت مهتما بمزيد من هذا الموضوع، اقرأ مقالة كاملة عن تحطيم مجلة "HTML5 ومستقبل الويب" (Google IT: حدود المستخدم الجديد الحد: /)