이 CSS를 단순화하는 방법

저는 CSS가 새로 도입되었습니다.
각 구석의 스타일을 변경하기 위해 4 클래스를 만듭니다. 코드 분할 코드를 실행하는 과정에서 볼 수있는 것처럼 작동하지만 많은 코드가 반복됩니다.이 CSS를 단순화하는 방법

이것은 단지 다른 회선을

경계 폭 : 0 16px 16px 0;

나는 내가

<div id="infoPopup" class="note topRight">

내가 작업을 이미 가지고 무엇

.note {} 
.note:before {} 
.note:before .topLeft {border-width: 0 16px 16px 0;} 
.note:before .topRight {border-width: 0 0 16px 16px;} 
.note:before .bottomLeft {border-width: 16px 16px 0 0;} 
.note:before .bottomRight {border-width: 16px 0 0 16px;}

같은 것을 시도하고 있었다 같은 것을 만들 수있는 CSS를 수정하고 싶은

.noteTopRight { 
 
     position: relative; 
 
     width: 30%; 
 
     padding: 1em 1.5em; 
 
     margin: 2em auto; 
 
     color: #fff; 
 
     background: #97C02F; 
 
    } 
 

 
     .noteTopRight:before { 
 
      content: ""; 
 
      position: absolute; 
 
      top: 0; 
 
      right: 0; 
 
      border-width: 0 16px 16px 0; 
 
      border-style: solid; 
 
      border-color: #658E15 #fff; 
 
     } 
 

 
    .noteTopLeft { 
 
     position: relative; 
 
     width: 30%; 
 
     padding: 1em 1.5em; 
 
     margin: 2em auto; 
 
     color: #fff; 
 
     background: #97C02F; 
 
    } 
 

 
     .noteTopLeft:before { 
 
      content: ""; 
 
      position: absolute; 
 
      top: 0; 
 
      left: 0; 
 
      border-width: 0 0 16px 16px; 
 
      border-style: solid; 
 
      border-color: #658E15 #fff; 
 
     } 
 

 
    .noteBottomRight { 
 
     position: relative; 
 
     width: 30%; 
 
     padding: 1em 1.5em; 
 
     margin: 2em auto; 
 
     color: #fff; 
 
     background: #97C02F; 
 
    } 
 

 
     .noteBottomRight:before { 
 
      content: ""; 
 
      position: absolute; 
 
      bottom: 0; 
 
      right: 0; 
 
      border-width: 16px 16px 0 0; 
 
      border-style: solid; 
 
      border-color: #658E15 #fff; 
 
     } 
 

 
    .noteBottomLeft { 
 
     position: relative; 
 
     width: 30%; 
 
     padding: 1em 1.5em; 
 
     margin: 2em auto; 
 
     color: #fff; 
 
     background: #97C02F; 
 
    } 
 

 
     .noteBottomLeft:before { 
 
      content: ""; 
 
      position: absolute; 
 
      bottom: 0; 
 
      left: 0; 
 
      border-width: 16px 0 0 16px; 
 
      border-style: solid; 
 
      border-color: #658E15 #fff; 
 
     }

<div class="noteTopRight"><div>Hola<br> World</div></div> 
 
<div class="noteTopLeft"><div>Hola<br> World</div></div> 
 
<div class="noteBottomRight"><div>Hola<br> World</div></div> 
 
<div class="noteBottomLeft"><div>Hola<br> World</div></div>

출처

2015-01-29 Juan Carlos Oropeza

우선 첫 번째 : 'id'는 고유해야하므로 수정할 필요가 있습니다. 그런 다음 클래스를 결합 할 수 있도록 모든 div가 기본 클래스'.note'가 될 수 있으며 각 클래스에는 보조 클래스가 있습니다 (예 :'.note-top-right' 또는'.note-top-left ') - 공통 속성을'.note' 클래스로 옮기고 다른 값을 다른 네 클래스 각각으로 옮깁니다. 좀 더 자세한 정보가 필요하면 알려주세요 – ochi

@ochi 제가 하위 클래스와 비슷한 것을 볼 수 있습니다. 그러나': 전에 '는 나를 혼란스럽게 만들었다. 하위 클래스에서 해당 부분을 제거해야합니까? –

ID로 불편을 끼쳐 드려 죄송합니다. 각 클래스가 제대로 작동하는지 확인하기 위해 복사/붙여 넣기 작업을했습니다 :) –

거의 제대로하고 있습니다.

은 다음과 같이 수행 한 후

