記得當初Code-Review常常被問為何這樣命名？於是展開對於命名的追尋啊～看似簡單的一個Class命名，往往會影響到整個網頁的可讀性、維護性，甚至可能引發不小的問題呢！可能會遇到的痛點：
當為HTML元素添加CSS樣式時，經常需要給這些元素添加一個或多個Class，用來描述它們的樣式和行為。然而，選擇適當的Class名稱並不總是容易的。一個好的Class命名簡潔明瞭，能夠清晰地表達該元素的用途和風格。糟糕的命名可能會導致代碼變得難以理解，增加了維護的難度。
另一個常見的問題是，當在不同的地方使用相同的Class名稱時，CSS規則可能會互相衝突，導致一個Class的樣式被另一個Class意外覆蓋掉。通常是由於忘記了某個地方已經使用了相同的Class，或者是因為CSS權重的問題造成的。
CSS命名的結構也會直接影響到我們寫CSS樣式的方式。不同的命名風格可能需要不同的選擇器結構和命名細節，這可能會導致開發過程變得混亂。
當多人共同開發一個項目時，經常會出現對Class命名提出質疑的情況，解釋為什麼使用了特定的名稱，這需要具備合理的解釋。在CSS命名上，眾說紛紜。每個人都似乎有自己的命名風格和理念。
最簡單的方法，就是使用Google翻譯或其他翻譯工具，將單詞翻譯成目標語言，然後將其用作Class名稱。這種方法可能會導致一些奇怪的命名，因為翻譯工具不能總是正確地捕捉到單詞的語境和意義。像是我就遇過網頁上方的大片圖，我取名為cover因為圖片很大，很像封面，後來有學長說這也可以稱為banner吧！cover有點模糊！
在網路上，有一些整理了常用網頁命名的文件流傳著，可以參考這些名單，從中挑選適合的Class名稱。這種方法或許讓命名變得更具一致性，但名單不是每個人都認同。
一些流行的UI框架，這些框架通常有一套自己的命名風格和規則，可以參考這些框架的元件命名方式，例如：bootstrap的元件。
當我開始做團隊side-project時，或者開始參與大型項目的開發時，單純的命名方法可能不再適用，這時需要考慮以下幾個因素：
制定設計指南，其中包括CSS命名的規則和慣例。這些指南通常是為了確保整個專案的一致性，並簡化團隊協作。
團隊成員之間應該達成一致，共同決定使用的命名風格和規則，減少混亂和衝突，使開發過程更加順暢。
有時，特定的行業或領域可能有自己獨特的『術語』和命名規則，了解這些規則並遵循它們，有助於溝通。
深入研究CSS命名的世界時，會發現有許多不同的命名流派和方法。在這裡簡要介紹三個常見的流派：
BEM是流行的CSS命名方法，將元素分為『Block』、『Element』和『Modifier』三個部分，以清晰地描述元素的結構和狀態。這種方法有助於避免命名衝突，並提高可讀性。
SMACSS是模組化的CSS命名方法，強調將CSS代碼分為不同的模組，有助於維護性和擴展性。它提供指導性原則，組織和管理CSS。
OOCSS是將CSS樣式視為可重用對象的方法，強調樣式的抽象和重用，有助於減少冗餘並提高可維護性。
後來我跑去找饅頭，分享我的命名之旅，然後他給我一個『Domain』的概念，然後叫我自己去研究研究，我想最終，CSS命名的目標是為了解決商業邏輯和技術邏輯的問題吧！以下是簡介我對於『Domain』的理解。
起手式，要先理解項目的問題領域，應該根據項目的需求和功能，分析各個元素和組件應該如何命名，這需要對項目的需求有深入的理解，以確保命名能夠反映出項目的結構和邏輯。
然後，需要考慮技術領域，即使用的技術和框架，不同的技術和框架可能有不同的命名風格和約定，根據所使用的技術來進行命名，確保寫出來的code與技術保持一致，提高可維護性和擴展性。
看來命名這件事有很多方式呢!不知大家都是怎樣開始的？這裡簡單介紹我對命名的追尋，更多細節部分有機會在來寫文章分享吧！如果你想要選個流派，可以依據每個流派發明的原因來進行參考和選擇，而無論使用的是BEM、SMACSS還是OOCSS，這三種核心概念拆解，分為『佈局』、『元素』和『樣式』都是有助於建立易懂、易維護的CSS的重要基礎，無論選擇哪種命名方法，還是要與團隊達成開發共識呦！
更多文章請見部落格
https://jessie-c.notion.site/Jessie-s-Box-d866de1474204b4c87fcebcc9869d8aa
iThome鐵人賽
看影片追技術