CSS模塊：結合classnames的最佳實踐？

我在我正在開發的ReactJS應用程序中使用css-modules。CSS模塊：結合classnames的最佳實踐？

<div> 
    <div className={styles.homeLink}>home</div> 
    <div className={styles.aboutLink}>about</div> 
</div>

如果我需要對所有菜單的div類（家庭，約），也特定類的每個風格他們，那麼我需要創建一個共享類的所有鏈接的鏈接。我認爲有不同的方法來做到這一點：

/* First code using composes */ 
.links { 
    margin-left: 10px; 
    float:left; 
} 
.homeLink { 
    composes: links; 
    color: #FFF; 
} 
.aboutLinks { 
    composes: links; 
    color: #CCC; 
}

我使用這裏的同一個文件中的類的組合。在這種情況下，我需要在JSX中只使用一個類名。

2種的其他方式：

/* Second code using combined classes and multiple classes later */ 
.links { 
    margin-left: 10px; 
    float:left; 
} 
.links.homeLink { 
    color: #FFF; 
} 
.links.aboutLinks { 
    color: #CCC; 
}

或也許：

/* Third code using multiple classes later */ 
.links { 
    margin-left: 10px; 
    float:left; 
} 
.homeLink { 
    color: #FFF; 
} 
.aboutLinks { 
    color: #CCC; 
}

在第二和第三代碼，我必須每個的className丙2類：

<div> 
    <div className={className(styles.links, styles.homeLink)}>home</div> 
    <div className={className(styles.links, styles.aboutLink)}>about</div> 
</div>

I」我們看到人們以不同的方式做到這一點。哪一個更容易，在更大的應用程序中有更好的性能和更好的擴展性？

來源

2016-08-25 Pooya Sanooei

這個問題比較好要麼過於寬泛，要麼基於觀點或需要討論**，因此是堆棧溢出的主題。如果您有特定的，可回答的編程問題，請提供完整的詳細信息。 –

@Paulie_D我提供了完整的詳細信息，這不是基於意見。我正在尋求最佳實踐，有數百個這樣的問題。你真的投票過於寬泛？ –

如果你要求哪個更好**這顯然是基於意見的，「最好」是主觀的，所以，再次，**基於意見**。 –

我會投第2或第3個選項，因爲它避免了CSS代碼的重複。

這兩個中的哪一個取決於更廣泛的上下文。

如果.homeLink將有助於網站的其他地方（以類似的方式來設計其他一些主頁鏈接），然後是第三。否則，第二種解決方案要儘可能嚴格地遵守CSS規則。

來源

2016-08-25 07:15:38

你的選擇是依賴於差異的情況下，根據你的代碼這是第二個選項是，如果它包含其他div標籤和相同的類比第三種選擇CSS應用到這樣第二個選項是更好

來源

2016-08-25 10:31:06

CSS模塊：結合classnames的最佳實踐？

回答

相關問題