css规范

最新推荐文章于 2024-05-23 22:59:55 发布
最新推荐文章于 2024-05-23 22:59:55 发布
阅读量491 收藏
点赞数 1
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdx1170776994/article/details/131376754
版权
1.书写规范
1.1 命名

    id：语义化，少用慎用，避免样式污染

    class：小写，中划线 ‘-’或者双下划线  '__'  拼接 ，避免简写，推荐BEM 命名规范

正例： 

/*正例*/
.app__header-logo {
    height: 50px;
}

反例： 

/*反例*/
.appHead_logo {
    height: 50px;
}
1.2 格式化

    缩进、换行、空格、分号结尾

正例： 

/*正例*/
.app__content {
    flex: 1;
    border: 1px solid #ccc;
}

反例： 

.app__content{
flex: 1
 border: 1px solid #ccc
}
1.3 注释  /* */ 、//

作用、用途    推荐 /* */

正例： 

/* 底部页脚 */
.app__footer {
    width: 100vw;
    height: 60px;
}
/*全局字号*/
$font-size: 14px;
/* 详情页-卡片 */
@mixin details-card {
    min-width: 200px;
    font-size: $font-size;
}

反例： 

.app__footer {
    width: 100vw;
    height: 60px;
}
// 字体
$font-size: 14px;
/* 卡片 */
@mixin details-card {
    min-width: 200px;
    font-size: $font-size;
}
1.4 选择器

推荐：类、标签

       避免：通配符选择器、id选择器、嵌套层级过多

正例： 

/*结构层次分明*/
.app {
    .app__header {
        .app-logo {}
        .app-info {}
    }
    .app__container {
        .app-sidebar {}
        .app-conetnt {}
    }
    .app__footer {}
}

反例： 

/*层次太多太杂,难以准确选择到目标标签*/
.app .app__header .app__logo img {}
.app {
    div {
        ul {
            li {
                div {
                    span {}
                }
            }
        }
    }
}
1.5 值
1.5.1 长度单位

    px：像素  （常用 推荐）

    em：相对元素font-size的倍数  

    rem：相对根字体大小，html标签就是根

    %：相对父元素计算

    vw：视口宽度的百分比

    vh：视口高度的百分比

注：推荐使用 px，其他视情况而定，单位简写

正例： 

.main {
    border-width: .5px;
    margin: .8px;
}

反例： 

.main {
    border-width: 0.5px;
    margin: 0.8px;
}
1.5.2 颜色单位

HEX/HEXA：#ff0000;  （常用 推荐）

单词：red、green、blue

Rgb/rgba：rgb(0,0,0);   rgba(255,255,255,0.5);

HSL/HSLA：hsl(色相，饱和度，亮度)  

注：推荐使用 HEX/HEXA 二进制 ，简写、小写

正例：

.main {
    color: #fff;
    background-color: #000;
}

反例：

.main {
    color: #FFFFFF;
    background-color: #000000;
}
1.6 兼容性

     添加浏览器内核私有前缀  -webkit-、  -moz-、  -ms-、 -o-

     向下兼容，优雅降级 

     webpack、vite 等构建工具会根据打包配置自动添加浏览器前缀，进行兼容处理打包代码。

1.7 媒体查询

     作用： 根据屏幕尺寸和设备类型 调整样式

     避免： 同一个样式表中写入大量的媒体查询

 用法一： 

<link rel="stylesheet" media="具体的媒体查询" href="mystylesheet.css">

用法二： 

/* 在电子屏幕（电脑屏幕、平板屏幕、手机屏幕） 中 屏幕宽度小于768px*/
@media screen and (max-width:768px) {
  /*CSS-Code;*/
}
/* 在电子屏幕（）中 屏幕宽度 大于768px  小于 1200px */
@media screen and (min-width:768px) and (max-width:1200px) {
  /*CSS-Code;*/
}

2.书写顺序

2.1 位置布局 

    display、position、float、clear

2.2 盒模型

    width、height、margin、padding

