CSS层分离如何用技巧编程_CSS层分离编程有哪些技巧

　　随着CSS的发展，使用CSS有语义化的命名约定和CSS层的分离，将有助于它的可扩展性，性能的提高和代码的组织管理。下面由学习啦小编为大家整理的CSS层分离编程的技巧，希望大家喜欢!

　　CSS层分离编程的技巧

　　一、命名规则

　　一个可靠命名规则的重要性是不可忽视的。就像组织结构带来的好处一样，这里有很多性能上的优势让你能够坚持地，有责任感地去命名你的选择器。

　　正确使用任何规则将会在大型项目减少与CSS相关的忧虑而发挥关键的作用

　　二、BEM

　　最流行的命名规则之一就是BEM(block：块，Element：元素，Modifier：修饰符)。通过给每个元素添加它的父级block模块作为前缀，使得目标的安全性变得更加简单了。BEM还有助于消除页面和body类对嵌套或者附加样式依赖。

　　CSS Code复制内容到剪贴板

　　.block {}

　　.block__element {}

　　.block--modifier {}

　　上面的例子展示了一个BEM项目的类结构，下划线(__)被用来区分元素，而用连字符(--)是用来修饰元素的。下面是一个现实世界的例子...

　　CSS Code复制内容到剪贴板

　　.product-details {}

　　.product-details__price {}

　　.product-details__price--sale {}

　　BEM中的一个圈套是引诱在修饰部分中添加多种用途的样式类。大的，小的，绿色的或者醒目的等修饰选择器被提出引入到标记中，这在不久的将来将会发生改变。

　　三、CSS Code复制内容到剪贴板

　　.product-details {}

　　.product-details__title {}

　　.product-details__title--small {}

　　像大多数的多用途类一样，在项目一开始的时候意图很明显，但是当一个设计改变的时候常常会导致矛盾的CSS。

　　四、SUIT

　　Suit起源于BEM，但是它对组件名使用驼峰式和连字号把组件从他们的修饰和子孙后代中区分出来。

　　CSS Code复制内容到剪贴板

　　.u-utility {}

　　.ComponentName {}

　　.ComponentName--modifierName {}

　　.ComponentName-descendantName {}

　　.ComponentName.is-someState {}

　　通过消除潜在的混乱连字符号连接元素名来使得选择器的可读性更强。

　　CSS Code复制内容到剪贴板

　　.ProductDetails {}

　　.ProductDetails-price {}

　　.ProductDetails-title--sale {}

　　五、加前缀

　　如果你不想使用如此严格或者复杂的命名规则，给每一个选择器加前缀同样可以达到这样的效果。

　　CSS Code复制内容到剪贴板

　　.s-product-details {}

　　.t-product-details {}

　　.js-product-details {}

　　这种方法使得它很容易的在表象类中辨别结构类但是只是简单的写和理解。在上面的例子中的结构属性将会被应用到s-product-details选择器中。主题属性将应用于t-product-details选择器。

　　CSS注释部分编程

　　一、CSS注释

　　就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等.

　　CSS注释的开始使用/*,结束使用*/

　　二、CSS注释语法

　　CSS Code复制内容到剪贴板

　　/* 注释内容 */

　　示例

　　/* ----------文字样式开始---------- */

　　/* 梦之都白色12象素文字 */

　　.dreamduwhite12px

　　{

　　color:white;

　　font-size:12px;

　　}

　　/* 梦之都黑色16象素文字 */

　　.dreamdublack16px

　　{

　　color:black;

　　font-size:16px;

　　}

　　/* ----------文字样式结束---------- */

　　三、风格建议

　　我使用行宽不超过 80 字节的文档块风格注释：

　　CSS Code复制内容到剪贴板

