CSS الاتفاقيات / رمز تخطيط نماذج [مغلقة]

Question

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

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

أي أفكار ؟

Answer 1

وناتالي أسفل من ClearLeft الشهرة أنتجت عرض الشرائح عظيم حقا تغطية هذا الموضوع وأكثر HTTP : //natbat.net/2008/Sep/28/css-systems/

وتنزيل PDF كما يتضمن الكثير من المعلومات من عرض الشرائح. أود أن أوصى هذا إلى المشروعات الإنمائية CSS من جميع مستويات المهارة.

Answer 2

هذا هو كل شيء شخصي جدا وكالعادة رمز تنسيق المناقشات وأنا لا أعرف من أي اتفاقيات رسمية.

طريقة لقد اخترت استخدام كل صغيرة فئات معرفات مع يؤكد فصل الكلمات (#page_container على سبيل المثال).أعلن كل الوسم أنماط الأولى (html, body, ul, ، الخ) ، ثم جميع الطبقات و هويات مرتبة أبجديا.بالإضافة إلى ذلك, كل الأنماط المحددة في كل فئة, id, أو الوسم يتم تعريف أبجديا كذلك.باستخدام هذه الاتفاقية يجعل من السهل تتبع نمط معين.

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

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

وهنا كامل سبيل المثال أن تعطيك فكرة:

body { background-color: #fff; color: #999; font-family: verdana, arial, helvetica, sans-serif; font-size: 76%; padding: 0; margin: 0; }
a { color: #2c5eb4; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { color: #f70; font-family: helvetica, verdana, arial, serif; font-weight: bold; margin: 1.2em 0; }
h1 { font-size: 2.4em; line-height: 1.2em;  margin-bottom: 0em; margin-top: 0em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; font-weight: bold; }
h5 { font-size: 1.0em; font-weight: bold; }
h6 { font-size: 0.8em; font-weight: bold; }
img { border: 0; }
li, ol, ul { font-size: 1.0em; line-height: 1.8em; list-style-position: inside; margin-bottom: 0.1em; margin-left: 0; margin-top: 0.2em; }
#content { clear: both; margin: 0; margin-top: -4em; }
#columns { height: 36em; }
#column1, #column2, #column3, #column4 { border-right: 1px solid #dbdbdb; float: left; width: 18%; margin: 0 0.5em; padding: 0 1em; height: 100%; }
#column1 { width: 28%; }
#column1 input { float: right; }
#column1 label { color: #999; float: left; }
#column2 a, #column3 a { font-weight: bold; }
#column4 { border-right: 0; }
#form { margin: 0 2em; }
.help_button { float: right; text-align: right; width: 30px; }

Answer 3

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

el {
    display:;
    float:;
    clear:;
    visibility:;
    position:;
    top:;
    right:;
    bottom:;
    left:;
    z-index:;
    width:;
    min-width:;
    height:;
    min-height:;
    overflow:;
    margin:;
    padding:;
    border:;
    border-top:;
    border-right:;
    border-bottom:;
    border-left:;
    border-width:;
    border-top-width:;
    border-right-width:;
    border-bottom-width:;
    border-left-width:;
    border-color:;
    border-top-color:;
    border-right-color:;
    border-bottom-color:;
    border-left-color:;
    border-style:;
    border-top-style:;
    border-right-style:;
    border-bottom-style:;
    border-left-style:;
    border-collapse:;
    border-spacing:;
    outline:;
    list-style:;
    font:;
    font-family:;
    font-size:;
    line-height:;
    font-weight:;
    text-align:;
    text-indent:;
    text-transform:;
    text-decoration:;
    white-space:;
    vertical-align:;
    color:;
    opacity:;
    background:;
    background-color:;
    background-image:;
    background-position:;
    background-repeat:;
    cursor:;
    }

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

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

وCSS لا يملك في الواقع أي اتفاقية محددة للبنية التعليمات البرمجية. لذلك يأتي نزولا الى ما يعمل على نحو أفضل بالنسبة لك.

Answer 4

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

Answer 5

يجب حدي الملفات، حتى تتمكن من الاستفادة من @imports. أنا عادة لديك ملف base.css للفئات أساسية (مثل الطباعة والألوان). اعتمادا على بنية موقعك، قد يكون من المفيد أن يكون أيضا CSS "جزئيات" أخرى لإعادة استخدام في جميع أنحاء الأنماط التي تواجه المستخدم. ويمكن لهذه الأنماط سليل توسيع قاعدة الأنماط مع مزيد من التفاصيل حسب الحاجة (على سبيل المثال، قد تحصل على .warn {color:red;} مدد p.warn {font-style:italic;}، أو h1.warn {border:5px solid red;})، وهو نمط تصميم كبير لتنفيذ ما يسمى <لأ href = "http://github.com/ stubbornella / oocss / ويكي "يختلط =" نوفولو "> وجوه المنحى CSS .

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

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

إذا كنت لا يمكن استخدام ساس لسبب ما، وأنا قد تقليد التعشيش نمط (ما زلت غير متأكد ما إذا كان هذا هو العمل بها أو لا)، كما يلي:

@import url('/css/base.css');

a {
  color:#369;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: underscore; }
  a img {
    border: 0; }

blockquote, .nav, p {
  margin-bottom: 10px; }
blockquote {
  background: #eee;
  padding: 10px; }

h1, h2, h3, h4 {
  font-family: Georgia, serif; }
h1.warning {
  border: 5px solid red; }

.nav a {
  font-size: 150%;
  padding: 10px; }
.nav li {
  display: inline-block; }

p.warning {
  font-style: italic; }
  p.warning a {
    background: #fff;
    border-bottom: 2px solid #000;
    padding: 5px; }
  p.warning .keyword {
    text-decoration: underline; }

ولسوء الحظ، قد بحث عن هامش للp ولا يدرك أنه جزء من blockquote, .nav, p. وهذا أيضا ليس للغاية "وجوه المنحى" التصميم، ولكن من الأفضل القول من وضع سلاسل من الطبقات على تقريبا كل العناصر التي يتطلب التصميم.

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