2.3 文字、背景和边框

   background、border

2.4 动画和过度

   animation、transition

2.5 其他

   box-shadow、text-shadow、outline

正例： 

.main {
    /* 位置 */
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    z-index: 1;
    /* 盒模型 */
    width: 200px;
    height: 200px;
    padding: 0;
    margin: 0;
    /* 文字、背景、边框 */
    font-size: 16px;
    line-height: 20px;
    letter-spacing: normal;
    color: #fff;
    text-align: left;
    background-color: #c1c1c1;
    border: 1px solid #000;
    /* 动画、过度 */
    animation: none;
    transform: scale(0.8);
    /* 其他 */
    text-shadow: none;
}

反例： 

.main {
    background-color: #000;
    z-index: 2;
    text-align: center;
    line-height: 20px;
    width: 200px;
    animation: none;
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    height: 200px;
}

3.作用域 / 穿透

 3.1 scoped 

    作用：在style标签上绑定了自定义属性，防止css全局污染

示例： 

<style>
    /*公共样式*/
</style>
<style scoped>
    /*私有样式*/
</style>
  3.2  /deep/、 ::v-deep、:deep() 

    作用：样式穿透，可以在使用scoped 情况下 改变 第三方组件类名 样式

    注意：vue3.0 不推荐使用 ‘/deep/’

示例： 

/deep/ .el-button {
    color: #000;
}
::v-deep .el-button {
    color: #fff;
}
:deep(.el-button) {
    color: #000;
}

4.sass/less

4.1 嵌套  {{ }}

将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

样式结构清晰  

#app {
  width: 100vw;
  height: 100%;
  .header {
    height: 48px;
    width: 100%;
    .header-logo {
      width: 260px;
      height: 44px;
    }
  }
}
4.2 变量  $ 
$--color: #4d85ff;
$--border: 1px solid #c1c1c1;
$--border-radius : 4px;
.details-card {
  width: 400px;
  height: 260px;
  color: $--color;
  border: $--border;
  border-radius: $--border;
}
4.3 混合 @mixin   
$--color: #4d85ff;
$--border: 1px solid #c1c1c1;
$--border-radius : 4px;
/* 详情页 卡片样式*/
@mixin details-card {
  width: 400px;
  height: 260px;
  color: $--color;
  border: $--border;
  border-radius: $--border;
}
.details-card {
  /* 引用 */
  @include details-card;
}
4.4 导入 @import  
@import './base/index.scss'; //初始化、基础
@import './state/index.scss'; //状态
@import './mixin/index.scss'; //混合

5.styles文件目录 *****

5.1 目录结构

styles

 -index.scss  

 -base（基础、初始化）

 -theme（主题）

 -state（状态）

 -mixin (混合)

 -ui （ui组件）

 -layout（布局）

 -module（模块）

 -other (其他)

5.2 文件说明

styles

 -index.scss  

      输出文件，依照指定的引入顺序(5.1目录结构)引入styles文件下的所有样式文件

 -base（基础、初始化）

      初始化样式文件，借用淘宝  

      命名：标签

必要：是

 -theme（主题）

      适用于主题切换和自定义主题（字体颜色，背景色，边框色等） 

命名： --white-   、  --black-   、--

      必要：是，主题切换和自定义主题必有其一

 -state（状态）

      状态：选中、获取焦点，失去焦点、滑入，滑出，鼠标按下，鼠标松开。

      命名：is-  拼接

      必要：是

 -mixin (混合)

重复使用的样式，重复使用的样式代码块。 

      命名：--mix-     拼接

      必要：是

 -ui （ui组件）

放置需要统一修改ui组件样式。

      命名：继承组件库命名

      必要：否，视情况而定

 -layout（布局）

页面布局样式(整体布局，列表页布局、详情页布局)。

命名：l-      拼接

      必要：否，视情况而定

 -module（模块）

      模块：根据路由分模块，放置模块内可单独复用的样式

      命名：'--'+模块名称 + ‘-’   拼接

      必要：否，视情况而定

 -other (其他)

       其他：其他可复用的样式文件

      命名：推荐使用 BEM 命名规范

      必要：否，视情况而定

