:empty 의사 선택기를 의미합니까?

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

아니요, 아마도 "규칙"이라고 불러야 할 것입니다.)
내 말은

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

CSS로 컴파일하면 삭제됩니다.

왜 그것들을 유지하고 싶습니까? 그들은 생성된 CSS 파일에서 공백으로 아무것도 하지 않습니다. 당신은 당신이 Firebug를 통해 스타일링을 하려고 한다고 말하지만 나는 당신의 접근 방식이 무엇인지 이해하지 못합니다.

1. 요소 또는 요소 그룹에 대해 less 파일에 빈 규칙을 만듭니다.
2. 방화범을 열고 작업하려는 요소를 선택하면 내가 만든 빈 규칙이 표시됩니다.
3. 나는 그 빈 규칙 안에 스타일을 씁니다.
4. https://github.com/ronniekk/css-x-fire 플러그인은 firebug에서 변경한 내용을 더 적은 파일로 다시 동기화하고, 빈 규칙을 찾고, firebug에서 지정한 스타일을 거기에 넣습니다.

요구 사항은 플러그인이 올바르게 다시 동기화하려면 규칙이 이미 존재해야 하며, 분명히 요소에 이전에 스타일이 없었다면 처음으로 빈 규칙을 만들어야 한다는 것입니다. 순수 CSS를 사용할 때 작동했지만 이제 LESS로 전환했을 때 컴파일러가 빈 규칙을 삭제하고 플러그인이 스타일을 다시 동기화할 수 없다는 것을 깨달았습니다.

나는 그것이 매우 좁은 사용 사례라는 것을 알고 있습니다 ...

이것은 _매우_ 특정한 사용 사례처럼 보입니다. 대부분의 경우 사람들은 CSS를 덜 최적화하고 빈 규칙을 남겨두지 _않습니다_.

스타일을 자동으로 새로 고치려면 less.watch() 를 사용하는 것이 좋습니다.

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

또는 URL에 #!watch 를 추가합니다.

문제가 있는 경우 여기에 몇 가지 제안 사항이 있습니다. http://www.paulsprangers.com/2011/04/quick-tip-less-js-in-development-and-watch-mode/

@Soviut의 좋은 조언. 또한 마음에 들지 않으면 해결 방법을 위해 가짜 규칙을 추가하십시오.

temp: ruleset;

동의. @agatronic 의 솔루션은 다른 모든 LESS 파일이 비효율적인 CSS를 생성하지 않고 필요한 작업을 수행합니다.

@agatronic 그게 내가 LESS를 사용하기 시작한 이후로 지난 2주 동안 하고 있던 일이지만, 그런 가짜 규칙을 제거하는 것을 잊었기 때문에 몇 번이나 그런 가짜 규칙이 생산에 들어갔습니다.

@Soviut 불행히도 그것은 완전히 다른 워크 플로우입니다. 나는 Less를 사용하기 위해 그것을 포기할 준비가되지 않았습니다 ... 또한 브라우저에서 더 적은 컴파일러를 사용하면 심각한 성능 문제가 발생하고 페이지로드가 500-700ms에서 2-3 초로 증가했습니다.

이 옵션이 추가되지 않는다는 점을 이해하고 동의합니다. 하지만 문제가 되지 않는다면 어떤 소스 코드 파일에서 스스로 동작을 변경할 수 있는지 알려주실 수 있나요?

이것을 변경해보십시오

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

@chetzof 나는 이것에 대한 해결책을 알아 냈습니다. 그것이 최선의 방법은 아니지만 찾고 있는 것에 효과적입니다.

나는 그렇게 두었습니다 :

선택기 { /**/ }

방화범에서는 비어 있는 것으로 나타납니다.

@d4ng3rmax 쿨포인트!
@chetzof가 언급한 것과 동일한 개발 워크플로가 있다고 생각합니다.
고마워.

이것은 css-modules 개발하는 동안 꼭 필요한 것입니다.
스캐폴딩 동안 모든 선택자를 상용구로 만든 다음 제거하는 것은 정말 귀찮은 일입니다.

.main {
/*! keep */
}

.loading {
/*! keep */
}

.button {
/*! keep */
}

.form {
/*! keep */
}

@garkin CSS 모듈을 사용하여 이와 같은 선택기를 작성하기 위한 추론/사용 사례는 무엇입니까?

그렇지 않으면 가져오기 단계에서 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 흠... 그냥 스타일시트 작성을 끝내는 게 답 아닌가요? 이 개발 방식으로만 발생하는 문제라고 합니다.

예를 들어 내가 일하는 곳에서는 팀에 따라 Less 및 Sass를 사용하고 현재 Sass 빌드 설정에서는 빈 선택기가 린팅을 통과하지 않습니다(앱이 컴파일되지 않음). 그래서 CSS 모듈/리액트로 접근 방식을 변경해야 했습니다.

문제는 바로 이 패턴입니다.

{
     [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 입니다.

편집: 아니면 기본값이 false keepEmptyRulesets 여야 합니까? 🤔 정의되지 않은 경우 잘못된 검사를 쉽게 하기 때문에 후자일 가능성이 높습니다.

CSS 모듈을 고려할 때

그리고 그것은 그들에게만 국한되지 않습니다. CSSOM을 통한 프로그래밍 방식 액세스와 같은 것도 고려하십시오.

keepEmptyRulesets 를 추가하는 것이 좋습니다.
장황한 측면에서 조금, 아마도. CLI에 좋지 않음: --keep-empty-rulesets

장황한 측면에서 약간, 아마도

동의하지 않습니다만 다른 제안이 있으십니까? 그것은 매우 구체적인 행동처럼 보이기 때문에 때로는 명시적인 것이 도움이 됩니다. API에서는 keepEmptyRulesets 이고 CLI에서는 --keep-rulesets 가 되는 것을 막을 수 없습니다. 또는 심지어 --keep-empty

둘 다 keepEmpty 이어야 합니까?

나는 사용할 것입니다 :

1. API 옵션으로 outputEmptyRulesets : true|false ;
2. --empty-rulesets 를 전체 형식 CLI 토글로 사용합니다. 그리고
3. -er 또는 -empty 를 약식 CLI 토글로 사용할 수 있습니다.

@rjgotten 저는 괜찮습니다. 나는 감정적으로 투자하지 않습니다 lol. @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());      
    },                                                                
}; 

로더가 적은 preact의 경우:

    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'),                   
            ];                                                    
        });