如何正確組織更少的班級

我是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; 
}

而且我需要在我少這部分代碼添加

.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中，這將是簡單的繼承。請建議組織此類代碼的最佳方式。

來源

2016-07-30 ketazafor

簡短的回答你的問題是，而不是針對特定的HTML結構（即.links a i）寫的，你灑在你的HTML或使用它們作爲一個混合（因爲每個類是可重複使用的，一般類寫作選擇在LESS中考慮了mixin）。

更好的是，使用一個已知和有文檔記錄的CSS方法，如促進使用通用css類的OOCSS。

龍答：我可以告訴你是不是很有經驗的CSS，所以你還不熟悉，可以使用T型結構的CSS代碼慣例和抽象。這裏有一些指導可以幫助你，不僅僅是LESS，而是CSS。

一般CSS結構：

使用盡可能少的築巢地。我相信你很快就會發現，嵌套更像是一種詛咒而不是恩惠。它創建了長選擇器，這些選擇器難以閱讀，難以重構，並且對性能不利。但是嵌套更糟的是它強制執行特定的html結構。

採用單班改爲適用您的命名空間（例如.links-anchor而不是.links a）這樣的links命名空間被保留，但沒有HTML結構執行。（我明白這個HTML結構太基本了，看不到好處，但現在忍受我）
不要在選擇器中使用元素名稱（這稱爲限定選擇器）。這再次強制執行特定HTML結構（例如，你只能使用在當前的CSS的i元素），並因爲瀏覽器解析您的選擇從右到左它會影響性能。

這意味着，如果瀏覽器發現.links a它會首先找到在頁所有錨，然後將它們過濾到那些與一類.links的元素。

取而代之，您可以爲每個希望樣式化的元素創建單個類，並使用有意義的父級命名空間。例如：.links，.links-anchor和.links-anchor-i（我不知道什麼i元素，就是要代表你的代碼
這使我對我的下一個點寫描述要造型的，而不是針對語義類。隨機HTML元素，如i。這包括你的根元素，以及你的造型孩子。

例如，如果這些links意味着是你的主要導航組件，選擇你的根元素稱爲.main-navigation然後.main-navigation-link類名和.main-navigation-label（如果那是refe rring）

只有一些方法可以提高你的CSS。我建議閱讀優秀的http://cssguidelin.es/頁面，其中包含更多改進以及示例和資源。通過閱讀和理解一些CSS的陷阱之後，我建議開始使用現有的CSS方法如OOCSS，BEM，SMACSS或ITCSS

現在開始到LESS /工裝建議

1 ）嘗試使用嵌套僅用於樣式變體您的選擇器的目標元素和僞元素（:before和:after）。這可以通過&運算符來完成，它是原始選擇器的縮寫。

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

    &:before {...} 
}

2）後處理器添加到您的CSS的構建，如Autoprefixer它允許你寫乾淨，網頁符合標準的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傳說，如哈里·羅伯茨（CSS Wizardy），妮可沙利文（OOCSS），喬納森·斯努克（SMACSS）和尼古拉斯·加拉格爾的文章。
看看大的CSS項目，如Bootstrap和Foundation的源代碼，看看他們是如何使用預處理器來構造他們的代碼
當然，不停地提問在Stackoverflow！

我希望這有助於和好運:)

來源

2016-07-30 12:23:30 Dogoku

謝謝！你幫了我很多！ – ketazafor

說實話，這不是我的個人代碼，我使用它從免費模板（也可用於付費版本）。 – ketazafor

你可以通過創建1個類來實現。例如

創建另外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

來源

2016-07-30 12:17:17

這可能不是你所期待的（如果沒有，那麼不用擔心），但得到的答覆，如果你正在學習減少，因爲你想擁有更有條理，更易於維護的樣式表，然後分組，選擇按風格，而不是編組的樣式逐個選擇是一個替代方法（使用標準的CSS）的 - 雖然沒有被廣泛採用 - 報價爲像SASS和LESS這樣的預處理器（但顯然不需要compliling），可以進行很多控制和易於維護。我發現（個人而言）它使得CSS調試非常容易。但是，它不是每個人都可以使用的，而是因爲它將樣式表分成了一系列迷你樣式表。

它也擺脫了變量的需要。

E.g.舉一個簡單的例子，如果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,0,191);} 
header h2, aside h2, article h2 {color: rgb(255,0,0);}

到：

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

在傳統的樣式，在樣式通過選擇分組，你需要從製造至少2點的變化：

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);}

，並牢記這個例子是故意簡單。如果你一下子改變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); 
}

來源

2016-07-30 14:12:34 Rounin

我很抱歉，但我覺得我必須降低這一點。也許我已經開始成爲一名老人了，因爲這是我第一次看到像這樣的CSS結構，而且看起來對我來說很糟糕。你並沒有重複使用任何代碼，只是將它分成不同的文件，而不是你正在設計的樣式和創建不斷增長的選擇器。你基本上沒有使用SASS的'extend'功能。做這樣的事情只有在編寫某種CSS重置時纔有意義，即便如此，也有更好的方法來實現。 – Dogoku

沒關係，@Dogoku - 正如我上面寫的那樣，它不適合每個人。它對一些人來說看起來很可怕，對別人也很美。我於2013年1月開始按照樣式對選擇器進行分組（它基於DRY CSS方法），我喜歡它並從未回頭過。當談到我工作的各個網站上的CSS時，我花在維護CSS上的時間與寫下CSS的時間的比例大約是8：1。格式化我的CSS就像這意味着我不必尋找一個流浪的風格，或梳理通過樣式表尋找一個晦澀的選擇器......我總是可以找到我需要的一切並立即更新它。 – Rounin

你的方法絕對是結構化的，比起初學者CSS中的完全無政府狀態更好。但是，我發現這種方法存在一些基本缺陷。例如，如果頁面的一個組件的樣式發生更改，則必須更改至少十幾個文件。就像我說的，這種方法可能對CSS重置或某種低級框架有好處，但除此之外，我不會使用它。 – Dogoku

我問自己，多次與上海社會科學院啓動時。但是，嵌套不是必須的選項，你會爲一些開發人員處理純粹的.css噩夢，因爲這些開發人員可能不想使用編譯器。

你應該爲你的li添加一些類並儘可能簡化嵌套。您可以使用BEM並遵循DRY方法

來源

2016-07-30 16:07:11

如何正確組織更少的班級

回答

相關問題