5.3规则
  1. 所有放在styles 文件夹里面的样式均是可复用的 ；
  2. 所有放在styles 文件夹里面的样式均需要写样式注释（说明）；
  3. styles 文件夹的子文件夹，需要则写，不需要则不写；
  4. index.scss 为输出文件、引入顺序如上文件列表排序由上至下；

6.布局

6.1 流式布局

     元素按照其在HTML中出现的顺序自动排列，元素的宽度会根据父元素的宽度自动调整

     适用于简单的页面布局、上中下

6.2 浮动布局

     通过设置元素的浮动属性（float）来实现布局，元素会脱离文档流并按照指定的方向浮动，

     适用于多列布局，左中右

6.3 定位布局

     通过设置元素的定位属性（position）来实现布局，元素可以根据父元素或其他元素进行定位。

     适用于绝对定位和相对定位的布局。

6.4 弹性布局

     通过设置容器元素的display属性为flex或inline-flex来实现布局，容器内的子元素可以根据指定的比例自动调整大小和位置

     适用于 子容器 大小宽高 不确定 时的布局，和一些相对复杂的布局

6.5 网格布局

     通过设置容器元素的display属性为grid来实现布局，容器内的子元素可以按照指定的网格进行布局

     适用于复杂的页面布局，宫格布局。

6.6 响应式布局

     通过使用媒体查询（Media Query）和CSS Grid等技术来实现不同屏幕尺寸下的布局调整，

     适用于适配不同设备和屏幕尺寸的布局。

布局实例展示（思维）

7.架构

7.1 原子化CSS

将CSS样式拆分成最小的可复用的单元，通过组合这些单元来构建页面。

7.2 BEM（Block Element Modifier）

将页面拆分成独立的块（Block），每个块包含一个或多个元素（Element），并通过修改器（Modifier）来改变块或元素的样式。这种方式可以提高代码的可读性和可维护性，但需要注意命名规范和层级关系。

  • block {}，block 代表了更高级别的抽象或组件。
  • block__element {}，代表 .block 的后代，用于形成一个完整的 .block 的整体。
  • block–modifier {}，代表 .block 的不同状态或不同版本。
7.3 OOCSS（Object-Oriented CSS）

将CSS样式抽象成可复用的对象，通过组合这些对象来构建页面。这种方式可以提高代码的复用性和可维护性，但需要注意对象的设计和组合方式。

7.4 SMACSS（Scalable and Modular Architecture for CSS）

将CSS样式按照功能和层级进行分类，通过模块化的方式来组织和管理样式。这种方式可以提高代码的可维护性和可扩展性，但需要注意模块的划分和命名规范。

7.5 CSS-in-JS

将CSS样式直接写在JavaScript代码中，通过JavaScript的能力来管理和组织样式。这种方式可以提高代码的可维护性和可扩展性，但需要注意代码的性能和复杂度。

