클래스의 여러 CSS 규칙을 단일 클래스 선언으로 병합 하시겠습니까?

Question

나는 CSS에서 클래스의 다른 관심사를 구분하는 것을 좋아한다.

예 :

지금까지

// Layout 
.myElement { 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
    padding: 5px; 
} 

// Chrome 
.myElement { 
    background: red; 
    border: 2px solid green; 
    box-shadow: inset 0 0 10px black; 
} 

// Content 
.myElement { 
    color: white; 
    font-size: 120%; 
} 

// Interaction 
.myElement:hover { 
    background: black; 
    border: 10px dotted red; 
} 

꽤 괜찮. 개인적으로 나는 그 접근법을 읽기 쉽고, 유지하기 좋고, 개발하기 좋은 것으로 생각한다. 그러나 클래스의 모든 규칙을 하나의 클래스 선언 에 병합하기 전에 배포를 자동으로 병합하는 메커니즘이나 도구가 있습니까?

원하는 결과 :

.myElement { 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
    padding: 5px; 
    background: red; 
    border: 2px solid green; 
    box-shadow: inset 0 0 10px black; 
    color: white; 
    font-size: 120%; 
} 

.myElement:hover { 
    background: black; 
    border: 10px dotted red; 
} 

편집 : 코멘트를 읽은 후 나는 내 "인공"예를 충분히 포괄적이지 느꼈다. 아래는 Stylus 구문으로 작성된 실제 예입니다. 그러나 결과는 위에서 설명한 것과 같습니다. 나는 위의 원래 예제를 그대로 두었다. 다음 예는 사이트의 여러 위치에 나타나는 특정 영역 및 내용의 모양을 설명하는 단일 파일로 존재합니다. 그 지역의 축소판과 같습니다. 결과적으로 이러한 소우주가 더 많이 있다고 상상할 수 있습니다.

// Layout 
.events 
    padding 2em 

.eventItem 
    margin 0 0 4em 

.eventCal 
    float left 
    padding 2.5em 0 0 

.eventArticle 
    margin 0 0 0 6em 

.eventHead 
    margin 0 0 1em 

    time 
     margin 0 2em 0 0 


// Chrome 
.eventCal 
    background url("../../assets/img/icon-events.png") no-repeat 

.eventHead 
    border-bottom .5em solid $chimney 


// Content 
.eventItem 
    list-style-type none 

    a 
     color $beige 
     text-decoration none 

    h2 
     font-family $elsie 

.eventCal 
    color $beige 
    font-family $elsie 
    font-weight bold 
    font-size 150% 

.eventHead 
    font-size 75% 

.eventDesc 
    font-size 90% 


// Interaction 
.eventItem  
    a:hover 
      color $chimney 
      text-decoration underline 

Answer 1

내 컴퓨터는 몇 일 직후에 재부팅 할 필요가 있지만, 기본적으로 내 라이브러리에는 상당히 정기적으로 그런 작업을 수행합니다. 기본적으로 시트릭스에서 CSSrules를 열거하는 데 필요한 코딩 예제 중 하나를 얻으려면이 기능을 빠르게 활용할 수 있습니다.

그런 다음 열거 함수에서 단순히 selectorText 속성을 가져 와서 selectorText와 일치하는 요소를 줄 document.querySelector/querySelectorAll에 드롭합니다. selectorText 및 관련 cssText를 약간 {}/[] 또는 당신의 공상에 어울립니다.

열거 형을 완료 한 후에 document.createElement ('style')을 수행하고 insertRule()을 사용하여 원하는대로 스타일을 서로 붙입니다.

그런 다음 완성 된 제품을 style.textContent에서 가져 와서 병합 된 스타일 시트를 얻으십시오.

일반적으로 사용 가능한 열거 코드는 실제 어려운 부분입니다. 이것은 대부분의 사람들을위한 멋진 게으른 저녁 코딩 작업이며 정확히 원하는 방식으로 작업을 수행합니다.