تجنب الثوابت المتكررة في CSS

Question

هل هناك أي تقنيات مفيدة لتقليل تكرار الثوابت في ملف CSS؟

(على سبيل المثال، مجموعة من المحددات المختلفة التي يجب أن تطبق جميعها نفس اللون، أو نفس حجم الخط)؟

Answer 1

حديثاً، تمت إضافة المتغيرات إلى مواصفات CSS الرسمية.

تسمح لك المتغيرات بشيء مثل هذا:

body, html {
    margin: 0;
    height: 100%;
}

.theme-default {
    --page-background-color: #cec;
    --page-color: #333;
    --button-border-width: 1px;
    --button-border-color: #333;
    --button-background-color: #f55;
    --button-color: #fff;
    --gutter-width: 1em;
    float: left;
    height: 100%;
    width: 100%;
    background-color: var(--page-background-color);
    color: var(--page-color);
}

button {
    background-color: var(--button-background-color);
    color: var(--button-color);
    border-color: var(--button-border-color);
    border-width: var(--button-border-width);
}

.pad-box {
    padding: var(--gutter-width);
}

<div class="theme-default">
    <div class="pad-box">
        <p>
            This is a test
        </p>
        <button>
           Themed button
        </button>
    </div>
</div>

لسوء الحظ، دعم المتصفح لا يزال ضعيفًا جدًا. بحسب موقع CanIUse, ، المتصفحات الوحيدة التي تدعم هذه الميزة اليوم (9 مارس 2016)، هي Firefox 43+، Chrome 49+، Safari 9.1+ وiOS Safari 9.3+:

---

البدائل :

إلى أن يتم دعم متغيرات CSS على نطاق واسع، يمكنك التفكير في استخدام لغة معالج مسبق لـ CSS مثل أقل أو ساس.

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

على سبيل المثال، في Sass، يمكنك إنشاء وظيفة مثل هذا:

@function exponent($base, $exponent) {
    $value: $base;
    @if $exponent > 1 {
        @for $i from 2 through $exponent {
            $value: $value * $base;
        }
    }
    @if $exponent < 1 {
        @for $i from 0 through -$exponent {
            $value: $value / $base;
        }
    }
    @return $value; 
}

Answer 2

يمكن أن تنتمي العناصر إلى أكثر من فئة واحدة، لذا يمكنك القيام بشيء مثل هذا:

.DefaultBackColor
{
    background-color: #123456;
}
.SomeOtherStyle
{
    //other stuff here
}
.DefaultForeColor
{
    color:#654321;
}

ثم في جزء المحتوى في مكان ما:

<div class="DefaultBackColor SomeOtherStyle DefaultForeColor">Your content</div>

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

ولكن، نعم، شكواي الأكبر مع CSS هي عدم القدرة على تحديد الثوابت الخاصة بك.

Answer 3

يجب عليك الفصل بين كل معرف أو فئة بفاصلة على سبيل المثال:

h1,h2 {
  color: #fff;
}

Answer 4

يمكنك استخدام المتغيرات العامة لتجنب التكرار.

p{
  background-color: #ccc; 
}

h1{
  background-color: #ccc;
}

هنا، يمكنك تهيئة متغير عام في :جذر محدد الطبقة الزائفة. :جذر هو المستوى الأعلى من DOM.

:root{
    --main--color: #ccc; 
}

p{
  background-color: var(--main-color);
}

h1{
  background-color: var(--main-color);
}

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

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

في حالة Sass، يتعين عليك استخدام $variable_name في الأعلى لتهيئة المتغير العام.

$base : #ccc;

p{
  background-color: $base;
}

h1{
   background-color: $base;
}

Answer 5

يمكنك استخدام أطر عمل CSS الديناميكية مثل أقل.

Answer 6

أنا شخصياً أستخدم محددًا مفصولاً بفواصل، ولكن هناك بعض الحلول لكتابة CSS برمجيًا.ربما يكون هذا مبالغة قليلاً بالنسبة لاحتياجاتك البسيطة، لكن ألقِ نظرة عليها CleverCSS (بايثون)

Answer 7

جرب المتغيرات العالمية لتجنب تكرار الترميز

h1 {
  color: red;
}
p {
  font-weight: bold;
}

أو يمكنك إنشاء فئات مختلفة

.deflt-color {
  color: green;
}
.dflt-nrml-font {
  font-size: 12px;
}
.dflt-header-font {
  font-size: 18px;
}

Answer 8

بقدر ما أعرف، بدون إنشاء ملف CSS برمجيًا، لا توجد طريقة، على سبيل المثال، لتحديد الظل المفضل لديك من اللون الأزرق (#E0EAF1) في مكان واحد فقط.

يمكنك بسهولة كتابة برنامج كمبيوتر لإنشاء الملف.قم بتنفيذ عملية بحث واستبدال بسيطة ثم احفظها كملف .css.

انتقل من هذا source.css...

h1,h2 {
  color: %%YOURFAVORITECOLOR%%;
}

div.something {
  border-color: %%YOURFAVORITECOLOR%%;
}

إلى هذا الهدف.css...

h1,h2 {
  color: #E0EAF1;
}

div.something {
  border-color: #E0EAF1;
}

برمز مثل هذا… (VB.NET)

Dim CssText As String = System.IO.File.ReadAllText("C:\source.css")
CssText = CssText.Replace("%%YOURFAVORITECOLOR%%", "#E0EAF1")
System.IO.File.WriteAllText("C:\target.css", CssText)

Answer 9

يمكنك استخدام الوراثة المتعددة في عناصر html الخاصة بك (على سبيل المثال: <div class="one two">) لكنني لست على علم بوجود طريقة للحصول على ثوابت في ملفات CSS نفسها.

يبدو أن هذا الرابط (أول رابط تم العثور عليه عند البحث عن سؤالك على Google) يلقي نظرة متعمقة إلى حد ما على المشكلة:

http://icant.co.uk/articles/cssconstants/

Answer 10

متغيرات CSS, ، إذا تم تطبيقه في جميع المتصفحات الرئيسية، فقد يحل هذه المشكلة يومًا ما.

وحتى ذلك الحين، سيتعين عليك إما النسخ واللصق، أو استخدام معالج مسبق من أي نوع، كما اقترح الآخرون (عادةً باستخدام البرمجة النصية من جانب الخادم).

Answer 11

    :root {
      --primary-color: red;
    }

    p {
      color: var(--primary-color);
    } 

<p> some red text </p>

يمكنك تغيير اللون بواسطة JS

var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim(); 


document.documentElement.style.setProperty('--primary-color', 'blue');