الجمع بين الأساليب

Question

لقد أردت منذ فترة طويلة أن أكون قادرا على تضمين فئة أسلوب واحد داخل آخر. علي سبيل المثال

med-font {
  font-size:12px;
}

#message a {
  style: med-font;
  color: blue;
  ...
}

/* lots of other styles, some of which use med-font */

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

حل آخر هو تقسيم تعريف "#Message A" في هذا المثال (أدناه). هذا يعمل موافق للمشاريع الصغيرة، ولكن لمشاريع أكبر، فهذا هو في الواقع حلا أقل تفضيلا. يجعل صيانة الموقع صعبة للغاية إذا كان لديك العديد من الفصول الدراسية تقسم وتناثر حول ملفات نمط كبير.

med-font, #message a {
  font-size:12px;
}

#message a {
  color: blue;
  ...
}

لذلك سؤالي هو جزأين: 1. هل هذا يزعج الآخرين؟ 2. هل يعرف أحد إذا كانت هذه الميزة / تم النظر في CSS3؟

يحرر: إضافة مثال لجسم HTML ومزيد من التفاصيل ...

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

<div id="username" class="med-font">schickb</div>
<div id="message">
  <div id="part1">
    <a href="whatever">text</a>
    <!--lots more tags and say 6 anchors -->
  </div>
  <div id="part2">
    <a href="foo">text</a>
    <!--lots more tags and say 8 anchors -->
  </div>
</div>
<div id="footer"> <!-- footer anchors should be a smaller font-size -->
    <a href="boo">lala</a> 
    <p class="med-font">Company Name</p>
    <!-- other tags and 3 more anchors -->
</div>

تذكر، هدف مهم هو الحصول على مكان واحد يتم فيه إعلان "MED- الخط" بحيث يكون من السهل ضبطه. في مشروعي الفعلي، هناك أساليب خطية صغيرة ومتوسطة ومهمة. أريد فقط إعلان واحد لكل منهما حتى لا أضطر إلى البحث من خلال CSS ليقول تغيير 12px إلى 11px.

أفضل حل حاليا هو إضافة فئة "MED-font" إلى جميع المراسي في الجسم، وفئة "الخط الصغيرة" لجميع المراسين في تذييل الصفحة. لكنني أفضل أن أفعل ما أظهرته في الأصل، ويشمل الخط المطلوب ببساطة في أنماط "#MESSAGE A" و "#Footer A".

ملخص: أريد أن يكون css أكثر جاف

Answer 1

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

Answer 2

لا، لا يزعجني، لأنه يمكنك استخدام فئات متعددة لعنصر وسيظل كلاهما:

.idiot {
   color:pink;
   text-decoration:underline;
}

.annoying {
   font-weight:bold;
}

/* and if you want to get REALLY specific... */
.annoying.idiot {
   background-image('ann.jpg');
}
...

<div class="annoying idiot">
   Ann Coulter
</div>

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

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

#message > div > a {
   font-size:12px;
}

#footer > a {
    font-size:10px;
}

حيث يعني الرموز "هو طفل"

أو، أكثر عموما (ولكن هذا من شأنه أن يطابق أيضا من داخل #Message مباشرة وأي شيء أعمق - الفضاء يعني "أي سليل من")

#message a {
   font-size:12px;
}

#footer a {
    font-size:10px;
}

Answer 3

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

Answer 4

في رأيي، حقيقة أنه لا يمكنك القيام بذلك موافق تماما لأن CSS يجب أن تظل مستقيما قدر الإمكان. من أعظم ميزة CSS، كما ذكر في مرجع XSLT في ميشيل كاي (نعم Xstl ... أعرف أن CSS بسيط للغاية وسهل بشكل لا يصدق أن أفهم.

ليس علي أن أنظر إلى أماكن متعددة لمعرفة آثار التصميم لوضع فئة على علامة (حسنا، ولكن لا يزال).

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

Answer 5

CSS ليست لغة برمجة، لم يكن من المفترض أن تكون و (في هذه المرحلة) لن تكون أبدا. ما الذي تتحدث عنه قد نوقش الكثير من المرات من قبل في W3C و Whatwg

أوه والإجابة 1) لا يزعجني

Answer 6

1. لا، هذا لا يزعجني، IE6 يزعجني :)

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