هل هذه هي الطريقة التي ستبني بها ورقة أنماط CSS الخاصة بك؟

StackOverflow https://stackoverflow.com/questions/182528

  •  06-07-2019
  •  | 
  •  

سؤال

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

/* بناء */

يجب وضع أي عناصر لتخطيط القالب هنا، مثل الرأس والتذييل والنص وما إلى ذلك.

/* نهاية الهيكل */

/* المكونات المشتركة*/

العناصر المتكررة، مثل نماذج التسجيل والقوائم وما إلى ذلك.

/* نهاية المكونات المشتركة*/

/* صفحة محددة 1 */

قد تحتوي بعض الصفحات على أنماط محددة، والتي يمكن وضعها هنا.

/* نهاية الصفحة 1 المحددة */

/* صفحة محددة 2 */

على النحو الوارد أعلاه

/* نهاية الصفحة 2 المحددة */

/* صفحة محددة وما إلى ذلك */

وما إلى ذلك وهلم جرا.

/* نهاية الصفحة المحددة وما إلى ذلك */

هل كانت مفيدة؟

المحلول

وهذا هو مماثل لكيفية الألغام I هيكل، ومع ذلك، أجد أن استخدام الفرعي العناوين هو أفضل طريقة للقيام بذلك، لذلك يمكنني استخدام هذه البنية:

و/ *************************  * العالمي *  ************************* /

/ * جميع من الاشياء المشتركة يذهب هنا تحت العناوين الفرعية المناسبة * /

/ * العنوان التنسيق * /

/ * تنسيق النص * /

/ * نموذج تنسيق * /

/ * الجدول التنسيق * /

/ * وما * /

و/ *************************  * نسق *  ************************* /

/ * كل الأشياء تخطيط تذهب هنا تحت عناوين فرعية * /

/ * رأس * /

/ * اليسار الشريط الجانبي * /

و/ * الحق الشريط الجانبي * /

/ * تذييل * /

و/ *************************  * التنقل *  ************************* /

/ * أضع الملاحة منفصل للتخطيط كما يمكن أن يكون هناك عدد من النقاط الملاحة تحت بهم العناوين الفرعية * /

و/ * الرئيسية (أفقي) الملاحة * /

/ * اليسار الملاحة * /

و/ * الحق الملاحة * /

/ * التفصيلي الملاحة * /

و/ *************************  * نماذج *  ************************* /

/ * أي شكل التنسيق الذي يختلف من التنسيق المشتركة، وإذا كان هناك عدة أشكال منسقة بشكل مختلف، ثم استخدم الفرعي العناوين * /

و/ *************************  * الجداول *  ************************* /

/ * نفس التعامل كأشكال * /

و/ *************************  * * LISTS  ************************* /

/ * نفس الصفقة حيث الأشكال والجداول * /

و/ *************************  * يحتوي *  ************************* /

/ * أي تنسيق معين لصفحات معينة، مجمعة حسب العناوين الفرعية للصفحة بنفس الطريقة التي الأشكال والجداول والقوائم * /

و/ *************************  * CSS SUPPORT *  ************************* /

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

.float-right { float: right; }
.float-left { float: left; }
.float-center { margin-left: auto; margin-right: auto; }
.clear { clear: both }
.clear-block { display: block }
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.bold { font-weight: bold }
.italic { font-style: italic }
.underline { border-bottom: 1px solid }
.nopadding { padding: 0 }
.nobullet { list-style: none; list-style-image: none }

/ * وما * /

وعلى أمل أن يساعد.

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

لتنسيق أوصي هذا الهيكل:

.class {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
}

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

نصائح أخرى

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

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

أقوم بتنظيم CSS الخاص بي بطريقة مشابهة لطريقة تنظيمك ولكنني أبدأ بقسم إعادة التعيين.الفكرة الرئيسية هي الانتقال من العام إلى الخاص.لذلك هنا يذهب:

  • إعادة ضبط
  • بناء
  • html_tags
  • ملاحة
  • أقسام محددة
  • رسائل الخطأ - هذا هو القسم الأخير

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

ويبدو أن في كل مرة أقوم بإنشاء ملف المغلق الجديد، وإيجاد وسيلة جديدة لتنظيم ذلك. وهم ALL أفضل من السابق.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top