css/less/scss代码注意事项

一.命名

1.类名使用小写字母,以中划线分割;id 使用 驼峰式命名;

2.less/scss中的函数、混合采用驼峰命名;

  1. class 的命名不要使用 标签名,如.p .div .img;

二.选择器

尽量使用直接子选择器,否则,有时会造成性能损耗
.content .title { ... }(不推荐)(后代选择器)
.content > .title { ... } (推荐)(子选择器)

三.尽量使用缩写的属性

复制代码
border-style: solid; 
border-width: 1px; 
border-color: red;`

写成

复制代码
border: 1px solid red;

四.每个选择器及属性独占一行

不推荐下面的这种写法

复制代码
img { width: 100%;box-shadow: 3px 3px 3px 3px  #333;}

五.省略 0 后面的单位

复制代码
width: 0;
height: 0;
border-width: 0;

六.避免使用 ID 选择器及 全局标签污染全局样式

能不用 id选择器 就不要 使用id选择器,避免不是禁止

七、less/scss 避免嵌套等级过多,将嵌套深度限制在3层以内

八.项目命名

1.全部采用小写的方式

2.以中划线分割

例:smart-cellphone

九.目录命名

1.全部采用小写的方式

2.以中划线命名

3.复数时,要采用复数结构例:images 、assets等;

十.JS、CSS、SCSS、HTML、PNG等文件命名

全部采用小写的方式以中划线命名

例:home.html /index.less /public.css /login-logo.jpg 等

未完待续

相关推荐
geovindu4 小时前
css: Timeline scribble
前端·css·iphone
易朵朵19 小时前
CSS 格式化上下文
css·vue.js
COOLMO研究AI1 天前
企业官网服务页的信息架构怎么设计:从用户问题到语义化 HTML
前端·css·html
zhousenshan1 天前
SCSS 入门基础知识
scss
DsirNg2 天前
断点不该认识设备:组件布局的容器状态治理
css·前端工程化·组件化·响应式布局·css grid·设计系统·container queries
溪语流沙2 天前
【每天一个CSS | Day11】赛博朋克故障风文字:红青分离 + 切片抖动
前端·css
utmhikari3 天前
【AI原生】借助AI之力优化个人博客前端样式
前端·css·hexo·next·个人博客·ai-native·vibe coding
两个西柚呀3 天前
JS事件总结
前端·javascript·css
ss2734 天前
AI全栈实战 | 2.1-02 CSS 布局:垂直居中为什么是经典面试题?所有布局在解决什么矛盾
前端·css
peter67684 天前
css揭秘-背景和边框
前端·css