إدارة انفجار CSS

https://stackoverflow.com/questions/2253110

20-09-2019
|

سؤال

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

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

أنا أستخدم عددًا كبيرًا من div العلامات داخل موقع الويب، والانتقال من موقع ويب يعتمد بشكل كبير على الجداول.لذلك أحصل على الكثير من محددات CSS التي تبدو كما يلي:

div.title {
  background-color: blue;
  color: white;
  text-align: center;
}

div.footer {
  /* Styles Here */
}

div.body {
  /* Styles Here */
}

/* And many more */

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

هدفي النهائي هو تسهيل استخدام ملفات CSS وإظهار قدرتها على زيادة سرعة تطوير الويب.بهذه الطريقة، الأفراد الآخرون الذين قد يعملون في هذا الموقع في المستقبل سوف يتدربون أيضًا على استخدام ممارسات البرمجة الجيدة، بدلاً من الاضطرار إلى تعلمها بالطريقة التي فعلتها.

المحلول

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

فيما يلي القواعد التي أحاول الالتزام بها بنفسي (وليس هذا ما أتمكن منه دائمًا).

إعادة البناء في وقت مبكر، إعادة البناء في كثير من الأحيان. قم بتنظيف ملفات CSS بشكل متكرر، ودمج تعريفات متعددة من نفس الفئة معًا.إزالة التعريفات القديمة في الحال.
عند إضافة CSS أثناء إصلاح الأخطاء، اترك تعليقًا حول ما يفعله التغيير ("هذا للتأكد من ترك المربع محاذيًا في IE < 7")
تجنب التكرار، على سبيل المثال.تحديد نفس الشيء في .classname و .classname:hover.
استخدم التعليقات /** Head **/ لبناء هيكل واضح.
استخدم أداة تجميل تساعد في الحفاظ على نمط ثابت.أنا أستعمل بولي ستايل, ، وأنا سعيد جدًا به (تبلغ تكلفته 15 دولارًا ولكن يتم إنفاق الأموال بشكل جيد).أنا متأكد من وجود برامج مجانية أيضًا (التحديث:مثلا كود التجميل مرتكز على CSS مرتب, ، وهي أداة مفتوحة المصدر لم أستخدمها بنفسي بعد ولكنها تبدو مثيرة جدًا للاهتمام.)
بناء فصول معقولة.انظر أدناه للحصول على بعض الملاحظات حول هذا الموضوع.
استخدم الدلالات، وتجنب حساء DIV - استخدم <ul>للقوائم، على سبيل المثال.
حدد كل شيء على أدنى مستوى ممكن (على سبيل المثال.عائلة الخطوط الافتراضية واللون والحجم في body) واستخدامها inherit حيثما كان ذلك ممكنا
إذا كان لديك CSS معقد جدًا، فربما يساعدك مترجم CSS المسبق.أخطط للنظر في xCSS لنفس السبب قريبا.هناك العديد من الآخرين حولها.
إذا كنت تعمل ضمن فريق، فأبرز ضرورة الجودة والمعايير لملفات CSS أيضًا.الجميع مهتم بمعايير الترميز في لغة (لغات) البرمجة الخاصة بهم، ولكن هناك القليل من الوعي بأن هذا ضروري لـ CSS أيضًا.
إذا كنت تعمل ضمن فريق، يفعل فكر في استخدام التحكم في الإصدار.فهو يجعل تتبع الأشياء أسهل بكثير، كما يجعل حل التعارضات أسهل بكثير.إنه أمر يستحق العناء حقًا، حتى لو كنت "فقط" في HTML وCSS.
لا تعمل مع !important.ليس فقط لأن IE =< 7 لا يمكنه التعامل معه.في البنية المعقدة، غالبًا ما يكون استخدام !important مغريًا لتغيير السلوك الذي لا يمكن العثور على مصدره، ولكنه سم للصيانة على المدى الطويل.

بناء فصول معقولة

هذه هي الطريقة التي أحب بها بناء فصول معقولة.

أقوم بتطبيق الإعدادات العامة أولاً:

body { font-family: .... font-size ... color ... }
a { text-decoration: none; }

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

بعد ذلك، أبدأ في إنشاء فئات CSS، وتحديد أكبر قدر ممكن من السلالة والمعقول، وتجميع الفئات ذات الصلة قدر الإمكان.

