هل تقصد المحدد الزائف :empty ؟

http://reference.sitepoint.com/css/pseudoclass-empty

لا ، ربما كان ينبغي أن أسميها "قاعدة" ؛)
انا اعني ذلك

.selector {}
a.nother{
   .selector {}
}

يتم حذفهم عند التحويل البرمجي إلى css

لماذا تريد الاحتفاظ بها؟ إنهم لا يفعلون أي شيء فارغًا في ملف CSS الذي تم إنشاؤه. أنت تقول أنك تحاول القيام بالتصفيف عبر Firebug ، لكنني لا أفهم ما هو نهجك.

1. أقوم بإنشاء قواعد فارغة في ملف أقل لعنصر أو مجموعة من العناصر.
2. أقوم بفتح Firebug ، وحدد العنصر الذي أنوي العمل عليه ، ويمكنني رؤية القواعد الفارغة التي أنشأتها
3. أكتب أنماطًا داخل تلك القاعدة الفارغة
4. يقوم المكون الإضافي https://github.com/ronniekk/css-x-fire بمزامنة التغييرات التي أجريتها في firebug إلى ملف أقل ، ويجد القاعدة الفارغة ويضع هناك الأنماط التي حددتها في firebug.

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

أدرك أن هذه حالة استخدام ضيقة جدًا ...

تبدو هذه حالة استخدام محددة _very_. في معظم الحالات ، يفضل الأشخاص LESS تحسين CSS و _ لم يتركوا قواعد فارغة.

أود أن أقترح استخدام less.watch() لتحديث أنماطك تلقائيًا:

<script type="text/javascript">
     less.env = "development";
     less.watch();
</script>

أو قم بإلحاق #!watch بعنوان URL الخاص بك.

إذا كانت لديك مشكلات ، فهناك بعض الاقتراحات هنا: http://www.paulsprangers.com/2011/04/quick-tip-less-js-in-development-and-watch-mode/

نصيحة جيدة منSoviut. أيضًا إذا لم يعجبك ذلك ، فقم بإضافة قاعدة زائفة على سبيل المثال

temp: ruleset;

متفق. يقوم حل