.note { /*common style*/} 
.note:before { /*common style*/ } 
.note-topLeft:before {border-width: 0 16px 16px 0;} 
.note-topRight:before {border-width: 0 0 16px 16px;} 
.note-bottomLeft:before {border-width: 16px 16px 0 0;} 
.note-bottomRight:before {border-width: 16px 0 0 16px;}

과 :

<div id="infoPopup" class="note note-topLeft"><div id="thing">Hola<br> World</div></div> 
<div id="infoPopup1" class="note note-topRight"><div>Hola<br> World</div></div> 
<div id="infoPopup2" class="note note-bottomLeft"><div>Hola<br> World</div></div> 
<div id="infoPopup3" class="note note-bottomRight"><div>Hola<br> World</div></div>

1, 2, 3

은 두 번 같은 id를 사용하지 마십시오.

출처

2015-01-29 19:07:21 Leo

@leo가 말한 것에 덧붙여서 : 원래'id = "infoPopup"로 레이블 된 모든 것들이 공유 "infoPopup"스타일을 가지고 있다면, infoPopup을 클래스로 변경하고'class = "infoPopup note ..." '.infoPopup {}'). 그리고 모든 "infoPopup"도'.note'이면 "infoPopup"을 완전히 삭제하고 스타일을'.note'에 넣으십시오. (그리고 이미 한 발 뒤로 물러나 :이 사실을 이미 알고 있지만 id를 지정하지 않아도된다.) – henry

예, 이드는 실수라고 생각합니다. 그 단계에서 저는 각 스타일을 테스트하기 위해 복사/붙여 넣기를했습니다. 나는 단지 한 아이디를 사용하고 클래스를 바꿀 것이다. –

위치 내가 이런 식으로 단순화 것, 각각 (단지 경계 폭) 위 내 댓글 당

.note { 
 
    position: relative; 
 
    width: 30%; 
 
    padding: 1em 1.5em; 
 
    margin: 2em auto; 
 
    color: #fff; 
 
    background: #97C02F; 
 
} 
 

 
.note:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-color: #658E15 #fff; 
 
} 
 

 
.noteTopRight:before { 
 
    top: 0; 
 
    right: 0; 
 
    border-width: 0 16px 16px 0; 
 
} 
 

 
.noteTopLeft:before { 
 
    top: 0; 
 
    left: 0; 
 
    border-width: 0 0 16px 16px; 
 
} 
 

 
.noteBottomRight:before { 
 
    bottom: 0; 
 
    right: 0; 
 
    border-width: 16px 16px 0 0; 
 
} 
 

 
.noteBottomLeft:before { 
 
    bottom: 0; 
 
    left: 0; 
 
    border-width: 16px 0 0 16px; 
 
}

<div class="note noteTopRight"><div id="thing">Hola<br/> World</div></div> 
 
<div class="note noteTopLeft"><div>Hola<br/> World</div></div> 
 
<div class="note noteBottomRight"><div>Hola<br/> World</div></div> 
 
<div class="note noteBottomLeft"><div>Hola<br/> World</div></div>

출처

2015-01-29 19:08:33 indubitablee

에서 다른 :

.note{ 
 
    position: relative; 
 
    width: 30%; 
 
    padding: 1em 1.5em; 
 
    margin: 2em auto; 
 
    color: #fff; 
 
    background: #97C02F; 
 
} 
 

 
.note:before{ 
 
    content: ""; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-color: #658E15 #fff; 
 
} 
 

 

 
.noteTopLeft:before { 
 
    border-width: 0 0 16px 16px; 
 
    top: 0; 
 
    left: 0; 
 

 
} 
 

 
.noteTopRight:before { 
 
    border-width: 0 16px 16px 0; 
 
    top: 0; 
 
    right: 0; 
 
} 
 

 
.noteBottomRight:before { 
 
    border-width: 16px 16px 0 0; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 

 
.noteBottomLeft:before { 
 
    border-width: 16px 0 0 16px; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<div id="infoPopup0" class="note noteTopRight"><div id="thing">Hola<br> World</div></div> 
 
<div id="infoPopup1" class="note noteTopLeft"><div>Hola<br> World</div></div> 
 
<div id="infoPopup2" class="note noteBottomRight"><div>Hola<br> World</div></div> 
 
<div id="infoPopup3" class="note noteBottomLeft"><div>Hola<br> World</div></div>

출처

2015-01-29 19:16:51 ochi

이 CSS를 단순화하는 방법

답변

관련 문제