div.content ul.table_of_contents 
div.content ul.table_of_contents li 
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber

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

على سبيل المثال، لنفترض أن لديك ثلاثة مستويات من قوائم التنقل.تبدو هذه القوائم الثلاث مختلفة، ولكنها تشترك أيضًا في خصائص معينة.على سبيل المثال، كلهم <ul>, ، جميعها لها نفس حجم الخط، وجميع العناصر بجوار بعضها البعض (على عكس العرض الافتراضي لـ ul).وأيضًا، لا تحتوي أي من القوائم على أي نقاط نقطية (list-style-type).

أولا، تحديد شائع الخصائص في فئة تسمى menu:

div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }

ثم حدد الخصائص المحددة لكل قائمة من القوائم الثلاث.المستوى 1 يبلغ طوله 40 بكسل؛المستويات 2 و 3 20 بكسل.

ملحوظة: يمكنك أيضًا استخدام فئات متعددة لهذا ولكن Internet Explorer 6 لديه مشاكل مع فئات متعددة, ، لذلك يستخدم هذا المثال idس.

div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }

سيبدو ترميز القائمة كما يلي:

<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>

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

نصائح HTML متنوعة

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

إذا أمكن، قم بإعطاء نص كل صفحة فئة فريدة: <body class='contactpage'> وهذا يجعل من السهل جدًا إضافة تعديلات خاصة بالصفحة إلى ورقة الأنماط:
```
body.contactpage div.container ul.mainmenu li { color: green }
```
عند إنشاء القوائم تلقائيًا، قم بإضافة أكبر قدر ممكن من سياق CSS للسماح بتصميم شامل لاحقًا.على سبيل المثال:
```
<ul class="mainmenu">
 <li class="item_first item_active item_1"> First item </li> 
 <li class="item_2"> Second item </li> 
 <li class="item_3"> Third item </li> 
 <li class="item_last item_4"> Fourth item </li> 
</ul>
```
بهذه الطريقة، يمكن الوصول إلى كل عنصر في القائمة لتصميمه وفقًا لسياقه الدلالي:سواء كان العنصر الأول أو الأخير في القائمة؛سواء كان العنصر النشط حاليًا؛وحسب العدد.

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

نصائح أخرى

فيما يلي 4 أمثلة فقط:

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

تحرير (2014/02/05) وبعد أربع سنوات، أقول:

استخدم معالج CSS المسبق وإدارة ملفاتك كأجزاء جزئية (أنا شخصيًا أفضل استخدام Sass مع Compass، لكن Less جيد جدًا أيضًا وهناك ملفات أخرى)
اقرأ عن مفاهيم مثل OOCSS, SMACSS, ، و بيم أو com.getbem.
ألقِ نظرة على مدى شعبية أطر عمل CSS بوتستراب و مؤسسة زرب منظمة.ولا تستبعد الأطر الأقل شعبية - الإنويت هو أمر مثير للاهتمام ولكن هناك الكثير من الآخرين.
قم بدمج/تصغير ملفاتك من خلال خطوة إنشاء على خادم التكامل المستمر و/أو مشغل المهام مثل Grunt أو Gulp.

لا تكتب العناوين في CSS

فقط قم بتقسيم الأقسام إلى ملفات.أي تعليقات CSS يجب أن تكون مجرد تعليقات.

reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css

استخدام برنامج نصي لدمجها في واحد؛اذا كان ضروري.يمكنك أيضًا الحصول على بنية دليل رائعة، وكل ما عليك هو إجراء فحص متكرر للبرنامج النصي الخاص بك .css ملفات.

إذا كان يجب عليك كتابة العناوين، فاحتفظ بجدول المحتويات في بداية الملف

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

/* Table of Contents
   - - - - - - - - -
   Header stuff
   Body Stuff
   Some other junk
   - - - - - - - - -
 */
...
/* Header Stuff 
 */
...
/* Body Stuff 
 */

اكتب التعليقات ضمن القواعد أو ضمنها، وليس خارج الكتلة

أولاً، عندما تقوم بتحرير البرنامج النصي، هناك فرصة بنسبة 50/50 أن تنتبه إلى ما هو خارج كتلة القاعدة (خاصة إذا كانت كتلة كبيرة من النص؛) ).ثانيًا، لا توجد (تقريبًا) أي حالة تحتاج فيها إلى "تعليق" في الخارج.إذا كان في الخارج، فهو عنوان بنسبة 99٪ من الوقت، لذا احتفظ به على هذا النحو.

