كيفية تصميم مواقع مختلفة باستخدام مجموعة CSS واحدة

كيف يمكن لمجموعة CSS واحدة أن تحدد أنماط مواقع متعددة تبدو مختلفة

TL، DR:

  • في بداية عام 2018 ، أطلقنا خدمة طبقة عرض تقديمي جديدة لصفحات القصة على Business Insider و INSIDER
  • قررنا قيادة كلا الموقعين باستخدام نفس مجموعة CSS
  • إليك مثال على كيفية عمله

ها هي المشكلة.

في بداية عام 2018 ، خططنا لإطلاق خدمة طبقة عرض تقديمي جديدة لصفحات الأخبار على Business Insider و INSIDER. أطلق على المشروع اسم "birta" (بمعنى Viking Old Norse ، "للعرض أو الكشف").

تحتوي صفحات قصة Business Insider و INSIDER على تخطيطات مماثلة. ومع ذلك ، فإن CSS مختلف في الغالب.

جاء الكثير من الأسئلة خلال خططنا. أحدهم كان ، "ما هي أفضل طريقة لتصميم CSS للمواقع؟"

"هل نتفرع من مجموعة CSS الخاصة بنا لكل موقع؟"

أو هل نقود موقعين بنفس CSS؟ وهل هذا ممكن؟ "

نعم ، هناك مشكلة في المشكلة!

تشفير الأكواد البرمجية يخلق مشكلة كبيرة.

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

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

تكاليف الوقت زيادة سحرية أضعافا مضاعفة لكل موقع إضافي. على سبيل المثال ، تبلغ التكلفة الزمنية لتغيير موقعين أكثر من ضعف وقت تغيير موقع واحد:

تزداد الأمور سوءا.

يؤدي إنشاء مواقع متعددة باستخدام نفس مجموعة CSS إلى إنشاء مجموعة مختلفة تمامًا من المشكلات.

كيف نتعامل مع تصميمين مختلفين للموقع؟

وكيف يمكننا تصميم عناصر ووحدات فريدة؟

ماذا لو كان هذا النهج جامد وهش؟ ماذا لو كان يقلل من المرونة ، خاصة بالنسبة لتخطيطات الصفحات المختلفة؟

للوهلة الأولى ، قد تبدو فكرة قيادة مواقع متعددة من مجموعة CSS واحدة فعالة ، ولكنها قد تقدم أيضًا تعقيدًا غير ضروري.

مشاكل تستحق النظر.

ها هي فكرة.

ماذا لو كانت هذه هي المشاكل الصحيحة؟

وقال بطريقة أخرى: ماذا لو كان التقدم من خلال هذه المشاكل بهدف بناء مجموعة CSS مستدامة وفعالة وقابلة للتطوير من شأنه أن يساعدنا في أن نصبح مهندسين أفضل؟

ماذا لو أصبحنا رائعين ونحن نواجه هذه المشاكل وجها لوجه؟

ماذا لو ساعدتنا هذه العقبات في كتابة CSS بشكل جيد للغاية؟

أساس متين.

قررنا قيادة موقعين من نفس مجموعة CSS.

ولكن كيف قمنا ببناء مجموعة واحدة من CSS لتحديد أنماط لمواقع متعددة تبدو مختلفة؟

وكيف صممنا CSS لدعم مواقع متعددة دون تزويرها؟

بدأت إجاباتنا بقرارين أساسيين مهمين:

أولاً ، قررنا تطبيق منهجية CSS تدعى SMACSS ، والتي تمثل الهندسة المعمارية القابلة للتطوير والوحدات النمطية لـ CSS. يصفها مبتكر SMACSS ، جوناثان سنوك ، بهذه الطريقة:

SMACSS هي وسيلة لفحص عملية التصميم الخاصة بك وطريقة لتناسب تلك الأطر الصلبة في عملية تفكير مرنة. إنها محاولة لتوثيق نهج ثابت لتطوير الموقع عند استخدام CSS.

ثانيًا ، قررنا تغيير قيم خصائص CSS عند الضرورة.

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

من خلال الجمع بين المنهجية القوية لـ SMACCS والمرونة القوية لمتغيرات SCSS ، قمنا بتركيب إطار CSS قوي وقابل للتطوير وقادر على قيادة مواقع متعددة في وقت واحد.

