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://cache.yisu.com/upload/information/20220117/488/18093.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;

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

读到这里，这篇“web前端样式规范有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。