css开发规范

最新推荐文章于 2022-04-30 07:45:07 发布

_sosuke

最新推荐文章于 2022-04-30 07:45:07 发布

阅读量337

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_44786836/article/details/118644671

版权

本文介绍了CSS开发的规范和最佳实践，包括命名空间规范（如g-布局，s-状态，u-工具，m-组件，j-钩子），CSS书写顺序（位置属性，大小，文字，背景等），CSS书写规范（如使用缩写属性，去掉小数点前的0，连字符命名），选择器使用，代码注释规则，避免随意使用ID，以及状态前缀的使用等。提供了一套完整的CSS代码风格指导。

摘要由CSDN通过智能技术生成

一、CSS规范
1.命名空间规范(了解)
1.布局：以 g 为命名空间，例如：.g-wrap 、.g-header、.g-content。
2.状态：以 s 为命名空间，表示动态的、具有交互性质的状态，例如：.s-current、s-selected。
3.工具：以 u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix、u-ellipsis。
4.组件：以 m 为命名空间，表示可复用、移植的组件模块，例如：m-slider、m-dropMenu。
5.钩子：以 j 为命名空间，表示特定给 JavaScript 调用的类名，例如：j-request、j-open。
2.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等)
在这里插入图片描述
3.CSS书写规范
使用CSS缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。