前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范

下面是关于“前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范”的完整攻略。

目录

命名规范

  1. 选择器和属性命名使用小写字母 : 所有的选择器(class和id)和属性名都应当使用小写字母。

  2. 共同前缀 : 对于属于同一组件或者定制化组件的样式,使用共同的前缀,以区别于其他样式。

  3. 中划线(-)连接符 : 在CSS类选择器和ID选择器中,使用中划线连接符,以清晰表明单词的分隔。

  4. 语义化 : 使用简单、清晰、有语义的名称,不使用具备歧义或者计算机专用的缩写和简称。

代码格式

  1. 缩进 : 使用2个空格进行缩进,而不是使用制表符。

  2. 分号 : 在CSS声明的末尾始终加上分号。

  3. 空格 : 属性值前一定要有一个空格,以增加可读性。

  4. 每行样式数不超过1个 : 为了提高代码的可读性,每行不要超过一个样式。

注释规范

  1. 组件注释 : 用注释说明该部分的作用,命名,使用方式等,最好使用多行注释。

  2. 行内注释 : 行内注释使用双斜线(//),表示注释说明该行的属性或者作用。

  3. 结构注释 : 使用注释说明这一部分的含义(如容器)。

SCSS 规范

  1. 使用变量 : 在SCSS中,使用变量可以提高代码的复用性和易维护性。

  2. 使用嵌套 : 使用嵌套可以简化层级结构,提高代码可读性。

  3. Mixin 和 Include : Mixin和Include是SCSS的较为重要的特性,可以封装一些常见的样式。

示例说明

下面是两个示例说明,用于展示如何应用上面所讲的规范。

示例 1

<div class="home-page">
  <div class="home-page-header">
    <h1>Welcome to my website</h1>
  </div>
  <div class="home-page-content">
    <p>This is a paragraph</p>
  </div>
</div>
.home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &-header {
    margin-bottom: 20px;

    h1 {
      font-size: 24px;
      font-weight: bold;
    }
  }

  &-content {
    p {
      font-size: 16px;
      font-weight: normal;
    }
  }
}

示例 2

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4">
      <p>This is a paragraph</p>
    </div>
    <div class="col-sm-6 col-md-8">
      <img src="example.jpg" alt="">
    </div>
  </div>
</div>
.container {
  max-width: 960px;
  margin: 0 auto;

  .row {
    display: flex;
    flex-wrap: wrap;
  }

  .col-sm-6 {
    width: 50%;
  }

  .col-md-4 {
    width: 33.33%;
  }

  .col-md-8 {
    width: 66.67%;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}

以上就是关于“前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范”的完整攻略。希望对您有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范 - Python技术站

(0)
上一篇 2023年6月9日
下一篇 2023年6月9日

相关文章

  • Spring Boot实现文件上传下载

    来讲解一下“Spring Boot实现文件上传下载”的完整攻略。这里将分为以下步骤: 添加依赖 创建上传文件的控制器 创建下载文件的控制器 1. 添加依赖 首先,在我们的Spring Boot项目中添加依赖。这里我们需要添加的依赖是Spring Boot Web和Apache Commons Fileupload,后者是用来支持文件上传的。在Maven项目中…

    css 2023年6月10日
    00
  • jquery使用ul模拟select实现表单美化的方法

    下面是关于“jQuery使用ul模拟select实现表单美化的方法”的完整攻略,包含以下几个部分。 简介 在Web开发中,表单是常用的一种交互方式。其中,select元素是常用的表单元素之一,但是由于select元素在样式上与其他元素不协调,所以我们需要对其进行美化。本文介绍了使用jQuery实现使用ul模拟select元素的表单美化方案。 实现步骤 HTM…

    css 2023年6月10日
    00
  • IE 5.x/Win 和模型bug

    IE 5.x/Win 和模型bug是指在IE 5.x/Win浏览器下,使用盒模型布局时,由于浏览器对盒模型的处理方式不一致,导致布局出现偏差的问题。这个问题在现代浏览器中已经得到了解决,但是在一些需要支持旧版IE浏览器的项目中,仍需要考虑这个问题的解决方案。 解决IE 5.x/Win和模型bug问题的方法是使用特殊的CSS属性来操纵IE5盒模型的行为。下面是…

    css 2023年6月10日
    00
  • 解决使用Vue.js显示数据的时,页面闪现原始代码的问题

    使用Vue.js显示数据的时候,如果不慎掉入特定的“坑”,可能会遇到页面加载时短暂显示原始代码的问题,这是因为Vue.js渲染的速度较慢,需要进行一定的优化处理。下面是解决此问题的完整攻略。 1. 优化Vue.js的编译和运行 在Vue.js中,我们可以使用v-cloak指令来避免页面加载时的闪现问题。v-cloak的作用是在Vue实例的DOM元素标签上添加…

    css 2023年6月9日
    00
  • 原生JS实现旋转轮播图+文字内容切换效果【附源码】

    下面就是原生JS实现旋转轮播图+文字内容切换效果的攻略。 1、准备工作 在开始实现之前,需要做好一些准备工作: 准备好HTML结构,最外层包裹一个容器div,用来放置轮播图和文字内容。 在HTML文件中引入相应的CSS文件和JS文件。 2、实现旋转轮播图效果 实现旋转轮播图效果的代码如下所示(注释已经解释了代码的作用): var slideIndex = 1…

    css 2023年6月10日
    00
  • vue项目中canvas实现截图功能

    让我们来讲解一下如何在 Vue 项目中使用 Canvas 实现截图功能。 步骤一:引入 Fabric.js 库 Canvas 是 HTML5 新增的标签,用于绘制图像和动态的图形等。Fabric.js 是一个用于创建交互式的 Canvas 应用程序的库,提供了许多方便的 API 用于处理图像、文本、图形等元素。因此,我们需要在 Vue 项目中引入 Fabri…

    css 2023年6月10日
    00
  • 详解强大的jQuery选择器之基本选择器、层次选择器

    强大的jQuery选择器是jQuery库中最有用的模块之一,它提供了一种快速方便的方式来选择DOM元素,在操作DOM时帮助我们节省了很多时间。本文将详细讲解jQuery选择器的基本选择器和层次选择器。 基本选择器 基本选择器是指最常用的一组选择器,它们可以根据元素类型、id、class、属性等条件来选择元素。 1. 根据元素类型选择 选择元素的最基本方式就是…

    css 2023年6月9日
    00
  • javascript实现电商放大镜效果

    实现电商放大镜效果需要以下几个步骤: 布局:在HTML中,创建需要实现放大镜效果的区域,并将放大后的图片显示出来。例如: <div class="thumbnail"> <img src="thumb.jpg" alt="Thumbnail"> <div class=&…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部