تقسيم الصفحة إلى مكونات

ينبغي أن يكون للمكونات position:relative, ، لا padding و لا margin, ، معظم الوقت.يؤدي هذا إلى تبسيط قواعد % كثيرًا، فضلاً عن السماح بقواعد أكثر بساطة absolute:position'ing العناصر، لأنه إذا كانت هناك حاوية ذات موضع مطلق، فإن العنصر ذو الموضع المطلق سيستخدم الحاوية عند الحوسبة top, right, bottom, left ملكيات.

عادةً ما تكون معظم عناصر DIV في مستند HTML5 مكونًا.

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

الذهاب مع مثال صفحة ضمان الجودة مرة أخرى:

#navigation
#question
#answers
#answers .answer
etc.

من خلال تقسيم الصفحة إلى مكونات، فإنك تقسم عملك إلى وحدات يمكن التحكم فيها.

ضع القواعد ذات التأثير التراكمي على نفس السطر.

على سبيل المثال border, margin و padding (لكن لا outline) كلها تضيف إلى أبعاد وحجم العنصر الذي تقوم بتصميمه.

position: absolute; top: 10px; right: 10px;

إذا لم تكن قابلة للقراءة على سطر واحد، على الأقل ضعها على مقربة:

padding: 10px; margin: 20px;
border: 1px solid black;

استخدم الاختصار عندما يكون ذلك ممكنًا:

/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;

لا تكرر محددًا أبدًا

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

#some .selector {
    margin: 0;
    font-size: 11px;
}
...
#some .selector {
    border: 1px solid #000;
    margin: 0;
}

تجنب استخدام TAGs كمحددات، عندما يمكنك استخدام id/classes

أولاً، تُعد علامتا DIV وSPAN الاستثناء:يجب ألا تستخدمها أبدًا، أبدًا!؛) استخدمها فقط لإرفاق فئة/معرف.

هذا...

div#answers div.answer table.statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
    outline: 3px solid #000;
}

ينبغي أن يكتب مثل هذا:

#answers .answer .statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

لأن وحدات DIV المتدلية الإضافية لا تضيف شيئًا إلى المحدد.كما أنهم يفرضون قاعدة علامات غير ضرورية.لو تغير مثلا .answer من div إلى أ article سوف ينكسر أسلوبك.

أو إذا كنت تفضل المزيد من الوضوح:

#answers .answer .statistics {
    color: pink;
    border: 1px solid #000;
}
#answers .answer table.statistics {
    border-collapse: collapsed;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

والسبب هو border-collapse الخاصية هي خاصية خاصة لا تكون منطقية إلا عند تطبيقها على أ table.لو .statistics ليس table لا ينبغي أن تنطبق.

القواعد العامة شريرة!

تجنب كتابة القواعد العامة/السحرية إذا استطعت
ما لم يكن الأمر يتعلق بإعادة تعيين/إلغاء تعيين CSS، فيجب أن ينطبق كل سحرك العام على مكون جذر واحد على الأقل

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

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

أشياء مثل هذه ...

.badges {
    width: 100%;
    white-space: nowrap;
}

address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

...لديه نفس مشكلة استخدام المتغيرات العامة في لغة البرمجة.تحتاج إلى منحهم المجال!

#question .userinfo .badges {
    width: 100%;
    white-space: nowrap;
}

#answers .answer .userinfo address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

في الأساس يقرأ على النحو التالي:

components                   target
---------------------------- --------
#answers .answer   .userinfo address
-------- --------- --------- --------
domain   component component selector

أحب استخدام المعرفات عندما يكون المكون الذي أعرفه منفردًا على الصفحة؛قد تكون احتياجاتك مختلفة.

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

لنفترض أن لديك pagination عنصر.يمكنك استخدامه في العديد من الأماكن عبر موقعك.سيكون هذا مثالًا جيدًا على الوقت الذي ستكتب فيه قاعدة عامة.دعنا نقول لك display:block روابط رقم الصفحة الفردية ومنحها خلفية رمادية داكنة.لكي تكون مرئية، يجب أن تكون لديك قواعد مثل هذه:

