css - ماهو - إلى أي مدى يجب أن تفكك أوراق الأنماط؟




اكواد css (8)

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

وتتمثل إحدى الأفكار في ما يلي:

  • reset.css
  • typography.css
  • layout.css
  • colors.css

ولكن أين يمكنني رسم الخط؟ نظريا أستطيع أن أذهب على وكسر لهم إلى الطبقات، إدس الخ، ولكن أعتقد أن ذاهب الذهاب.

هل هذا يبدو طريقة معقولة؟

https://code.i-harness.com


Pickledegg،

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

أود أن أوصي الخروج مع النظام الخاص بك لفصل القواعد الخاصة بك في الملفات، والعصا معها لجميع المشاريع الخاصة بك.


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

<body>
<!--[if IE 7]><div class="IE IE7"><![endif]-->
<!--[if IE 6]><div class="IE IE6"><![endif]-->

... rest of markup ...

<!--[if IE]></div><![endif]-->
</body>

لست متأكدا مما يفكر به الناس في هذا النهج، ولكن الترميز الإضافي لا يكاد يذكر، والقدرة على تضمين أنماط IE6 / 7 بجوار الأنماط الرئيسية دون استخدام الخارقة ... فقط بريبندينغ المحدد مع ".IE" أو ".IE6 "الخ، هو راحة كبيرة.

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

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


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

ولكن إذا ذهبت بعيدا جدا في هذا سوف ينتهي بك الأمر مع قواعد مكررة في كل مكان (على سبيل المثال #content وجود قاعدة الخط الأسرة في typography.css، قاعدة اللون في colors.css، الخ). هذه ليست طريقة منطقية لتقسيم الأمور ما لم تتوقع التغييرات الرئيسية التي ستحدث هناك.

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

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


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

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

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


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


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

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


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

يتم تنظيم أوراق نمط في مخطط-كس على النحو التالي:

  • screen.css - الأنماط الافتراضية للشاشات
  • print.css - الأنماط الافتراضية للطباعة
  • ie.css - إصلاحات إنترنت إكسبلورر محددة
  • application.css - يحتوي على الأنماط التي تكتبها. في الواقع يجب أن لا تعديل أوراق النمط الثلاثة السابقة على الإطلاق، لأن يتم إنشاؤها بواسطة مخطط-كس. يمكنك الكتابة فوق كافة أنماط مخطط-كس في ملف application.css الخاص بك.

لمزيد من التفاصيل، يرجى الرجوع إلى مستودع جيت-بلينت-كس.


أنا كسر الألغام بالضبط تقريبا بنفس الطريقة:

  • reset.ccs - إعادة تعيين القياسية من ميروب
  • typography.css - الخطوط، الأحجام، خط-- مرتفعات، الخ
  • layout.css - كل المواقع، العوامات، المحاذاة، الخ.
  • color.css (أو أكثر ملاءمة skin.css) - جميع الألوان، صور الخلفية، الخ.

ثم يتم اتباع هذه الملفات مع إي محددة المدرجة عن طريق التعليقات الشرطية للإصدار المناسب.

لم أكن بحاجة إلى فصلهم أكثر، على الرغم من أنني تنظيم كل ملف في أقسام منفصلة (عناصر أساسية، عناصر اسمها، والطبقات، وما إلى ذلك)

تحديث: لقد غيرت نظام بلدي قليلا في المشاريع القليلة الماضية لقد فعلت.

  • base.css - يحتوي على كس من يوي إعادة تعيين وملفات كس قاعدة يوي (مع الإسناد)
  • main.css - يحتوي على بياناتimport لما يلي:
    • typography.css - الخطوط، الأحجام، خط-- مرتفعات، الخ
    • layout.css - كل المواقع، العوامات، المحاذاة، الخ.
    • theme.css - كل الألوان وصور الخلفية وما إلى ذلك.
  • print.css - تجاوزات لملفات كس الأخرى لجعل الصفحات ملائمة للطباعة.

ثم أيضا استخدام التعليقات الشرطية لإضافة أي ملفات كس محددة إي إذا لزم الأمر.

وستكون الخطوة التالية في تحسين ذلك إضافة خطوة بناء عملية لدمج كل ملفات كس في ملف واحد لتقليل طلبات هتب على الخادم.







css