说一下css规范？

2023-04-22 14:41:01html-css028

说一下css规范？,第1张

一、Css书写顺序：

1.位置属性(position, top, right, z-index, display, float等)　

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)　

4.背景(background, border等)

5.其他(animation, transition等)

二、Css语法：

命名一般为小写英文字母。

为了代码的易读性，在每个声明块的左花括号前添加一个空格。

每条声明语句的 : 后应该插入一个空格。

所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。

十六进制值应该全部小写，例如，#fff。

尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。

避免为 0 值指定单位，例如，用 margin: 0 代替 margin: 0px。

Css常用的一些命名：

可参考：CSS 常用命名 - 彼岸时光 - 博客园。

三、Css的引入：

Css的引入一般有两种，link和@import,一般建议使用link引入。这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。

四、Css的命名规范(BEM,OOCSS)：

什么是BEM：BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。

命名约定如下：

.block{} // 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。

.block__element{} // 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。

.block--modifier{} // 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观。

优点：

BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。在 BEM 命名规则中，所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性（specificity）都是相同的，也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了，而且类名的层次关系可以与 DOM 节点的树型结构相对应。

缺点：

这样类名过于长，且复杂。

什么是OOCSS（面向对象CSS）：

OOCSS 表示的是面向对象 CSS（Object Oriented CSS），是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。 OOCSS最关键的一点就是：提高他的灵活性和可重用性。这个也是OOCSS最重要的一点。OOCSS主张是通过在基础组件中添加更多的类，从而扩展基础组件的CSS规则，从而使CSS有更好的扩展性。

OOCSS的优点：

减少CSS代码。

具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系。

语义标记，有助于SEO。

更好的页面优化，更快的加载时间（因为有很多组件重用）。

可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件。

能轻松构造新的页面布局，或制作新的页面风格。

OOCSS的缺点：

OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。

欢迎到优就业来了解

zoukankan html css js c++ java

IE浏览器加载CSS文件，但是不起作用的原因

如果有哪一天，你突然发现自己写的的脚本不起作用了，而这一切又只是发生在IE浏览器上，你会怎么办？你是认为自己写的程序有问题呢？还是认为IE处理程序有问题？其实这个问题想都不用想，肯定是我们写的程序有问题。因为我们是程序员，我们要解决的方案就是做一款兼容所有主流浏览器的应用程序。如果应用程序有问题，那就是我们的解决方案不成熟。

这个问题已经发现很久了，只是一直忙于系统功能的开发，而没有去解决浏览器的兼容方案。最近得空，终于有机会去解决一下这个难题，先描述一下这个Bug的表现形式。界面在FireFox等浏览器下页面显示正常，而在IE浏览器下某些CSS样式没有应用上，注意并不是所有的CSS没有起作用，只是有一部分CSS在IE下没有起作用，这里我们可以排除没有引用JS文件或者引用JS路径不正常的问题了。

出现上述问题，我们的第一反应通常都是CSS语法不标准引起的，这些CSS语法在FireFox下可以识别，但是在IE下却不会识别，我们知道不同浏览器处理解析CSS样式表是有一定区别的。不错，我也怀疑自己的CSS语法不规范，但是经过仔细审核后，我发现并非是语法问题。第一，CSS语法采用了标准的通用语法，在各个浏览器下都是相同的；第二，在IE浏览器下，并没有嗅探到相应的class。由此可以断定，应该是那些CSS文件没有被正确引入。

但是我们的CSS文件引入方式都是一样的，并且都是放在CommonThemes同一个文件下进行引用，这样做有两个好处：一是便于管理CSS文件；二是减少了因引用路径不正确而造成的错误。照常理来说，这样做是不该出问题的，然而这也正是那个不按常理出牌的IE的问题所在。

原来在IE浏览器下，通过使用<script type = "javascript"/>来引用文件时，IE仅能识别31个文件。如果在引用的文件大于31个，IE就会自动过滤掉。因为我们将整个系统的CSS文件全都是放在CommonThemes目录下，远远大于31个。所以在第31个CSS文件之后的文件，就不再起作用了。

既然这样，我们就必须把CSS文件分拆放到不同的<script>标签下，以防止一个<script>标签加载CSS文件数量超过31个。我们的解决方案是按照系统的架构及业务需求将CSS引用文件分为多个文件，保证每个文件下CSS的路径数量不超过31个。

IE最多只允许引用31个文件，一般情况下，我们确实不需要在一个脚本下引入这么多的文件。IE之所以这样做，可能是想提高系统运行的效率，防止内存泄露等。只不过仅凭它的一己只想，就进行了文件过滤，实在是大大的不该。别忘了，程序员的目标是解决问题，而非制造问题