Tufte-css: تنسيق CSS

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

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

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

كما أنه يمنعني من العودة للحصول على التحديثات التي كان من السهل دمجها.

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

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

مع تحياتي،

@ yb66 تحويل

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

أنا أدرك أيضًا مشكلة التغليف الناعم.

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

أحد الخيارات هو stylelint.io ولكن هناك

تحرير: القواعد

أعني ، لقد حصلنا على قسم CSS Style Guide في README منذ الأيام التي جابت فيها الديناصورات الأرض وتم إرسال الالتزامات عن طريق السفن عبر المحيط الأطلسي. كانت سياستي في فرض هذا المعيار

1. نأمل أن يتوافق الناس
2. قبول العلاقات العامة بغض النظر
3. يدويًا إجبار التعليمات البرمجية غير المتوافقة على الامتثال

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

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

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

دعنا نقارن التنسيق الحالي بخيارين آخرين A و B.

تيار:

.table-caption { float:right;
                 clear:right;
                 margin-right: -60%;
                 width: 50%;
                 margin-top: 0;
                 margin-bottom: 0;
                 font-size: 1.0rem;
                 line-height: 1.6; }

.sidenote-number { counter-increment: sidenote-counter; }

.sidenote-number:after, .sidenote:before { content: counter(sidenote-counter) " ";
                                           font-family: et-book-roman-old-style;
                                           position: relative;
                                           vertical-align: baseline; }

.sidenote-number:after { content: counter(sidenote-counter);
                         font-size: 1rem;
                         top: -0.5rem;
                         left: 0.1rem; }

.sidenote:before { content: counter(sidenote-counter) " ";
                   top: -0.5rem; }

blockquote .sidenote, blockquote .marginnote { margin-right: -82%;
                                               min-width: 59%;
                                               text-align: left; }    

p, footer, table, div.table-wrapper-small, div.supertable-wrapper > p, div.booktabs-wrapper { width: 55%; }

الخيار أ

.table-caption               { float:right;
                               clear:right;
                               margin-right: -60%;
                               width: 50%;
                               margin-top: 0;
                               margin-bottom: 0;
                               font-size: 1.0rem;
                               line-height: 1.6; }

.sidenote-number             { counter-increment: sidenote-counter; }

.sidenote-number::after,
.sidenote::before            { content: counter(sidenote-counter) " ";
                               font-family: et-book-roman-old-style;
                               position: relative;
                               vertical-align: baseline; }

.sidenote-number::after      { content: counter(sidenote-counter);
                               font-size: 1rem;
                               top: -0.5rem;
                               left: 0.1rem; }

.sidenote::before            { content: counter(sidenote-counter) " ";
                               top: -0.5rem; }

blockquote .sidenote,
blockquote .marginnote       { margin-right: -82%;
                               min-width: 59%;
                               text-align: left; }    

p,
footer,
table,
div.table-wrapper-small,
div.supertable-wrapper > p,
div.booktabs-wrapper         { width: 55%; }

الخيار ب:

.table-caption {
  float: right;
  clear: right;
  margin-right: -60%;
  width: 50%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.0rem;
  line-height: 1.6;
}

.sidenote-number {
  counter-increment: sidenote-counter;
}

.sidenote-number::after,
.sidenote::before {
  content: counter(sidenote-counter) " ";
  font-family: et-book-roman-old-style;
  position: relative;
  vertical-align: baseline;
}

.sidenote-number::after {
  content: counter(sidenote-counter);
  font-size: 1rem;
  top: -0.5rem;
  left: 0.1rem;
}

.sidenote::before {
  content: counter(sidenote-counter) " ";
  top: -0.5rem;
}

blockquote .sidenote,
blockquote .marginnote {
  margin-right: -82%;
  min-width: 59%;
  text-align: left;
}

p,
footer,
table,
div.table-wrapper-small,
div.supertable-wrapper > p,
div.booktabs-wrapper {
  width: 55%;
}

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

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

سأختار الخيار ب أيضًا. ألا توجد طريقة لتحديد تنسيق يمكن للبشر قراءته وقراءته آليًا للعديد من المُنسِّقات / الوبر؟

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

من فضلك ، إذا كان لديك دقيقة ، ألق نظرة على الالتزام (https://github.com/edwardtufte/tufte-css/commit/bfbe3b5c50ee450ba09122f1506233edf6a97ffe) واسمحوا لي أن أعرف إذا أ) أي مسافة بادئة أو عبارات يمكن توحيدها بشكل أكبر ، أو ب) لاحظت أي تغييرات في التنفيذ. (لم أقم بتنفيذ أي طريقة لاختبار التغييرات باستثناء التمرير يدويًا عبر نموذج المستند.)

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

daveliepmann تبدو رائعة. شكرا جزيلا للقيام بذلك.

@ yb66 هل ... هل

serussell أليس CSS صحيحًا SCSS؟

adamschwartz : يخطر ببالي ؛ أنا لست مطور ويب. لكن يبدو أنك على حق: SCSS هي مجموعة شاملة من CSS. اخبارسعيدة يا جماعة!

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