.pagination .pagelist a {
    color: #fff;
}

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

#answers .header a {
    color: #000;
}
...
.pagination .pagelist a {
    color: #fff;
}

وهذا سيجعل الروابط البيضاء الخاصة بك سوداء، وهو ما لا تريده.

الطريقة الخاطئة لإصلاحه هي:

.pagination .pagelist a {
    color: #fff !important;
}

والطريقة الصحيحة لإصلاحه هي:

#answers .header .pagination .pagelist a {
    color: #fff;
}

التعليقات "المنطقية" المعقدة لا تعمل :)

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

أبقِ تعليقاتك بسيطة؛إذا كنت بحاجة إلى "عمليات منطقية" ففكر في إحدى لغات قوالب CSS مثل ساس أو أقل.

كيف يمكنك أن أكتب لوحة الألوان؟

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

على سبيل المثال.

#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
    color: #222; background: #fff; 
    border-radius: 10px;
    padding: 1em;
}

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

أسماء أقل، تتطلب ذاكرة أقل، مما يجعل قراءة التعليمات البرمجية أسهل

استخدام أسماء أقل هو الأفضل.من الأفضل استخدام كلمات بسيطة جدًا (وقصيرة!):النص، الجسم، الرأس.

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

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

تنظيف بعد نفسك

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

إذا كنت، كما اقترحت، تعامل مع بعض الحاويات على أنها صناديق سوداء (مكونات) بأسلوبك، واستخدمت تلك المكونات في محدداتك، واحتفظت بكل شيء في ملف واحد مخصص (أو قمت بتقسيم ملف بشكل صحيح باستخدام جدول المحتويات والرؤوس)، فإن العمل أسهل بكثير..

يمكنك استخدام أداة مثل امتداد Dust-Me Selectors لمتصفح فايرفوكس (نصيحة:قم بتوجيهه إلى sitemap.xml الخاص بك) لمساعدتك في العثور على بعض الأشياء غير المرغوب فيها المخفية في أسلحة CSS النووية وcarnies.

احتفظ ب `unsorted.css` ملف

لنفترض أنك تقوم بتصميم موقع ضمان الجودة، وأن لديك بالفعل ورقة أنماط لـ "صفحة الإجابات"، والتي سنسميها answers.css.إذا كنت تريد الآن إضافة الكثير من ملفات CSS الجديدة، فأضفها إلى ملف unsorted.css ورقة الأنماط ثم أعد تصميمها في ملفك answers.css ورقة الأنماط.

عدة أسباب لذلك:

من الأسرع إعادة البناء بعد الانتهاء، ومن ثم البحث عن القواعد (التي ربما لا تكون موجودة) وإدخال التعليمات البرمجية
ستكتب أشياء ستزيلها، وحقن الكود يزيد من صعوبة إزالة هذا الكود
يؤدي الإلحاق بالملف الأصلي بسهولة إلى تكرار القاعدة/المحدد

وإلقاء نظرة على 1. ساس 2. البوصلة

وأفضل طريقة رأيتها لسخام مكافحة CSS تستخدم الشيئية مبادئ CSS.

وهناك حتى إطارا OOCSS الى ان هناك امر جيد إلى حد ما.

وقال

وبعض الأيديولوجيات تتعارض مع الكثير من ما كنا هنا في الجزء العلوي الإجابات ولكن بمجرد أن تعرف كيفية CSS مهندس بطريقة الشيئية سترى أنه عمل فعلا في الحفاظ على كود العجاف والمتوسط.

والشيء الرئيسي هنا هو تحديد "كائنات" أو بناء أنماط كتلة في موقعك والمهندس معهم.

والفيسبوك وظفت خالق OOCSS، نيكول سوليفان للحصول على الكثير من المدخرات في التعليمات البرمجية الواجهة الأمامية الخاصة بهم (HTML / CSS). نعم يمكنك فعلا الحصول على وفورات ليس فقط في CSS، ولكن في HTML الخاص بك أيضا، والتي على صوت ذلك، من الممكن جدا بالنسبة لك كما ذكرتم تحويل تخطيط يستند table في الكثير من div ل

