css3技术

CSS网页架构教程(2)

字号+ 作者:H5之家 来源:H5之家 2015-09-09 11:00 我要评论( )

1.在你的选择器里不容许使用id 2.在任何由多个部分组成的规则里不要使用类型选择器(如div,span) 3.在一个选择器里不要使用多于两个关系选择器 4.不容许任何类名以js-开头 5.如果经常在布局和定位中使用没有l-前缀

1.在你的选择器里不容许使用id
2.在任何由多个部分组成的规则里不要使用类型选择器(如div,span)
3.在一个选择器里不要使用多于两个关系选择器
4.不容许任何类名以‘js-’开头
5.如果经常在布局和定位中使用没有‘l-’前缀的规则出现警告
6.如果一个类名定义本身,之后作为其他元素的子元素重新定义出现警告
这些明显只是建议,但是可以促进你思考如何在你的项目中执行标准。

HTML校检

早期我建议可以搜索你的html中类名和所有链接的样式表,如果在html中出现的类名,但是在任何一个样式表里面没有定义,就会出警告。我现在在开发一个叫HTML Inspector的工具(我将很快放源)使得这个过程更容易。

Html Inspector遍历你的html代码(像css lint)容许你写自己的规则,当一些约定规则破坏时候抛出错误和警告。我目前使用以下规则:

1.如果相同的id不止一次出现在一个页面上,就会有警告
2.不使用任何在任何样式表或是通过的白名单里没有提到的类名(像“js-”前缀的类名)
3.没有基类名不应该使用modifer类
4.没有祖先元素包含基类子元素类名不应该使用
5.普通的旧div或是span元素,没有附加类,不应该用于html

总结

css并不只是视觉设计。不要仅仅因为你在写css就扔掉编程中的最佳实践。像面向对象,dry概念,开闭原则,关注点分离等等,仍然适用于css。

底线是任何可以组织你的代码的东西,确保你判断你的方法是否有效帮助你开发容易,长期更易维护。



 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML CSS网页基础开发教程第1讲01

    HTML CSS网页基础开发教程第1讲01

    2015-10-02 16:42

  • HTML CSS网页基础开发教程第1讲02

    HTML CSS网页基础开发教程第1讲02

    2015-10-02 16:42

  • HTML CSS网页基础开发教程第1讲03

    HTML CSS网页基础开发教程第1讲03

    2015-10-02 16:42

  • HTML CSS网页基础开发教程第1讲04

    HTML CSS网页基础开发教程第1讲04

    2015-10-02 16:42

网友点评