1.样式文件命名
- 公用样式文件命名
- 基本公用样式：base.css
- 布局，版面：layout.css
- 表单：form.css
- 模块样式文件：使用模块功能命名 [如：order.scss]
2.类名命名规范
- 类名统一使用小写英文字母，词组使用 ‘-’ 连接，只能以英文字母开头
- 禁止驼峰命名 className
// 推荐
.class-name{}
// 不推荐
.className{}
.class_name{}
.leiming{}
// 错误
.123class{}
- 不允许单个字母的类选择器出现；
- 见名知意，语义明确情况下可简写，表达不清晰时请勿简写
.navbar{}
.nb{} // 不明确的命名
代码风格：统一使用展开型
- 紧凑型
- 展开型
// 紧凑型【X】
.box{ display: block;width: 50px;}
// 展开型【推荐】
.box{
display: block;
width: 50px;
}
属性书写顺序
建议遵循以下顺序：
一 简单版
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等)
二 详细版
- 定位属性
- display： block/ inline-block/ inline /none/ flex 规定元素应该生成框的类型
- position：stastic/ relative / absolute/ fixed 规定元素的定位类型
- float： left / right 规定框是否应该浮动
- left, top, right, bottom
- overflow： 规定当前内容溢出元素框时发生的事情
- clear
- z-index 设置元素堆叠顺序
2.自身属性
- width， height
- border， background
- margin， padding
- 文字样式
- font-family
- font-size
- font-weight
- font-style
- color
文本属性
text-align 规定文本的水平对齐方式。
vertical-align 设置元素的垂直对齐方式。
text-wrap 规定文本的换行规则。
text-transform 控制文本的大小写。
text-indent 规定文本块首行的缩进。
text-decoration 规定添加到文本的装饰效果。
letter-spacing 设置字符间距。
word-spacing 设置单词间距。
white-space 规定如何处理元素中的空白。
text-overflow 规定当文本溢出包含元素时发生的事情。CSS3新增属性
box-shadow 向方框添加一个或多个阴影。
cursor 规定要显示的光标的类型（形状）。
border-radius
background:linear-gradient
transform…… 向元素应用 2D 或 3D 转换。
⚠️注意事项
- 不要以完全没有语义的标签作为选择器,这会造成大面积污染
- 简写CSS颜色属性值：当设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半
- 删除CSS属性值为0的单位，去掉小数点前面的0
span{ background: #f00; } // 不推荐，标签样式污染
.class-name{
padding: 0 0 10px 10px; // 为0的px单位可以省略
background: #ffffff; // 可简写为#fff
border-color: #ffaabb; // 可简写成#fab
font-size: 0.2rem; // 可缩写为 .2rem
}
常用css命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
Scss
- 变量$的使用
- 通过变量来复用属性
$bgColor: #ccc;
$subTextColor: #333;
$bdColor: #e5e5e5;
.footer{
width: 100%;
height: 100px;
color: $subTextColor;
}
.friend-link{
color: $subTextColor;
}
- 这里我们可以要求设计师给一套特性的配色方案，文字大小，间距值，前端先根据设计规范，作出一份基本的单样式文件，方便后续使用
scss规范
https://guide.aotu.io/docs/css/sass.html
注释
插件：koroFileHeader
-
文件头部添加注释:
- 在文件开头添加注释，记录文件信息/文件的传参/出参等
- 支持用户高度自定义注释选项, 适配各种需求和注释。
- 保存文件的时候，自动更新最后的编辑时间和编辑人
- 快捷键：
window：ctrl+alt+i,mac：ctrl+cmd+i,linux:ctrl+meta+i
-
在光标处添加函数注释:
- 在光标处自动生成一个注释模板, 自动解析函数参数，生成函数参数注释。
- 支持用户高度自定义注释选项
- 快捷键：
window：ctrl+alt+t,mac：ctrl+cmd+t,linux:ctrl+meta+t - 快捷键不可用很可能是被占用了,参考这里
支持一键添加佛祖保佑永无BUG、神兽护体等注释图案
window：ctrl+alt+j, mac：ctrl+cmd+j
注释规范
- 注释以字符 /* 开始，以字符 */ 结束
- 注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行
- 模块注释：
格式化工具
开发工具统一，配置统一
- 使用vscode开发
-
插件
vetur.png
prettier.png
eslint.png
对应的Eslint配置（.eslintrc）后补。。。
- 工具配置
配置中有用户设置与工作区间设置- 用户设置：这种方式进行的设置，会应用于该用户打开的所有工程；
-
工作区间设置：工作空间是指使用VS Code打开的某个文件夹，在该文件夹下会创建一个名为.vscode的隐藏文件夹，里面包含着仅适用于当前目录的VS Code的设置，工作空间的设置会覆盖用户的设置。
image.png
// 用户配置
{
"files.autoSave": "off",
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"editor.wordWrap": "on",
"html.format.indentInnerHtml": true,
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"workbench.sideBar.location": "right",
"search.followSymlinks": false,
"editor.tabSize": 2,
"editor.detectIndentation": false,
"window.zoomLevel": 0,
"dart.debugExternalLibraries": true,
"dart.debugSdkLibraries": true,
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"editor.acceptSuggestionOnCommitCharacter": false,
"vetur.completion.scaffoldSnippetSources": {},
"autoimport.useSemiColon": false,
"vueBeautify.isRootIndent": false,
"prettier.semi": true,
"python.linting.pylintUseMinimalCheckers": false,
"beautify.language": {},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": true, // 格式化加分号
"singleQuote": true, // 使用单引号代替双引号
"trailingComma": "none"
},
"js-beautify-html": {
"wrap_line_length": 120,
"wrap_attributes": "force-aligned", // 强制对齐换行
"end_with_newline": true
},
},
"fileheader.configObj": {
"createFileTime": true,
"language": {
"languagetest": {
"head": "/$$",
"middle": " $ @",
"end": " $/"
}
},
"autoAdd": true,
"autoAddLine": 100,
"autoAlready": true,
"annotationStr": {
"head": "/*",
"middle": " * @",
"end": " */",
"use": false
},
"headInsertLine": {
"php": 2
},
"beforeAnnotation": {
"文件后缀": "该文件后缀的头部注释之前添加某些内容"
},
"afterAnnotation": {
"文件后缀": "该文件后缀的头部注释之后添加某些内容"
},
"specialOptions": {
"特殊字段": "自定义比如LastEditTime/LastEditors"
},
"switch": {
"newlineAddAnnotation": true
},
"supportAutoLanguage": [],
"prohibitAutoAdd": ["json"],
"prohibitItemAutoAdd": [
"项目的全称, 整个项目禁止自动添加头部注释, 可以使用快捷键添加"
],
"moveCursor": true,
"dateFormat": "YYYY-MM-DD HH:mm:ss",
"atSymbol": ["@", "@"],
"atSymbolObj": {
"文件后缀": ["头部注释@符号", "函数注释@符号"]
},
"colon": [": ", ": "],
"colonObj": {
"文件后缀": ["头部注释冒号", "函数注释冒号"]
},
"filePathColon": "路径分隔符替换",
"showErrorMessage": false,
"wideSame": false,
"wideNum": 13,
"CheckFileChange": false,
"createHeader": true,
"useWorker": false,
"typeParam": true,
"designAddHead": false,
"headDesignName": "random",
"headDesign": false
},
"fileheader.cursorMode": {
"Date": "Do not edit",
"LastEditors": "mo",
"description": ""
},
"fileheader.customMade": {
"description": ""
},
"eslint.alwaysShowStatus": true,
"eslint.quiet": true,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true
},
"eslint.codeAction.showDocumentation": {
"enable": true
},
"minapp-vscode.prettier": {
"useTabs": false,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": false
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"html.format.wrapAttributes": "aligned-multiple"
}
