클래스를 올바르게 구성하는 방법

Question

전 세계에서 초보자입니다. LESS에 월드 클래스를 구성하는 방법에 대한 질문이 있습니다.

여기 내 수업은 less입니다.

.links { 
    width: 9em; 
    height: 4em; 
    position: absolute; 
    top: 40%; 
    left: 50%; 
    margin-top: -20px; 
    margin-left: -45px; 
    opacity: 0; 
    -webkit-transform: translate(0,-50px); 
    -moz-transform: translate(0,-50px); 
    -ms-transform: translate(0,-50px); 
    -o-transform: translate(0,-50px); 
    transform: translate(0,-50px); 
    a { 
     i { 
      position: relative; 
      color: @colorMainGreen; 
      font-size: 16px; 
      margin: 0 13px; 
      z-index: 100; 
      &::after { 
       position: absolute; 
       content: ""; 
       left: -7px; 
       top: -7px; 
       width: 30px; 
       height: 30px; 
       border: 1px solid @colorMainGreen; 
       z-index: -1; 
       border-radius: 3px; 
       -webkit-transform: rotate(45deg); 
        -moz-transform: rotate(45deg); 
        -ms-transform: rotate(45deg); 
        -o-transform: rotate(45deg); 
         transform: rotate(45deg); 
      } 
      &:hover i { 
       color: #fff; 
      } 
     } 
     &:hover { 
      i { 
       &:hover { 
        background-color: @colorMainGreen; 
       } 
      } 
     } 
    } 
} 

는 것을 분명히 여기에 컴파일 된 버전

.links { 
    width: 9em; 
    height: 4em; 
    position: absolute; 
    top: 40%; 
    left: 50%; 
    margin-top: -20px; 
    margin-left: -45px; 
    opacity: 0; 
    -webkit-transform: translate(0, -50px); 
    -moz-transform: translate(0, -50px); 
    -ms-transform: translate(0, -50px); 
    -o-transform: translate(0, -50px); 
    transform: translate(0, -50px); 
} 
.links a i { 
    position: relative; 
    color: #68c3a3; 
    font-size: 16px; 
    margin: 0 13px; 
    z-index: 100; 
} 
.links a i::after { 
    position: absolute; 
    content: ""; 
    left: -7px; 
    top: -7px; 
    width: 30px; 
    height: 30px; 
    border: 1px solid #68c3a3; 
    z-index: -1; 
    border-radius: 3px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 
.links a i:hover i { 
    color: #fff; 
} 
.links a:hover i:hover { 
    background-color: #68c3a3; 
} 

를 만들려면 그리고 당신은

I을 볼 수 있듯이 나는이 부분이 내 적은 코드에

.links, 
.links a i, 
.links a i::after { 
    -webkit-transition: all 400ms; 
    -moz-transition: all 400ms; 
    -o-transition: all 400ms; 
    transition: all 400ms; 
} 

를 추가해야 이 클래스를 링크 및 자식 클래스에 적용해야합니다.
나는 모든 사용 가능한 방법을 모르고 있기 때문에 mixins를 사용하여 각 클래스에 추가하는 방법을 고려할 수 있습니다. 그러나 이것은 코드 중복입니다. 어쩌면 이것을 수행 할 또 다른 방법이 있습니다. 확장에 대해 읽었습니다. 아마 여기에서 사용할 수 있습니까? OOP 언어에서는 이러한 단순한 상속이 가능합니다. 이러한 코드를 구성하는 가장 좋은 방법을 제안하십시오.

Answer 1

질문에 짧은 대답 대신 (예 : .links a i)는 당신이 당신의 HTML에 뿌려 또는 모든 클래스이기 때문에 (A 믹스 인으로 사용할 재사용 가능한 일반 클래스를 작성 특정 HTML 구조를 대상으로 작성 선택기입니다 덜 믹스 인 것으로 간주).

일반 CSS 클래스의 사용을 촉진하는 OOCSS와 같은 잘 알려진 문서화 된 CSS 방법론을 사용하는 것이 좋습니다.

---

긴 대답 : 나는 당신이 매우 CSS와 경험이없는 때문에 아직 t 구조 당신의 CSS 코드를 사용할 수있는 일반적인 사례 및 추상화에 익숙하지 않은 알 수 있습니다. 다음은 LESS뿐 아니라 CSS 전반에 도움이되는 몇 가지 지침입니다.

일반 CSS 구조 : 가능한 한 작은 둥지로

1. 사용. 중첩은 내가 당신이 곧 알아낼 것이라고 확신하기 때문에 보너스보다 더 저주입니다. 긴 선택자은 읽기 어렵고 리팩터링하기가 어려우며은 성능이 좋지 않아 입니다. 그러나 중첩에 대한 가장 나쁜 점은 이 특정 html 구조을 적용한다는 것입니다.

   대신 links의 네임 스페이스가 유지되지만 html 구조는 적용되지 않는 방식으로 단일 클래스 (예 : .links a 대신 .links-anchor)를 사용하여 네임 스페이스를 적용하십시오. (나는이 html 구조가 이점을보기에는 너무 기본적인 것이지만 지금은 나와 견뎌야한다.)

2. 선택자에 요소 이름을 사용하지 마십시오 (이것은 자격 부여 선택자라고 함). 다시 (예 : 현재 CSS에서 i 요소 만 사용할 수 있음) 브라우저가 선택자를 오른쪽에서 왼쪽으로 구문 분석하기 때문에 성능에 영향을줍니다. 브라우저가 .links a을 볼 때 처음 페이지에 모든 앵커를 찾은 다음 .links의 클래스를 가진 요소 아래에있는 것들로 그들을 필터링된다는 것을 의미합니다

   .

   대신 스타일을 적용하려는 모든 요소에 대해 단일 클래스를 만들고 의미 론적으로 의미가있는 부모를 사용하여 네임 스페이스를 지정하십시오. 예 : .links, .links-anchor 및 .links-anchor-i는 (나는 i 요소가 코드에서 대표로 무엇을 의미하는지 아무 생각이 내 옆에있는 지점으로 날 리드

3. 당신이 스타일링보다는 표적으로 무엇을 설명하는 의미 클래스를 작성합니다.. i 같은 임의의 HTML 요소. 이것은 당신의 루트 요소뿐만 아니라 스타일링있는 모든 아이들이 모두 포함됩니다. 예를 들어

   그 links이 주요 탐색 요소가 될 것을 의미하는 경우, .main-navigation-link 다음 루트 요소에 대한 .main-navigation라는 클래스 명을 선택 .main-navigation-label (해당되는 경우 i을 참조하십시오. rring too)

CSS를 개선 할 수있는 몇 가지 방법이 있습니다. 좋은 http://cssguidelin.es/ 페이지를 읽으십시오. 여기에는 많은 개선점과 예제 및 리소스가 포함되어 있습니다. 그 통해 읽기와 CSS의 함정의 일부를 이해 후, 나는 이후 LESS/공구 제안에 이제 기존 CSS 방법론 등 OOCSS, BEM, SMACSS 또는 ITCSS

---

를 사용하여 시작하는 것이 좋습니다

1) 변형 요소를 선택기로 지정하고 의사 요소 (:before 및 :after) 만 스타일 지정하려면 중첩을 사용하십시오. 이것은 원래 셀렉터의 줄임말 인 & 연산자를 통해 가능합니다. 당신이 이 깨끗하고, 웹 표준을 준수하는 CSS하고 나중에 지원되는 브라우저가 필요로하는 접두사 버전으로 확장 얻을 것이다 쓸 수있는 등 Autoprefixer로

.navigation-link { 
    &:hover {...} 
    &:active {...} 

    &:before {...} 
} 

2), 당신의 CSS 빌드에 포스트 프로세서를 추가 .