　　/**

　　* This is a docBlock style comment

　　*

　　* This is a longer description of the comment, describing the code in more

　　* detail. We limit these lines to a maximum of 80 characters in length.

　　*

　　* We can have markup in the comments, and are encouraged to do so:

　　*

　　Lorem

　　*

　　* We do not prefix lines of code with an asterisk as to do so would inhibit

　　* copy and paste.

　　在注释中应当尽量详细描述代码，因为对你来说清晰易懂的内容对其他人可能并非如此。每写一部分代码就要专门写注释以详解。

　　四、注释的拓展用法

　　注释有许多很高级的用法，例如：

　　1.准修饰选择器(Quasi-qualified selectors)

　　2.代码标签

　　3.继承标记

　　4.准修饰选择器(Quasi-qualified selectors)

　　你应当避免过分修饰选择器，例如如果你能写 .nav{} 就尽量不要写 ul.nav{}。过分修饰选择器将影响性能，影响 class 复用性，增加选择器私有度。这些都是你应当竭力避免的。

　　CSS如何编写

　　1.重置

　　首先，很认真的告诉你，总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset或者你自己编写的重置代码，只要使用就对了。

　　它能很简单的移除所有元素的填充(padding)和边距(margin)：

　　html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,

　　pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

　　Eric Meyer Reset和YUI Reset都是非常强大的，但是对于我而言，它们走的太远了。我觉得你最终需要重置一切，然后重新定义所有元素的属性。这就是为什么Eric Meyer推荐更有效的使用(重置样式表)，而你不要只是使用他的重置样式表，将它拖放到你的项目中。调整它(的重置样式表)，建立属于自己的重置样式 表。

　　噢，请停止使用：

　　* { margin: 0; padding: 0; }

　　花更多的时间去制作它，当你移除了填充(padding)你认为单选按钮会发生什么变化?表单元素有时能够做些时髦的事情，所以最有效的方式就是将他们独立。

　　2.排序

　　一个小的测试

　　这个例子就是要让你思考如何更快的找到右边距属性?

　　Example#1

　　div#header h1 {

　　z-index: 101;

　　color: #000;

　　position: relative;

　　line-height: 24px;

　　margin-right: 48px;

　　border-bottom: 1px solid #dedede;

　　font-size: 18px;

　　}

　　Example#2

　　div#header h1 { border-bottom: 1px solid #dedede; color: #000; font-size: 18px; line-height: 24px; margin-right: 48px; position: relative; z-index: 101;}

　　你不能告诉我Example#2不能更快的找到右边距属性。根据字母排序你的元素属性。一致的创建你的CSS，将帮助你节省花费在寻找一个特殊属性的时间。

　　我知道一些人用这样的方法去组织代码，其他人又用另一种方法去组织，但是在我的公司，我们协商一致做出决定，所有的代码都将按照字母排序来组织。通过这样组织代码与其他人协同工作一定是有帮助的。当我碰到属性没有按照字母排序的层叠样式表我每一次都会退缩。

　　3.组织

　　你应该组织你的样式表以致相关的内容靠在一起，更简单的找到想要的。使用更有效的注解。举个例子，这是我如何构造我的层叠样式表：

　　/*****Reset*****/

　　移除元素的填充(padding)和边距(margin)。

　　/*****Basic Elements*****/

　　定义基本元素的样式: body, h1-h6, ul, ol, a, p, 等.

　　/*****Generic Classes*****/

　　定义简单的风格，好像浮动的某一侧, 移除元素的下边距, 等

　　当然，它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。

　　/*****Basic Layout*****/

　　定义基本的模板: header, footer等. 帮助定义网页布局的基本元素

　　/*****Header*****/

　　定义所有Hearder元素

　　/*****Content*****/

　　定义所有内容框内的元素

　　/*****Footer*****/

　　定义所有Footer的元素

　　/*****Etc*****/

　　定义其他的选择器。

　　通过注解和归类相似元素的分组，将更快的找到你想要的。

　　4.一致性

　　无论你决定使用什么方式去编写代码，保持一致。我已经对全部放在1行VS多行的CSS编写编写方式的争论感到乏味和疲倦。这是不需要争辩的。每个人都有自己的观点，所以选择一种你喜欢的工作方式，并在所有的样式表中保持一致。

　　就我个人而言，我将使用两者结合的方式。如果一个选择器超过了3个属性，我将截断它采用多行的方式编写。

　　div#header { float: left; width: 100%; }

　　div#header div.column {

　　border-right: 1px solid #ccc;

　　float: rightright;

　　margin-right: 50px;

　　padding: 10px;

　　width: 300px;

　　}

　　div#header h1 { float: left; position: relative; width: 250px; }

　　所以找到你喜欢的工作方式然后保持一致。

　　5.从正确的地方开始

　　在完成标记语言之前不要去尝试靠近你的样式表。

　　当我准备分割一张网页的时候，创建CSS文件之前，我需要预览并且标记body开标签到body的闭合标签之间的所有文档。我不会增加额外的 DIV ,ID,或者类选择器。我将会添加一些一般的DIV，就好像hearder、content、footer.因为我知道这些东西是现实存在的。