如何處理需要更改CSS類名稱

我正在尋找人們處理不可避免的需要改變或以其他方式調整CSS類以適應新的HTML元素的策略。我經常在這種情況下發現自己，所以我希望其他人分享我的痛苦，並可以在這裏提出建議。如何處理需要更改CSS類名稱

想象一下，您有一個產品的表格，其語義類名稱很好products。這是在你的樣式表中適當的樣式。幾個月後，老闆會要求您在網站上創建一個員工名單，「名稱與產品列表完全一樣」。

這立即引發了一個重要的問題：什麼叫新員工表。我能想到的唯一選擇是：

給它的類名products以及。這是最快的解決方案，但是破壞了語義。命名對於未來的開發者尤其沒有多大意義。
將類名更改爲可包含產品和員工列表的內容。這將否定標記與風格分離的效用，因爲HTML需要改變。此外，我想不出一個非表象類別的名稱，可以想象應用於產品和的員工名單。
引入一個新的類名並編輯CSS文件，使得.products { ... }變成.products, .staff { ... }和.products thead th.number { font-weight: bold }變成.products thead th.number, .staff thead th.number { font-weight: bold }等。另一種醜陋的解決方案隨着時間的流逝只會變得更加複雜。

這裏採取的最佳行動方案是什麼？

N.B.我相信這個問題很容易用像LESS這樣的框架解決（我沒有親自使用它），但是這個解決方案更多的是作爲'掩飾'而不是實際的補救措施。

來源

2012-02-22 Sam Hastings

如何選擇4：

製作一份「產品」爲「員工」，繼續對他們獨立工作隨着時間的推移。

來源

2012-02-22 17:01:42

啊，那是我無法想起的第四種選擇！這不是我特別喜歡的解決方案。它打破了DRY原則，並且再次否定了分離內容和樣式所帶來的好處。然而現在它是最有吸引力的解決方案... – 2012-02-22 17:06:33

這也是一個更多未來的證明。 – 2012-02-22 17:07:40

如果你不得不把表格的風格寫成幾個字，那會是什麼？我試着用它來命名我可以在多個地方使用的風格。然後我知道如果我使用這個類，它會是什麼樣子。

例子：

。表條紋{}

來源

2012-02-22 17:03:15

如果你在將來重新調整表格的大小，並且它不再被分條，那麼你會被類名「.table-striped」卡住，它絕不會像表格的視覺屬性那樣。 – 2012-02-22 17:08:30

說實話，這是我見過的一個非常大的辯論。我已經從爭論的雙方讀到了一些東西。一個很好的閱讀讓你的css模塊化是：http://smacss.com/。即使你不同意，也有一些好的觀點和提示。 – 2012-02-22 17:17:45

這是對的事情，我真的不喜歡CSS之一。隨着所有強大的語言在我們的掌握之中，這一個似乎從一開始就處於非常普遍的情況下，像你的一樣。我也一直在努力，最終要麼將所有.product相關的類圖像複製到我的新圖像中，要麼將我的新圖像添加到.product圖像中。他們可能會被拖出。

我也需要研究預處理器，因爲我喜歡做的事情是OOP-y - 定義b'基類'，這兩個.product和.mynewone繼承並從那裏繼承。

但＃3是你最好的選擇國際海事組織。

來源

2012-02-22 17:07:38 n8wrl

我打算用first option，因爲如果一切都一樣&那裏只是內容的變化。因此，最好使用以前的products職員也可以&您可以在HTML頁面內的評論<-- staff plan-->的幫助下單獨定義您的職員面板。

來源

2012-02-22 17:08:01 sandeep

嗯......

基本上根本的問題是，你原來創建的第一個樣式類（.products）的想法是過於狹窄而得名。並不總是有可能知道您將來需要重新使用CSS定義的重要部分，但根據您的問題，您似乎處於該業務線中。

核心CSS框架不必說「讓我的新風格（.staff）是另一個相同的風格（.products）這些覆蓋」

的方式，但我認爲，LESS框架並給你可以快速定義具有所有屬性的類（.coolTable），並在多個其他類定義（.products和.staff）中重新使用這些屬性。

LESS框架不像CSS的功能擴展那樣是一種「掩蓋」。

來源

2012-02-22 17:17:35

我會去的第一個選項，有products類此塊....或者也許像class="products staff"

這樣，我不會有重複的樣式（甚至從未來方面，當代碼/風格可能會改變很多），並且產品的任何特定樣式都可以通過新類來完成（或者通過在樣式中使用父類來提供更具體的樣式）。

是，product類單詞不使多大意義在這裏，但即使再次爲未來的開發商來說，這仍然意味着您正在使用的樣式人員類，沒有涉及到邏輯...

但仍是的，如果可能修改標記放寬從product到其他一些字，我會做..但在這種情況下不作爲這樣一個主要要求...

來源

2012-02-22 17:19:18

爲新類型的內容引入個別類名會可能是最多正確 solu灰。但不幸的是，目前的CSS語法並不完美，因此迫使我們在CSS中通過逐一列出完整選擇符而過於冗長。

所以在實踐中，大多數可維護的解決方案通常是試圖爲不同的事物找到一個共同的名稱樣式相同。

來源

2012-02-22 17:23:55

這裏基本上有兩種思想流派。

1）跟隨標記的風格 2）跟風格的標記。

你必須弄清楚你想要做哪一個，並試圖堅持一個或另一個。如果你混合太多，那就毫無意義，你就會陷入一片混亂。

在第一個中，您有一個不會更改的設置標記。你找出風格讓它看起來像你想要的樣子。這是在禪宗禪宗花園的靜脈。它要求你的標記是非常有語義的。缺點是你經常會有很多重複的樣式，因爲使用這種方法時不能總是乾淨地設計樣式。

第二，你創建了很多常見的樣式，然後調整你的標記以適應樣式。例如，你可能會有一些「float」，「thinBorder」，「bold」類，然後將這些樣式應用於標記。這裏的缺點是，如果你的風格需要改變，那麼你必須改變HTML（或使粗體不是粗體或其他）。積極的一點是你的CSS更加乾淨和可維護。

它很爛，但你必須做出權衡。

來源

2012-02-22 17:50:38

我絕對是遵循標記的風格的倡導者。在我觸摸任何CSS之前，我寫了所有的HTML。所以考慮到這一點，我認爲我更傾向於複製樣式。然而，我全心全意地對那些不願意使用表象類名的人表示不同意見。有時，元素的呈現是首先給它一個類名的唯一原因。 – 2012-02-23 12:59:23

如何處理需要更改CSS類名稱

回答

相關問題