cdShow985
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS规范手册.doc
10-29
CSS规范手册包括：CSS书写顺序、CSS命名规则、CSS写作建议、
前端规范 - css规范
loulanyijian的专栏
06-02 566
css是个神奇的东西，要精通css很难，但是不精通的话，通过各种拼凑，也能写出正常的界面。所以目前css届的前端网红，目前只有张鑫旭 css有性能一说，但影响不大，除非你使用那些没人使用的filter之类的魔法写法。比如选择器不能过长，但你发现选择器比较长的话，也不会有明显的性能问题 团队内部推广css规范，主要目的为2个：可维护性+避免样式污染 所以相对于JS，css的规范不是那么多，但也值得注意一下............
CSS规范
cherry_vicent的专栏
03-02 580
CSS编码规范是指比较通用的CSS书写方法。书写方法堆样式本身并没有影响。按照CSS编码规范来书写CSS，会使代码更加便于阅读。使用基本相同的CSS编码规范书写CSS，可以方便其他人的使用。 一、CSS基本书写规范 　　CSS基本书写规范包括3个方面：基本书写顺序和序号、书写方式和注解。 　　基本书写顺序 　　在使用CSS的时候，首先，建议使用调用的CSS，而不是把CSS写在H
CSS编程规范
怒放的生命的博客
11-14 1111
CSS编程规范
css 规范化 : 使用 Normalize.css 规范化 CSS 样式
学习笔记
11-20 908
Normalize.css 目的： Normalize.css 使浏览器更一致地呈现所有元素并符合现代标准。 它仅针对需要标准化的样式。 Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. 由于各种浏览器如 Firefox, Microso
css 命名规范
10-31
css 命名规范
css规范文档
12-22
web前端开发规范，css+div书写，命名规范说明
京东css_html_京东css规范_css_
10-04
使用纯粹的HTML和css对京东页面进行仿写，不使用js
前端CSS规范整理.doc
08-18
前端CSS规范整理
移动端/PC端布局-flex布局
微木
05-22 96
flex布局详解
前端 CSS 经典：3D 渐变轮播图
weixin_64684095的博客
05-23 337
前言：无论什么样式的轮播图，核心 JS 实现原理都差不多。所以小伙伴们，还是需要了解一下核心 JS 实验原理的。
CSS常用的两种定位方式
代码有点萌的博客
05-23 338
relative定位是相对自身原始位置进行偏移。absolute定位是相对于最近的已定位（relativeabsolutefixedsticky）祖先元素进行偏移。如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）进行定位。相对自身原始位置进行偏移。元素仍占据原始位置的空间。用于微调元素位置，不会影响其他元素的布局。脱离文档流，相对于最近的已定位祖先元素进行定位。不占据空间，其他元素会忽略它的位置。用于精确定位元素，通常与relative定位的祖先元素配合使用。
Web开发——HTML&CSS
一切皆是定数的博客
05-20 372
HTML：HyperText Markup Language，超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。以下就是html代码以及css样式搭配之后的显示效果。
SCSS基本使用
最新发布
mj256115的博客
05-23 377
SCSS（Sassy CSS）是一种 CSS 预处理器，它是 CSS 语言的一个扩展，增加了变量、嵌套规则、混合（mixins）、函数等功能，使得编写 CSS 更加高效和易于维护。SCSS 代码最终会被编译成标准的 CSS 代码。
Anti Desgin Vue 实现 表格可编辑、新增、删除功能
ChenJin_2的博客
05-23 62
Anti Desgin Vue 实现 表格可编辑、新增、删除功能
vue使用Less报错semi-colon expectedcss(css-semicolonexpected)的解决方法
qq_39691676的博客
05-20 139
2、在根目录中添加stylelint.config.js文件（与package.json同级）4、最后，在vscode的setting.json文件中加入以下内容。1、将 styleint 依赖项添加到项目中。3、在vscode中安装。
CSS动画技术（css-animation）
Zarathusa的博客
05-23 851
CSS Transition是一种用于实现元素状态变化平滑过渡的CSS技术。它允许你在元素从一种状态到另一种状态的过渡中添加动画效果，例如改变颜色、大小、位置等属性。过渡属性：在transition属性中指定需要过渡的属性（如颜色、宽度、高度等）。持续时间：使用时间单位（秒或毫秒）定义过渡的持续时间，控制动画的速度。缓动函数：指定过渡效果的缓动函数，它定义了动画过程中属性值的变化速度。过渡属性是你希望在元素状态变化时产生动画效果的CSS属性。这些属性定义了在过渡期间发生变化的元素属性。
CSS变量的应用
qq_26854355的博客
05-20 465
CSS变量的简单应用。
写一份前端通用css规范表格
03-02
好的，我会为您提供一份前端通用CSS规范表格，如下所示： | 规范 | 描述 | | --- | --- | | 使用字体 | 使用标准字体，如Arial、Helvetica、Times New Roman等。不要使用非标准字体，除非有特殊需要。 | | 字体大小...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值