3) 가능한 경우 "마법의 숫자"를 피하십시오. 대신에 LESS 변수와 계산을 사용하십시오. 그 번호가 어디서 왔는지는 자명합니다.

@layout-header-height: 40px; 
@layout-padding: 10px; 
.layout-header {position: fixed; height: @layout-header-height; ...} 
.layout-body { padding-top: (@layout-header-height + @layout-padding); ...} 

---

은 그게 지금은 충분하다 생각하지만, 부하는 추가 정보를 원하시면 거기에있다.

• 는 해리 로버츠 (CSS의 Wizardy), 니콜 설리반 (OOCSS), 조나단 농어 (SMACSS)와 니콜라스 갤러거와 같은 CSS 전설로 기사를 검색합니다.
• 부트 스트랩 및 파운데이션과 같은 큰 CSS 프로젝트의 소스 코드를보고 전처리기를 사용하여 코드를 구조화하는 방법을 확인하십시오.
• 물론 Stackoverflow!

나는이 도움이 행운 : 당신이 원하기 때문에

Answer 2

당신은 1 개의 클래스를 추가로 만들 수 있습니다. 예를 들어

아래에 추가 클래스를 하나 더 만들고이 클래스를 다른 클래스에 추가 할 수 있습니다. 따라서이 코드를 반복적으로 작성할 필요가 없습니다. 그것은 LESS가 제공하는 mixins입니다.

.trans { 
    -webkit-transition: all 400ms; 
    -moz-transition: all 400ms; 
    -o-transition: all 400ms; 
    transition: all 400ms; 
} 

이제이 클래스를 아래의 모든 3 가지 클래스에 추가 할 수 있습니다.