ونهج عظيم آخر يشبه في بعض الجوانب لOOCSS، هو خطة وكتابة CSS لتكون قابلة للتطوير وحدات من البداية. جوناثان سنوك فعلت الكتابة الرائعة حتى وكتاب / يبوك حول <لأ href = "http://smacss.com" يختلط = "noreferrer"> SMACSS - قابلة للتطوير وحدات الهندسة المعمارية لCSS

واسمحوا لي أن ربط لكم مع بعض الروابط:
5 أخطاء CSS هائل - (فيديو )
5 أخطاء CSS هائل - (الشرائح)
CSS انفخ - (الشرائح)

ويجب عليك أيضا أن نفهم شلال، والوزن، وكيفية عملها.

وألاحظ أنك تستخدم معرفات الطبقة الوحيدة (div.title). هل تعلم أنه يمكنك استخدام معرفات كذلك، وهذا معرف يحمل وزنا أكبر من فئة؟

وعلى سبيل المثال،

#page1 div.title, #page1 ul, #page1 span {
  // rules
}

وسوف تجعل كل تلك العناصر تتقاسم حجم الخط، مثلا، أو اللون، أو أيا كان القواعد الخاصة بك هي. يمكنك حتى جعل كل عناصر div التي هي من نسل # page1 الحصول على بعض القواعد.

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

وأعتقد أنه من مثل أرقام. A 9 في تلك الأعمدة لا يزال أقل من واحد في العمود عشرات. A محدد مع محدد الهوية، ومحدد فئة، واثنين من المتخصصين عنصر، سيكون هناك المزيد من الوزن من محدد مع عدم وجود ID، 500 محددات الطبقة والمتخصصين 1000 عنصر. وهذا مثال سخيف، بالطبع، ولكن تحصل على هذه الفكرة. وهذه النقطة هي، وتطبيق هذا المفهوم يساعدك على تنظيف الكثير من CSS.

وراجع للشغل، إضافة محدد عنصر إلى فئة (div.title) ليست ضرورية إلا إذا كنت تقوم بتشغيل إلى صراعات مع العناصر الأخرى التي لها الطبقة = "اللقب". لا تضيف وزنا لا لزوم له، لأنك قد تحتاج إلى استخدام هذا الوزن في وقت لاحق.

ومايو أقترح إطار أقل CSS الحيوي

وويشبه ساس كما ذكر في وقت سابق.

وويساعد في الحفاظ على CSS في الفئة الأصل.

ومنها مثلا.

 #parent{     
  width: 100%;

    #child1
    {    
     background: #E1E8F2;    
     padding: 5px;    
    }

    #child2
   {
     background: #F1F8E2;
     padding: 15px
   }
 }

ماذا يعني هذا: وينطبق العرض: 100٪ على حد سواء # child1 و# child2

وأيضا، # محددة CSS child1 ينتمي إلى #parent.

وهذا من شأنه أن يجعل ل

#parent #child1
{
 width: 100%;
 background: #E1E8F2;
 padding: 5px;
}

#parent #child2
{
 width: 100%;
 background: #F1F8E2;
 padding: 15px;
}

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

أميل إلى تنظيم ملفات CSS الخاصة بي تقريبًا مثل هذا:

إعادة تعيين CSS، على أساس إريك ماير.(لأنني بخلاف ذلك، أجد أنه بالنسبة لمعظم العناصر، لدي قاعدة أو قاعدتان على الأقل تعملان فقط على إعادة تعيين أنماط المتصفح الافتراضية - على سبيل المثال، لا تبدو معظم قوائمي مثل نمط HTML الافتراضي للقوائم.)
نظام الشبكة CSS إذا كان الموقع يستدعي ذلك.(أنا أبني على 960.gs)
أنماط المكونات التي تظهر في كل صفحة (الرؤوس والتذييلات وما إلى ذلك)
أنماط المكونات المستخدمة في أماكن مختلفة عبر الموقع
الأنماط ذات الصلة بالصفحات الفردية فقط

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

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

يبدو أنك تسير على الطريق الصحيح فيما يتعلق بتسمية دلالات، ولكن يمكن أن تخطو خطوة إلى الأمام.يمكن اعتبار أقسام HTML التي تظهر بشكل متكرر على الموقع دون تعديل هيكلي (المعروفة باسم "الوحدات النمطية") جذورًا محددة، ومن هناك يمكنك تحديد نطاق التخطيط الداخلي المتعلق بهذا الجذر.هذا هو المبدأ الأساسي ل CSS موجهة للكائنات, ، ويمكنك اقرأ/شاهد المزيد عنها في هذه المحادثة التي أجراها أحد مهندسي Yahoo.

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