وإليك كيف يعمل.

في هذا المثال ، سنقوم بتصميم موقعين مختلفين المظهر باستخدام نفس CSS.

بصريًا ، إليك ما يبدو عليه الفرق:

أولاً ، إليك أسلوب التنقل والتذييل الخاصين بالموقع 1:

// الموقع 1
.nav {
  اللون: # ff؛
}
.nav-logo {
  الخلفية: عنوان url (images / site-1-logo.svg) ؛
}
.تذييل {
  الخلفية: شفافة.
}

وأنماط الموقع 2:

// الموقع 2
.nav {
  اللون: # ff؛
}
.nav-logo {
  الخلفية: عنوان url (images / site-2-logo.svg) ؛
}
.تذييل {
  الخلفية: # f00؛
}

بعد ذلك ، سننشئ ملفًا جديدًا يسمى _styles.scss. ستقود الأنماط لكلا الموقعين ، على الرغم من أنها تبدو مختلفة.

نظرًا لأن كلا الموقعين يستخدمان نفس لون النص لـ .nav ، فلن نغيره.

الفئات الأخرى لها قيم خاصية فريدة. بالنسبة لأولئك سنذكر العقار ، ولكن اترك القيمة فارغة مؤقتًا. سترى لماذا قريباً:

// ملف جديد: _styles.scss
.nav {
  اللون: # ff؛ / / نفسه لكلا الموقعين
}
.nav-logo {
  خلفية: ؛
}
.تذييل {
  خلفية: ؛
}

متغير- ize كل الأشياء.

بعد ذلك ، دعونا ننشئ متغيرات SCSS للخصائص ذات القيم الفريدة.

سنتبع هذا النمط:

  1. اسم المتغير SCSS باستخدام أسماء الخصائص والفئات.
  2. حدد المتغير في ملفي SCSS جديدين. واحد لكل موقع.

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

ومع ذلك ، نحن بحاجة إلى متغيرات الخصائص الأخرى. لذلك ، فلنقم بإنشاء متغير SCSS يُسمى $ nav-logo-background لقيمة خاصية الخلفية لـ .nav-logo:

// ملف: _styles.scss
.nav {
  اللون: # ff؛
}
.nav-logo {
  الخلفية: $ nav-logo-background؛ // متغير جديد
}
.تذييل {
  خلفية: ؛
}

وفي ملفين جديدين ، سنحدد القيم الفريدة لهذا المتغير لكل موقع:

// ملف جديد: site-1 / _variables.scss
$ nav-logo-background: url (images / site-1-logo.svg) ؛
// ملف جديد: site-2 / _variables.scss
$ nav-logo-background: url (images / site-2-logo.svg) ؛

أخيرًا ، نتبع نفس النمط لإنشاء متغير SCSS لخلفية تذييل الصفحة ، يسمى الخلفية $ footer:

// ملف: _styles.scss
.nav {
  اللون: # ff؛
}
.nav-logo {
  الخلفية: $ nav-logo-background؛
}
.تذييل {
  الخلفية: $ تذييل الخلفية. // متغير جديد
}

وحدده بشكل فريد لكلا الموقعين:

// ملف: site-1 / _variables.scss
$ nav-logo-background: url (images / site-1-logo.svg) ؛
$ تذييل الخلفية: شفافة.
// ملف: site-2 / _variables.scss
$ nav-logo-background: url (images / site-2-logo.svg) ؛
$ footer-background: # f00؛

فقاعة. موقعين مختلفين. ورقة أنماط CSS واحدة.

عند هذه النقطة ، تثار عدة أسئلة. سنعالج بعضًا منها قريبًا.

لا تتردد في تخطي إلى الأمام.

ولكن أولاً ، دعونا ننظر في كيفية تكوين CSS الأساسي لكل موقع.

إعداد CSS الأساسية.

للخطوة الأخيرة ، قم بإنشاء ملف SCSS أساسي لكل موقع لتجميع CSS.

في ملف جديد site-1 / core.scss ، قم باستيراد متغيرات الموقع 1 أولاً. ثم استيراد الأنماط:

