الصفحة الرئيسية>دروس تصميم الويب>توحيد الويب

الحديث عن النمطية في تصميم أثاث ايكيا

الكاتب:Eve Cole وقت التحديث:2009-06-26 18:11:04


يمكن كتابة CSS المقابل على النحو التالي:

.الوضع-ب{...}
.الوضع-ب h3{...}
.mode-b div {...}
.الوضع-ب h4{...}
.mode-b ul li{...}


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

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

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

/* =S عالمي */
ح3{
/* الطريقة الأولى للكتابة */
...
}
.mode-a h3،
.الوضع-ب h3{
/*الطريقة الثانية للكتابة*/
...
}
/* =E عالمي */
/* =وضع S-أ */
.الوضع-أ{...}
.الوضع-ع{...}
/* =الوضع E-أ */
/* =وضع S-ب */
.الوضع-ب{...}
.mode-b div {...}
.الوضع-ب h4{...}
.mode-b ul li{...}
/* ==الوضع E-ب */


أتساءل عما إذا كنت قد لاحظت أن تلك العناصر الصغيرة الموجودة في ايكيا يمكن غالبًا دمجها مع عناصر أخرى مختلفة. يؤدي هذا أيضًا إلى طرح موضوع آخر للنمطية: الوحدات النمطية داخل الوحدات النمطية. وهذا يعني أنه يمكن أن توجد وحدات أخرى في الوحدة، وهو أمر يسهل فهمه أيضًا، تمامًا كما هو الحال عندما ننشئ موقع ويب، فإن بنية الصفحة بأكملها تشبه وحدة كبيرة، والمثال المذكور أعلاه هو وحدة داخل وحدة. الوحدة النمطية، ولكن دعونا نحصر هذا التعريف في مستوى واحد. يمكن اعتبار تعريف h3 في المثال أعلاه وحدة نمطية، ويظهر في كل من الوحدتين "mode-a" و"mode-b"، وأدائه الهيكلي ثابت نسبيًا.

حسنًا، هذا مجرد تعريف للملصق، ماذا لو كان هناك أكثر من ملصق واحد؟ لنغير المثال مرة أخرى:



العرض التوضيحي المعياري


مثال على البنية المعيارية.



الميزات المعيارية:



  • مستقلة نسبيًا

  • قابلية نقل عالية






العرض التوضيحي المعياري


هذا مثال على "وحدة داخل وحدة نمطية".



وحدات داخل الوحدات:


الوحدة "mode-a" هي وحدة داخل وحدة نمطية.



/* =وضع S-أ */
.الوضع-أ{...}
.mode-a h3{...}
.الوضع-ع{...}
/* =الوضع E-أ */
/* =وضع S-ب */
.الوضع-ب{...}
.الوضع-ب h4{...}
.mode-b .cont{...}
.mode-b .cont ul li{...}
/* =الوضع E-ب */
/* =وضع S-ج */
.الوضع-ج{...}
.الوضع-ج h4{...}
.mode-c .cont{...}
.mode-c .cont p{...}
/* =الوضع E-ج */

كما ترون مما سبق، "mode-a" هو وحدة نمطية مستقلة عندما يكون جزءًا من "mode-b" و"mode-c"، فإنه يصبح وحدة نمطية داخل الوحدة النمطية. إسقاط الطوب، على أمل إثارة المزيد من المناقشات ذات الصلة.