أخيرًا، هل ستحصل على ملف CSS واحد لموقعك بأكمله، أو ملفات متعددة (ملف أساسي واحد يستخدم مع ملفات لكل صفحة أو قسم)؟يعد الملف الفردي أفضل من حيث الأداء، ولكن قد يكون من الصعب فهمه أو صيانته مع أعضاء فريق متعددين، وقد يكون من الصعب اختباره.للاختبار، أوصي أن يكون لديك صفحة اختبار CSS واحدة يتضمن كل وحدة CSS مدعومة لاختبار التصادمات والتسلسل غير المقصود.

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

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

كما قال قبلي:ادخل إلى OOCSS.يعد استخدام Sass/Less/Compass أمرًا مغريًا، ولكن حتى يتم استخدام Vanilla CSS بالطريقة الصحيحة، فإن Sass/Less/Compass لن يؤدي إلا إلى تفاقم الأمور.

أولاً، اقرأ عن CSS الفعال.جرب Google Page Speed واقرأ ما كتبه Souders عن CSS الفعال.

ثم أدخل OOCSS.

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

سوف يحدث ثورة في كل جزء من كتابة CSS.أنا متجدد تمامًا وأحب ذلك.

تحديث:SMACSS يشبه OOCSS، ولكن من الأسهل التكيف معه بشكل عام.

المبادئ الأساسية لـ CSS المعقولة، مستخرجة من إعادة هيكلة CSS:من الإلحاق فقط إلى CSS المعياري

اكتب في ساس. سيكون من الجنون أن تتخلى عن مزايا المتغيرات والخلطات وما إلى ذلك.

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

قم بتسمية فئات CSS الخاصة بك حسب وظيفتها المرئية بدلاً من وظيفتها الخاصة بالتطبيق. على سبيل المثال ، قل ". highlight-box" بدلاً من ".bundle-product-discount-box".يعني الترميز بهذه الطريقة أنه يمكنك إعادة استخدام صفائح الأسلوب الحالية عندما تقوم بدور الأعمال الجانبية.على سبيل المثال ، بدأنا في بيع ملاحظات القانون ولكننا انتقلنا مؤخرًا إلى معلمي القانون.تحتوي فصول CSS القديمة لدينا على أسماء مثل ".download_document_box" ، وهو اسم فئة منطقي عند الحديث عن المستندات الرقمية ولكنه لا يربك إلا عند تطبيقه على المجال الجديد للمعلمين الخاصين.الاسم الأفضل الذي يناسب كل من الخدمات الحالية - وأي منها مستقبلية - سيكون ".pretty_callout_box".

تجنب تسمية فئات CSS بعد معلومات الشبكة المحددة. كان هناك (وما زال) مخيفًا لمكافحة النشرات في مجتمعات CSS حيث مصممي ومبدعين من أطر CSS (السعال تويتر بوتستراب) نعتقد أن "span-2" أو "cols-8" هي أسماء معقولة لفئات CSS.الهدف من CSS هو إعطائك إمكانية تعديل التصميم الخاص بك دون التأثير على الترميز (كثيرًا).يحبط أحجام الشبكات المتشددين في HTML هذا الهدف ، لذلك يُنصح في أي مشروع يتوقع أن يستمر لفترة أطول من عطلة نهاية الأسبوع.المزيد عن كيفية تجنب دروس الشبكة لاحقًا.

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

تقليل التعشيش. تقديم فئات جديدة بدلاً من تداخل المحددات.حقيقة أن Sass يزيل ألم متكرر المحددات عندما لا يعني التعشيش أنه يتعين عليك أن تعشق خمسة مستويات عميقة.لا تفرط مطلقًا في تأهيل المحدد (على سبيل المثال.لا تستخدم "UL.NAV" حيث ".NAV" يمكن أن تفعل نفس المهمة.) ولا تحدد عناصر HTML إلى جانب اسم الفئة المخصصة (على سبيل المثال "H2.Highlight").بدلاً من ذلك ، استخدم اسم الفصل بمفرده وإسقاط المحدد الأساسي (على سبيل المثاليجب أن يكون المثال السابق ". Highlight").لا يضيف المحددات الإفراط في التأهيل أي قيمة.

