与smacss规范编写CSS

本文主要介绍了smacss规范编写CSS的使用，smacss着重对CSS和HTML和Javaｓｃｒｉｐｔ的组合，和需要的朋友可以参考
这是一个比较复杂的CSS理论，共分为五个部分：基础、布局、模块、状态和主题。然而，它的核心思想仍然类似于OOCSS，鼓励类的使用。

1。基本属性

基本属性易于理解。这是最基本的东西。许多简单的网站，通过一个简单的两级CSS文件模式，一个触发用于所有页面，每个页面都有一个特定的CSS文件。我想这是基地的雏形，确切地说是什么，如重置文件，如一个地方一套像clearfix或BFC工具文件。

事实上，我们会发现，在基地的CSS属性将被用于几乎所有的站，但我不想描述的基础，因为它是误导性的。在大多数情况下，只有几个简单的页面在网站建立之初，所以这些页面需要使用成为通用属性的属性，但它不是那么简单。随着网站规模的不断扩大，需求的增加，设计师们的灵感，所谓的通用和统一也察觉不到。所以当写作基础，应遵循的参考是什么风格，你的网站将也要使用，即使设计改变时只需要改变一些观念和色是什么风格，这风格的一些基本原则原则；而不应该被用在当前的页面风格放在基地，或者说，他们可能是完全相同的，而不是逻辑。

2。布局

布局是网站的基本部分。无论是左或右，或是其他什么布局，布局实现基本的浏览function.smacss也把这个功能单独很正确很重要的，和一个前缀L /布局也同意确定类的布局。以最常见的例子。
复制代码如下：l-header { }。
l-brand { }。
l-navigator { }。
l-container { }。
l-sidebar { }。
l-content { }。
l-footer { }。

这是一个简单的布局，导航和罗上的守法。

三.模块模块

模块是smacss最基本的理念，也是大多数CSS的理论基础。模块化模块化可以实现可重用性和可维护性的目的，但smacss提出了更具体的模块化方案。首先，在smacss模块应该有个名字和它的类的名字，和模块前缀的其他类。例如：

CSS代码将内容复制到剪贴板。
产品{ }
产品名称{ }
产品图片{ }
产品边界{ }
产品阴影{ }

您可以看到，产品是示例中的一个模块，标题和图像是模块中包含的组件，但不可用。边框和阴影是相似的类附OOCSS改变模块本身。总之，在这个模块中，可以利用它的名字做前缀，组织任何模块的结构，但此刻，这使得它更容易使用，提高可扩展性和灵活性。如果你只是为一些函数写一些类，它会感觉有点真实。

4。状态

国家通常是用Javaｓｃｒｉｐｔ，这是一个用来识别页面状态类，无论是用户标识或通过程序识别。作为一个常见的例子，很清楚。活动通常是用来代表当前选项卡，或当前选定的目标，是一种状态，需要知道无论是风格或程序。

smacss还有相应的前缀，用来标记状态类，并且是一个合适的词，表示某种元素是什么状态。

5。主题主题

主体是皮肤和皮肤OOCSS分离恰逢结构。更重要的是，对于一个网站的可更换皮肤的分离是必要的，而且皮肤只更换加载主题文件替换。

总的来说，smacss是注重CSS进行了详细的理论和实现，对早期的CSS很合适，它可以让你的CSS运行不脱轨的轨道，其思想也有很多相似之处OOCSS。如果没有合适的解决方案，我建议新手可以适当融入OOCSS思想和使用smacss结构，使网站的风格不拘泥至少。