谈一下良好的CSS命名习惯

  • 时间:2018-08-04 21:29 作者:小郑搞码事 来源:小郑搞码事 阅读:192
  • 扫一扫,手机访问
摘要:点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!无疑乱七八糟或者者无语义命名的代码,谁看了都会抓狂。就像这样的代码:我想即便是初学者,也不至于会在实际项目中如此命名一个class,但有没有想过这样的代码同样是很有问题的:问题在于假如你需要把所有本来红色的字体改成蓝色,那修改后就

点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

无疑乱七八糟或者者无语义命名的代码,谁看了都会抓狂。就像这样的代码:

谈一下良好的CSS命名习惯

我想即便是初学者,也不至于会在实际项目中如此命名一个class,但有没有想过这样的代码同样是很有问题的:

谈一下良好的CSS命名习惯

问题在于假如你需要把所有本来红色的字体改成蓝色,那修改后就样式就会变成:

谈一下良好的CSS命名习惯

这样的命名就会很让人费解,同样的命名为.leftBar的侧边栏假如需要修改成右侧边栏也会很麻烦。所以,请不要用元素的特性(颜色,位置,大小等)来命名一个class或者id,您可以选择意义的命名如:#navigation{…},.sidebar{…},.postwrap{…}

这样,无论你如何修改定义这些class或者id的样式,都不影响它跟HTML元素间的联络。

另外还有一种情况,少量固定的样式,定义后就不会修改的了,那你命名时就不使用担忧刚刚说的那种情况,如下:

谈一下良好的CSS命名习惯

还有清浮动也是。

那么对于这样一个段落:

谈一下良好的CSS命名习惯

假如需要把这个段落由原价的左对齐修改为右对齐,那么只要要修改它的className就为alignright即可以了。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部