CSS语义化命名方式及常用命名规则

CSS语义化命名

从上图我们可以大概看出这里有两种CSS的命名方式：1、结构化命名法；2、语义化命名法。

结构化命名法：根据页面中板块的位置而命名，如上图中的content-left,这时如果我们想把侧边栏sidebar放在左边，那么这时content-left板块却在右边，板块位置与其命名完全不符，那么我们这时就要修改页面中的以及CSS样式中的选择器名字了，这样会很不方便，尤其是当页面结构复杂时，一会儿left,一会儿right，这样会很不容易维护。

语义化命名法：根据页面中模块的功能而命名，如页面头部header、导航栏nav、主体main、侧边栏sidebar、底部footer、新闻列表newsList等等，这样整个页面看起来就比较清晰了，维护起来也比较方便。

那么具体来说，应该怎么命名呢，驼峰命名法？下划线命名法？中华线命名法？首先我们需要做到的是要见名知义，最好是用英文单词或通用的缩写来命名，对于是用驼峰命名法还是划线命名法，笔者建议两种都使用，驼峰命名法用来区别不同的单词，划线用来表示从属关系，如主导航栏，我们可以这样命名，mainNav代表这个导航，mainNav-current表示导航处于焦点状态，如本站的导航：

html代码如下：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表