.links { 
    .trans; 
    a{ 
     i{ 
      .trans; 
      &:after{ 
       .trans; 
      } 
     } 
    } 
} 

보다 정확하게는 mixin 클래스 아래에 포함 할 수 있으므로 전환을 위해이 4 줄까지 쓸 필요가 없습니다.

MIXIN LIBS

Answer 3

이 당신이 찾고있는 (그리고하지 않을 경우, 다음 걱정하지)하지만 대답하지 않을 경우 LESS를 배우고있는 희망 보다 편하고 유지하기 쉬운 스타일 시트 인 경우 그룹화 선택기 by 스타일 grouping-styles-by-selector은 (널리 사용되지는 않지만) 표준 CSS를 사용하는 하나의 대체 방법입니다. SASS 및 LESS와 같은 전처리 기와 같이 많은 제어와 유지 관리가 용이합니다 (그러나 자명하게도 compliling을 필요로하지 않습니다).

그룹화 선택기 by 스타일은 스타일 시트를 일련의 미니 스타일 시트로 나누기 때문에 (실제로) CSS 디버깅을 매우 쉽게 만듭니다.

또한 변수가 필요 없습니다.

예 :는 h1 및 nav h2 및 footer h2이 같은 파란색과 aside h2 및 article h2 및 header h2 경우 모두 빨간색과 당신이 어디에 선택기 스타일 시트에 그린 다음, 하나의 갱신으로 h1 및 nav h2 및 footer h2을 원하는 결정, 간단한 예제를 촬영하려면 스타일은 기존의 스타일에서

.TEXT-COLOR, 
h1, nav h2, footer h2 {color: rgb(0,191,0);} 
header h2, aside h2, article h2 {color: rgb(255,0,0);} 

:

.TEXT-COLOR, 
h1, nav h2, footer h2 {color: rgb(0,0,191);} 
header h2, aside h2, article h2 {color: rgb(255,0,0);} 

에 :에서 충분 스타일로 그룹화되어 있습니다

h1 {color: rgb(0,0,191);} 
h2 {color: rgb(0,0,191);} 
header h2, aside h2, article h2 {color: rgb(255,0,0);} 

에 :

h1 {color: rgb(0,191,0);} 
h2 {color: rgb(0,191,0);} 
header h2, aside h2, article h2 {color: rgb(255,0,0);} 

을이 예제는 의도적으로 간단 명심 선택에 의해 그룹화, 당신은에서 최소 2 명 변경해야 할 것입니다. margin, padding, font-size 및 box-shadow을 모두 한 번에 변경하는 경우 - 선택기가 스타일별로 그룹화 된 스타일 시트에서는 4 번 변경되지만 스타일이 선택기로 그룹화되는 스타일 시트에서는 적어도 8 가지 변경됩니다.말대꾸로 시작했을 때

.POSITION, 
.links, .links a i::after {position: absolute;} 
.links a i {position: relative;} 

.CO-ORDINATES, 
.links {top: 40%; left: 50%;} 
.links a i {z-index: 100;} 
.links a i::after {top: -7px; left: -7px; z-index: -1;} 

.WIDTH_HEIGHT, 
.links {width: 9em; height: 4em;} 
.links a i::after {width: 30px; height: 30px;} 

.MARGIN_PADDING, 
.links {margin: -20px 0 0 -45px;} 
.links a i {margin: 0 13px;} 

.TEXT-COLOR, 
.links a i {color: #68c3a3;} 
.links a i:hover i {color: #fff;} 

.TEXT-PRESENTATION, 
.links a i {font-size: 16px;} 

.BACKGROUND, 
.links a:hover i:hover {background-color: #68c3a3;} 

.BORDER, 
.links a i::after {border: 1px solid #68c3a3; border-radius: 3px;} 

.MISCELLANEOUS, 
.links {opacity: 0;} 

.PSEUDO-ELEMENTS, 
.links a i::after {content: '';} 

.TRANSFORM, 
.links { 
-webkit-transform: translate(0, -50px); 
    -moz-transform: translate(0, -50px); 
    -ms-transform: translate(0, -50px); 
    -o-transform: translate(0, -50px); 
     transform: translate(0, -50px); 
} 


.links a i::after { 
-webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
     transform: rotate(45deg); 
} 

Answer 4

나 자신에게 여러 번 요청했습니다 :

다음은 스타일별로 그룹화 선택기와 위의 스타일이다. 그러나 중첩은 필수 옵션이 아니므로 컴파일러를 사용하고 싶지 않은 일부 개발자는 순수 .css를 악몽으로 처리해야합니다.

가능한 경우 중첩을 단순화해야합니다. BEM을 사용하고 DRY 방법론을 따를 수 있습니다