前端编码规范(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日

相关文章

  • 详解Angular组件生命周期(一)

    Angular组件生命周期是Angular框架用来管理组件生命周期的一种机制,用于确保组件能够在运行时按照正确的顺序进行初始化、渲染、销毁等操作。在这篇文章中,我们将详细讲解Angular组件的生命周期。本章主要介绍组件的构造以及ngOnChanges的生命周期函数。 组件的构造 每当Angular框架需要实例化一个组件时,都会根据组件定义创建一个新的类实例…

    css 2023年6月10日
    00
  • JavaScript 浮动定位提示效果实现代码第2/2页

    JavaScript 浮动定位提示效果是一种非常实用的页面交互效果,本文将提供完整的攻略,涵盖了如何实现此效果的所有方面。 准备工作 在开始前,我们需要准备一些资源: HTML 页面,用于显示浮动提示效果。 CSS 文件,用于页面样式。 JavaScript 代码,用于实现浮动提示效果。 实现步骤 步骤1:编写 HTML 代码 我们需要在 HTML 中定义一…

    css 2023年6月10日
    00
  • css3一款3D字体带阴影效果的实现步骤

    下面是详细讲解“CSS3一款3D字体带阴影效果的实现步骤”的完整攻略。 1. 编写HTML代码 首先,我们需要在HTML页面中添加要展示的文本。以实现一个带有3D字体和阴影效果的标题文本为例,可以在HTML代码中添加以下内容: <h1 class="font-effect-3d">3D TITLE</h1> 这里我…

    css 2023年6月9日
    00
  • 利用CSS3在Angular中实现动画

    下面是详细的攻略: 利用CSS3在Angular中实现动画 1. 前置条件 在开始利用CSS3在Angular中实现动画之前,需要确保以下工具和技术已经具备: Angular的基本概念和使用方法 CSS3动画的基本知识和使用方法 2. 新建Angular应用 首先,我们需要新建一个Angular应用。可以使用Angular CLI来快速生成一个基础项目: n…

    css 2023年6月10日
    00
  • CSS3中Transition动画属性用法详解

    CSS3中Transition动画属性用法详解 CSS3中的transition是一种CSS属性,它用于在元素的属性发生变化时,控制元素以多长时间和以什么方式进行平滑过渡。transition动画可以通过CSS3的-transition和-transition-*系列属性来实现。 transition属性 语法 transition是一个所有transiti…

    css 2023年6月10日
    00
  • 使用html+css实现页面书本翻页特效

    实现页面书本翻页特效可以通过以下步骤实现: 1. 定义HTML结构 首先,你需要定义一个HTML结构以在页面上呈现出一个可翻页的书本效果。在这个HTML结构中,你需要包含一些标签来描述书本的不同部分,例如前/后页面、书本封面、书本内容等等。需要注意的是,这种书本翻页效果大多是使用JavaScript或HTML5 Canvas技术完成的,因此需要在你的HTML…

    css 2023年6月9日
    00
  • 转载:On having layout

    转载:On having layout 简介 On having layout 是一篇由Mark Boulton撰写的文章,主要讲解了如何在网页设计中正确使用布局。本文将对这篇文章进行详细解释和说明。 内容 在网页设计中,布局是至关重要的,它直接影响了页面的可读性和用户体验。在文章最开始,作者就针对布局的重要性进行了强调。在这篇文章中,作者主要讲解了以下四个…

    css 2023年6月13日
    00
  • CSS3中border-radius属性设定圆角的使用技巧

    来详细讲解一下“CSS3中border-radius属性设定圆角的使用技巧”的完整攻略。 1. border-radius属性介绍 border-radius是CSS3新增的属性,用来设置圆角。它的语法如下: border-radius: 10px; /* 四个方向都设置10像素的圆角 */ border-radius: 10px 0 10px 0; /* …

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