하나의 CSS 블록이 다른 블록을 사용할 수 있습니까?

Question

CSS에서 이와 비슷한 것을 사용할 수 있습니까?

.bordered 
{ 
    border: 10px dashed yellow; 
} 


form input 
{ 
    use .bordered; 

    font-size: 10px; 
} 

또는 어떻게 각 CSS 코드 블록을 html 요소에 쓰지 않고도이 작업을 수행 할 수 있습니까?

.bordered, 
form input { 
    border: 10px dashed yellow; 
} 


form input { 
    font-size: 10px; 
} 

또는, 당신은 하나 하나 모든 선택기를 나열하지 않도록하려는 경우, 당신은 스타일 클래스를 생성하고 추가 할 수 있습니다 : 당신이 CSS의 처리기를 사용하지 않는

Answer 1

빠른 대답 : 재사용 가능한 코드에 대한

.bordered, form input { border: 10px dashed yellow; } 
form input { font-size: 10px; } 

솔루션은 사용하는 것입니다 CSS Preprocessor - LESS 또는 SASS하거나 새 클래스를 생성하고 무엇을 호출 할 수 있습니다 원하는 스타일을 추가하십시오.

텐 이유 당신은 CSS의 처리기를 사용해야-https://www.urbaninsight.com/2012/04/12/ten-reasons-you-should-be-using-css-preprocessor

참고 : 당신이`CSS` 사전 처리 도구를 사용 그냥 경우

• LESS
• SASS

Answer 2

, 당신과 같이 그것을 할 수 해당 클래스를 요소에 적용하십시오.

Answer 3

글쎄, 언제나 클래스를 입력에 추가 할 수 있습니다.

---

이상적으로 당신은 당신은 그들이 더 일반적인 수 있습니다 (하지만 과장하지 않음) 있도록 클래스를 리팩토링/정상화 할 수 있어야합니다. 예 :

.bordered { 
    border: 10px dashed yellow; 
} 
.smaller { 
    font-size: 10px; 
} 

<form> 
    <input class="bordered"> 
    <input class="smaller"> 
    <input class="bordered smaller"> 
</form>