agatronic هذا ما كنت أفعله خلال الأسبوعين الماضيين منذ أن بدأت في استخدام LESS ، لكن عدة مرات دخلت هذه القواعد المزيفة في الإنتاج لأنني نسيت إزالتها ، لذلك اعتقدت أنه ربما توجد طريقة أكثر وضوحًا لإصلاح ذلك :(

Soviut لسوء الحظ هذا سير عمل مختلف تمامًا ، لست مستعدًا للتخلي عنه لاستخدام أقل ... أيضًا تسبب استخدام مترجم أقل في المتصفح في بعض المشكلات الخطيرة في الأداء ، وزاد تحميل الصفحة من 500-700 مللي ثانية إلى 2-3 ثوانٍ ..

أفهم أن هذا الخيار لن تتم إضافته ، وأنا أتفق معك ، ولكن إذا لم تكن هذه مشكلة ، فهل يمكنك إخباري من فضلك في ملف الكود المصدري الذي يمكنني تغيير السلوك بنفسي؟

حاول تغيير هذا

https://github.com/cloudhead/less.js/blob/master/lib/less/tree/ruleset.js#L187

chetzof اكتشفت الحل لهذا. هذه ليست أفضل طريقة ، ولكنها تعمل من أجل ما تبحث عنه.

لقد وضعت بهذه الطريقة:

المحدد {/ ** /}

سيظهر فارغًا على Firebug.

@ d4ng3rmax نقطة باردة!
أعتقد أن لدي نفس سير عمل dev الذي ذكره chetzof .
شكرا.

هذا الشيء ضروري للاستخدام أثناء التطوير بـ css-modules .
إنه أمر ممل حقًا أن نضع جميع المحددات أثناء السقالات متعبًا ثم ننجح في إزالتها.

.main {
/*! keep */
}

.loading {
/*! keep */
}

.button {
/*! keep */
}

.form {
/*! keep */
}

garkin ما هو المنطق / حالة الاستخدام الخاصة بك

وإلا فسيكونون undefined أثناء مرحلة الاستيراد.

import * as React from 'react'
import * as cx from 'classnames';
import css from './home.less';

export class Home extends React.Component {
    render() {
        const isLoading = true;
        return <div className={cx(css.main, {
            [css.loading]: isLoading
         })}>
            Home
        </div>
    }
}

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

garkin Hmm ... أليست الإجابة فقط لإنهاء كتابة ورقة الأنماط الخاصة بك؟ أنا أقول إنها مشكلة سببها فقط نهج التطوير هذا.

على سبيل المثال ، حيث أعمل ، نستخدم Less and Sass اعتمادًا على الفريق ، وفي إعداد Sass الحالي لدينا ، لن تمر المحددات الفارغة في الفحص (لن يتم تجميع التطبيق). لذلك اضطررت إلى تغيير نهجي مع وحدات CSS / React.

هذه هي المشكلة حقًا في هذا النمط:

{
     [css.loading]: isLoading
}

إذا قمت بالتغيير إلى هذا النمط ، فلن يتسبب ذلك في استثناء:

<div className={`${isLoading && css.loading}`}></div>

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

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

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

return <div className={cx(css.post, sharedCss.frame, {
    [css.support]: post.isSupport,
    [css.foreign]: showTranslation,
    [css.private]: post.isInternal,
    [css.cached]: post.status.isLoading
    ...
})}>...</div>

وحدات CSS هي الطريقة الأساسية لعمل الأنماط هذه الأيام وستكون أكثر من ذلك في المستقبل.
تجريد المحددات الفارغة - يغير معقدًا دلالات الكود عند استخدامه مع وحدات css.

يجب على الأقل تجنب هذا السلوك من خلال التكوين.

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

من المحتمل أن يكون هذا السلوك قد تم إنشاؤه عندما كان المحدِّد الفارغ غير ذي صلة بالمتصفح ، ولكن من الصحيح إلى حد ما أنه ليس غير ذي صلة بالبيانات عند تضمين وحدات CSS في الاعتبار.

في الواقع ، ما لم يعترض شخص ما ، أعتقد أن هذا آمن للتنفيذ كخيار. IMO سيكون removeEmptyRulesets (ليس محددات) بقيمة افتراضية true .

تحرير: أم يجب أن يكون keepEmptyRulesets بقيمة افتراضية false ؟ 🤔 ربما الأخير ، لأنه يسهل عمليات التحقق الزائفة عند عدم تحديده.

عندما تأخذ في الاعتبار وحدات CSS

ولا يقتصر الأمر على هؤلاء فقط. ضع في اعتبارك أيضًا أشياء مثل الوصول الآلي عبر

أود أن أقول إن keepEmptyRulesets خيار جيد للإضافة.
قليلا على الجانب المطول ، ربما. ليس لطيفًا جدًا لـ CLI: --keep-empty-rulesets

قليلا على الجانب المطول ، ربما

لا أوافق ، لكن هل لديك اقتراح بديل؟ يبدو أنه سلوك محدد جدًا ، لذا من المفيد أحيانًا أن تكون صريحًا. لا يوجد ما يمنعه من أن يكون keepEmptyRulesets في API و --keep-rulesets في CLI. أو حتى --keep-empty

هل يجب أن يكون فقط keepEmpty لكليهما؟

سأستخدم:

1. outputEmptyRulesets : true|false كخيار API ؛
2. --empty-rulesets كعنصر تبديل CLI كامل الشكل ؛ و
3. -er أو ربما -empty كعنصر تبديل CLI المختزل.

rjgotten أنا بخير مع ذلك. أنا لا استثمر عاطفيا لول. garkin - ما هو شعورك حيال ذلك؟

تبدو جيدة بالنسبة لي.

متى يمكننا توقع التنفيذ الفعلي لها؟
هذه مشكلة لنا أيضا.

orchidoris العلاقات العامة ترحيب!

المكوِّن الإضافي للمشكلة ...

يضيف __NOOP__: 1; لكل محدد ، ثم يزيلها بعد أقل من ذلك.

class NoopPreProcessor {      
    process = (css, extra) => css.replace(/}/g, ';__NOOP__: 1;}');                                                                      
}      

class NoopPostProcessor {      
    process = (css, extra) => css.replace(/__NOOP__: 1;/g, '');                                                                               
}                                                                                                                       

const NoopPlugin = {                                                                                                    
    install: (less, pluginManager) => {                             
        pluginManager.addPreProcessor(new NoopPreProcessor());        
        pluginManager.addPostProcessor(new NoopPostProcessor());      
    },                                                                
}; 

قبل استخدام محمل أقل:

    helpers.getLoaders(config)                                                             
        .filter(item => item.ruleIndex===1)      
        .map(item => {                           
            item.loaders[0].options.options.stictMath = true;      
            item.loaders[0].options.options.plugins = [            
                NoopPlugin,                                        
            ];                                                     

            item.loaders[0].options.options.paths = [      
                ...item.loaders[0].options.options.paths[0],      
                path.resolve(__dirname, 'src'),                   
            ];                                                    
        });