// ملف جديد: site-1 / core.scss
// استيراد موقع 1 متغيرات
import 'site-1 / variables' ؛
// استيراد الأنماط
import 'styles.scss' ؛

افعل الشيء نفسه بالنسبة للموقع 2. قم بإنشاء site-2 / core.scss ، والذي يستورد متغيرات الموقع 2 ، متبوعة بقواعد النمط:

// ملف جديد: site-2 / core.scss
// استيراد الموقع 2 المتغيرات
import 'site-2 / variables' ؛
// استيراد الأنماط
import 'styles.scss' ؛

ترتيب بياناتimport مهم هنا. عكس الترتيب ، وسوف يشكو المترجم من المتغيرات التي لم يتم تحديدها بعد.

النتائج في.

يبدو إخراج الموقع 1 كما يلي:

.nav {
  اللون: # ff؛
}
.nav-logo {
  الخلفية: عنوان url (images / site-1-logo.svg) ؛
}
.تذييل {
  الخلفية: شفافة.
}

وإخراج الموقع 2 هو:

.nav {
  اللون: # ff؛
}
.nav-logo {
  الخلفية: عنوان url (images / site-2-logo.svg) ؛
}
.تذييل {
  الخلفية: # f00؛
}

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

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

الآن لمعالجة بعض الأسئلة.

"ألا يخلق هذا الكثير من المتغيرات؟ أليس هذا صداع؟ "

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

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

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

على سبيل المثال ، لنفترض أننا كتبنا CSS لهذه الوحدات:

_nav.scss
_login.scss
_footer.scss

تستخدم متغيرات SCSS للموقع 1 والموقع 2 نفس التنسيق والتنظيم:

// ملاحظة: كلا الملفين (site-1 / _variables.scss)
// و (site-2 / _variables.scss) يتبعان هذا التنسيق:
// وحدة التنقل
(متغيرات SCSS هنا)
//
// تسجيل الدخول الوحدة
(متغيرات SCSS هنا)
//
// تذييل الوحدة
(متغيرات SCSS هنا)

"نعم ، ولكن هل الحجم؟"

نعم ، هذا المقياس بسلاسة.

في الواقع ، تم تصميمه خصيصًا للتحجيم بشكل جيد. حتى الآن ، أثبتت تجربتنا الكثير.

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

باختصار ، إليك بعض أعراض CSS المصممة بشكل سيئ والتي لا تتناسب بشكل جيد:

  • إنه جامد: خصوصية القطاع المعقدة أو تصادم الخصوصية.
  • إنه هش: اقتران ضيق على HTML.
  • إنها أنماط متجانسة: أنماط صفية غير قابلة لإعادة الاستخدام.

بالمناسبة ، تعرف أن إطار عملك يخدمك عندما يكشف عن المشكلات التي تتطلب منك التفكير في حل باستخدام أفضل الممارسات.

العكس ليس متعة: إطار مع عقبات متأصلة أمام أفضل الممارسات. أو ما هو أسوأ ، حل يتطلب حلولاً تتعارض مع أفضل الممارسات.

"ماذا لو وجدت وحدة نمطية على الموقع 1 ، ولكن ليس على الموقع 2؟"

هذا السؤال يبدو أكثر تعقيدا مما هو عليه في الواقع.

الحل بسيط: لا يشمل CSS للوحدات النمطية الخاصة بالمواقع على المواقع الشقيقة.

كمكافأة إضافية ، تهيئات مثل هذا يعزز أداء سرعة الموقع.

الموقع 1 لا يحتاج إلى وحدة نمطية فريدة:

// استيراد الوحدات
@استيراد
  "الملاحة"،
  'تسجيل الدخول'،
  'تذييل'؛

ومع ذلك ، فإن الموقع 2 يفعل:

// استيراد الوحدات
@استيراد
  "الملاحة"،
  'تسجيل الدخول'،
  "فريدة من نوعها وحدة،
  'تذييل'؛

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

شكرا!

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

شكرا لقرائتك!

هل لديك أفكار أو ملاحظات؟

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

تبحث عن فرصة عمل جديدة؟ كن جزءًا من فريقنا! نحن نبحث دائما عن المطلعين الجدد.