Css4规范（css标准规范）

大家好，我是讯享网，很高兴认识大家。

 <p><strong>ID and class naming</strong> <br /><br />ID和class(类)名总是使用可以反应元素目的和用途的名称，或其他通用名称。代替表象和晦涩难懂的名称。 <br /><br />应该首选具体和反映元素目的的名称，因为这些是最可以理解的，而且发生变化的可能性最小。 <br /><br />通用名称只是多个元素的备用名，他们兄弟元素之间是一样的，没有特别意义。 <br />区分他们，使他们具有特殊意义，通常需要为&ldquo;帮手&rdquo;。 <br /><br />尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义， <br />语义化的名称 通常是正确的选择，因为它们所代表的信息含义，不包含表现的限制。 <br /><br />不推荐</p>

讯享网

推荐

合理的避免使用ID

一般情况下ID不应该被应用于样式。
ID的样式不能被复用并且每个页面中你只能使用一次ID。
使用ID唯一有效的是确定网页或整个站点中的位置。
尽管如此，你应该始终考虑使用class，而不是id，除非只使用一次。

不推荐

推荐

CSS选择器中避免标签名

当构建选择器时应该使用清晰，准确和有语义的class(类)名。不要使用标签选择器。如果你只关心你的class(类)名
，而不是你的代码元素，这样会更容易维护。

从分离的角度考虑,在表现层中不应该分配html标记/语义。
它可能是一个有序列表需要被改成一个无序列表，或者一个div将被转换成article。
如果你只使用具有实际意义的class(类)名，
并且不使用元素选择器，那么你只需要改变你的html标记，而不用改动你的CSS。

不推荐

推荐

尽可能的精确

很多前端开发人员写选择器链的时候不使用直接子选择器（注：直接子选择器和后代选择器的区别）。
有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。
然而，在任何情况下，这是一个非常不好的做法。
如果你不写很通用的，需要匹配到DOM末端的选择器，你应该总是考虑直接子选择器。

考虑下面的DOM:

下面的CSS将应用于有title类的全部三个元素。
然后，要解决content类下的title类和 teaser类下的title类下不同的样式，这将需要更精确的选择器再次重写他们的样式。

不推荐

推荐

缩写属性

CSS提供了各种缩写属性（如 font 字体）应该尽可能使用，即使在只设置一个值的情况下。

使用缩写属性对于代码效率和可读性是有很有用的。

不推荐

css 代码:

推荐

ID 和 Class（类）名的分隔符

使用连字符（中划线）分隔ID和Class（类）名中的单词。为了增强课理解性，在选择器中不要使用除了连字符（中划线）以为的任何字符（包括没有）来连接单词和缩写。

另外，作为该标准，预设属性选择器能识别连字符（中划线）作为单词[attribute|=value]的分隔符，
所以最好的坚持使用连字符作为分隔符。

不推荐

Hacks

声明顺序

这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性和可扫描重要。

作为**实践，我们应该遵循以下顺序（应该按照下表的顺序）：

结构性属性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
表现性属性：
background, border etc.
font, text
不推荐

推荐

声明结束

为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。

不推荐

推荐

css 代码:

属性名结束

不推荐

css 代码:

推荐

选择器和声明分离

每个选择器和属性声明总是使用新的一行。

不推荐

讯享网

推荐

规则分隔

规则之间始终有一个空行（双换行符）分隔。

推荐

css 代码:

CSS引号

不推荐

css 代码:

推荐

css 代码:

选择器嵌套 (SCSS)

在Sass中你可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。
如果你需要指定一些子元素的样式属性，而父元素将不什么样式属性，
可以使用常规的CSS选择器链。
这将防止您的脚本看起来过于复杂。

不推荐

css 代码:

不推荐

css 代码:

推荐

css 代码:

嵌套中引入空行 (SCSS)

嵌套选择器和CSS属性之间空一行。

不推荐

css 代码:

推荐

css 代码:

上下文媒体查询(SCSS)

在Sass中，当你嵌套你的选择器时也可以使用上下文媒体查询。
在Sass中，你可以在任何给定的嵌套层次中使用媒体查询。
由此生成的CSS将被转换，这样的媒体查询将包裹选择器的形式呈现。

不推荐

css 代码:

嵌套顺序和父级选择器(SCSS)

当使用Sass的嵌套功能的时候，
重要的是有一个明确的嵌套顺序，
以下内容是一个SCSS块应具有的顺序。

当前选择器的样式属性
父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
伪类元素 (:before and :after)
父级选择器的声明样式 (.selected, .active, .enlarged etc.)
用Sass的上下文媒体查询
子选择器作为最后的部分
The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.

Recommended

css 代码:

Css4规范（css标准规范）

相关推荐