web前端样式规范有哪些(web前端,web开发)

命名规范

1.CSS 命名一般采用小写英文字母或组合命名，单词以单词间以"-"分割；英文单词不缩写，除非一看就明白的单词。

2.所有组件中的最外层元素都加一个以组件名+wrap命名的样式，如：

orderList组件：

<template>

<div class="order-list-wrap">

</div>

</template>

3.class 必须代表相应模块或组件的内容或功能，不得以样式信息进行命名，如：

<!-- good -->

<div class="sidebar">

</div>

<!-- bad -->

<div class="left">

</div>

4.css选择器: 尽量用class选择器，少用元素选择器(如：div)

页面结构命名

wrap：代表整个页面，用于最外层

container：一个整体容器，用于最外层

head,header 页头区域，用于头部

nav：导航条

content：内容，用于网站中部主体

main：网站中的主要区域，用于中部内容。

sidebar：侧栏

footer： 页脚

导航命名

nav：导航条

topnav：顶部导航

mainnav：主导航

title：标题

menu：菜单

submenu：子菜单

drop：下拉

dropmenu：下拉菜单

links：连接菜单

样式顺序规范

建议相关的属性说明放在一组，提高代码的可读性。

布局方式、位置、相关属性 (position、left、right、top、bottom、z-index)

盒子模型，相关属性包括 (display、float、width、height、margin、padding、border、border-radius)

文本排版，相关属性包括 (font、color、background、line-height、text-align)

视觉外观，相关属性包括 (color、background、list-style、transform、animation)

由于定义可以从正常的文档流中移除元素，并且还能覆盖盒模型相关的样式，因此排在首页。而盒模型决定了组件的尺寸和大小，所以排在第二位。文本和视觉对元素影响较小，所以放在第三，第四位。示例代码如下：

.box {

position: absolute;

top: 0;

left: 20%;

z-index: 99;

width: 100px;

height: 100px;

font-size: 20px;

color: red;

background-color: aqua;

}

小数点和单位

值在 -1 和 1 之间去掉小数点的 0，如果属性值为数字 0，不加任何单位。

.box {

width: 100px;

height: 100px;

margin: 0 10px 20px 0;

opacity: .5;

}

引号

属性选择器或属性值用双引号 ""括起来，而 URL 值 url() 不要使用任何引号。

.box {

font-family: "open sans",arial,sans-serif;

background-image: url(https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/iaue3ek23pf.jpg);

}

空格

在每个声明快选择器与左括号浅添加一个空格；

声明快的右花括号应当单独成行；

每条声明语句的；后应该插入一个空格，前面无空格；

.box {

float: left;

width: 100px;

color: #333;

background-color: #f5f5f5;

text-align: center;

}

媒体查询

将媒体查询放在尽可能相关规则的附近，方便日后查阅。

.element {

}

.element-avatar {

}

@media (min-width: 480px) {

.element {

}

.element-avatar {

}

}

注释

在适当的位置给予代码正确的注释，让他人更容易理解。好的代码注释传达上下文和目标

/*

名称

各参数表示的含义

*/

.modal-header {

}

全局样式命名规范

全局样式采用十六进制进行命名，例如：

$color-ffffff: #ffffff;

有透明度的情况，一般在其十六进制的后面加多一个字母 a已视区别

$color-ffffffa: #ffffff;

如有相同十六进制相同，那么在其十六进制后面加多一个其代表的功能