إنشاء أنماط لعناصر HTML (على سبيل المثال."h1") فقط عند تصميم المكونات الأساسية التي يجب أن تكون متسقة في التطبيق بأكمله.تجنب محددات واسعة مثل "Header UL" لأنه من المحتمل أن تضطر إلى تجاوزهم في بعض الأماكن على أي حال.بينما نستمر في القول ، في معظم الأوقات تريد استخدام فصل محدد يحمل اسمًا جيدًا كلما أردت نمطًا معينًا.

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

وهناك الكثير من الأوقات سوف أرى الأفراد كسر ملف للخروج الى أقسام، مع تعليق عنوان بين المقاطع.

وشيء من هذا القبيل

/* Headings and General Text */

.... stuff here for H1, etc..

/* Main page layout */

.... stuff here for layout page setup etc.

وكان يعمل بشكل جيد جدا، ويمكن أن تجعل من السهل أن أعود في وقت لاحق وتجد ما تعمل عليه.

يجب أن تنظر بيم.

نظرية

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

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

تفعل الأنماط ما تتوقعه عند إضافتها إلى عنصر ما
لا تتسرب الأنماط وتؤثر فقط على ما تمت إضافتها إليه
يتم فصل الأنماط تمامًا عن بنية المستند
لا يلزم إجبار الأنماط على تجاوز بعضها البعض

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

يمكن أن تكون هناك مقالة أكثر تعمقًا من Smashing Magazine وجدت هنا;وواحدة من هاري روبرتس من CCS Wizardry (الذي يجب أن يقرأه أي شخص مشارك في CSS) هنا.

في التمرين

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

عندما أستخدم BEM في العالم الحقيقي، أقوم بتعزيز هذه التقنية من خلال بضعة مبادئ إضافية.أستخدم فئات المرافق - ومن الأمثلة الجيدة على ذلك فئة المجمع:

.page-section {
    width: 100%;
}
@media screen and (min-width: 1200px) {
    margin: 0 auto;
    width: 1200px;
}

وأنا أعتمد أيضًا إلى حد ما على التتالي والخصوصية.هنا ستكون وحدة BEM .primary-box و ال .header سيكون السياق لتجاوز محدد

.header {
  .primary-box {
    color: #000;
  }
}

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

نقطة أخيرة أود أن أشير إليها هنا هي أنه مهما بدا مشروعك صغيرًا وغير معقد، فيجب عليك القيام بذلك من البداية، وذلك لسببين:

تزداد المشاريع تعقيدًا، لذا فإن وضع أسس جيدة أمر مهم، بما في ذلك CSS
حتى المشروع الذي يبدو بسيطًا لأنه مبني على WordPress يحتوي على القليل من JavaScript يمكن أن يظل معقدًا للغاية في CSS - حسنًا، ليس عليك القيام بأي ترميز من جانب الخادم، لذا فإن هذا الجزء بسيط، ولكن الواجهة الأمامية للكتيب يحتوي على عشرين وحدة وثلاثة أشكال مختلفة لكل منها:لديك بعض ملفات CSS المعقدة جدًا هناك!

مكونات الويب

في عام 2015، بدأنا في النظر إلى مكونات الويب.لا أعرف الكثير عن هذه الأمور حتى الآن، لكنهم يتطلعون إلى جمع كل وظائف الواجهة الأمامية معًا في وحدات مستقلة بذاتها، ويحاولون بشكل فعال تطبيق أنواع المبادئ من BEM إلى الواجهة الأمامية ككل وتقسيم المكونات إلى أجزاء متفرقة ولكنها مقترنة بالكامل عناصر مثل أجزاء DOM وJs (MVC) وCSS التي تقوم جميعها بإنشاء نفس عنصر واجهة المستخدم.

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

هناك بعض القراءة الإضافية هنا وأيضا الإطار البوليمر هنا وهو يستحق نظرة

أخيراً

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

وأنصح لك أن ننظر إلى "البوصلة نمط" الإطار CSS .

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

وبهذه الطريقة يكون لديك أفضل من كلا العالمين، ويزيد الأداء (أقل HTTP يطلب المطلوبة من المستعرض) وفصل الاهتمامات كود بينما تتطور.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow