用SMACSS规范来编写CSS

这是一篇关于SMACSS（Scalable and Modular Architecture for CSS）理论的。这个理论可以分为五个核心部分：Base、Layout、Module、State和Theme。尽管它的核心思想与OOCSS（Object Oriented CSS）相似，鼓励使用class，但SMACSS在一些细节上进行了更为详细的阐述和实现。

1. Base：基本属性

基础属性是CSS的基石，它包含的是最基本、最通用的样式。它并不是一成不变的，随着网站规模扩大和需求的增加，设计师们的选择也会逐渐丰富，所谓的通用和统一也在不断变化。编写Base时，应该关注哪些样式是长期、跨项目可用的，哪些样式即使设计改变也只需要调整数值和颜色，而不是目前大部分页面都在使用的样式。

2. Layout：布局

布局是网站的基础，无论采用何种布局方式，都需要确保用户能够基本浏览页面。SMACSS理论特别强调布局的重要性，并建议使用特定的前缀来标识布局的class，如l-/layout-。

3. Module：模块

模块是SMACSS的核心思想之一，也是大多数CSS理论的基础。将样式模块化可以实现复用和可维护。在SMACSS中，模块应该拥有名称并作为其class名，其他相关class以模块名称为前缀。这样组织模块结构，既能提高易用性、可扩展性和灵活性，又能避免只为某些功能而特意编写的class。

4. State：状态

状态通常与JavaScript一起使用，用于标识页面状态。例如，"active"状态表示当前选中的标签或目标。SMACSS有一个专门的前缀来标识状态class，如"is-"，这有助于明确元素的当前状态。

5. Theme：主题

主题即皮肤，对于可更换皮肤的网站来说，结构和皮肤的分离是非常必要的。SMACSS鼓励使用主题文件来更换皮肤，只需更换加载的theme文件即可实现皮肤更换。

SMACSS是一个注重细节和实现的CSS理论。它非常适合初学者，能够帮助他们规范CSS编写，避免陷入混乱。其思想与OOCSS有很多相通之处，如果没有适合的方案，建议新手可以适当融入OOCSS的思想，同时使用SMACSS的结构来编写网站样式。这样的结合将使你的网站样式更加清晰、可维护，并具备良好的扩展性。