前端规范(2)---Css和Sass编码规范

最新推荐文章于 2020-08-20 16:20:52 发布
最新推荐文章于 2020-08-20 16:20:52 发布
阅读量788 收藏
点赞数
分类专栏： 前端规范 文章标签： 前端 编程规范
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Suejia/article/details/72782999
版权

Css和Sass编码规范

1、id和class的命名

  • 尽管class(类)和id的语义化对于计算机解析没有什么实际意义，但是id和class就是用以反映元素目的和用途的，最好避免使用一些表象或者晦涩难懂的词语。

    不推荐

.fw-800 {
  font-weight: 800;
}
.red {
  color: red;
}

推荐

.heavy {
  font-weight: 800;
}
.important {
  color: red;
}

  • 为选择器添加状态前缀

    不推荐

    .withdrawal {
 background-color: #ccc;
}

    推荐

    .withdrawal {
 background-color: #ccc;
}

2、合理地避免使用ID

一般情况下，ID不应该被应用于样式，不能被复用并且每个页面中只能使用一次ID。

所以，建议始终考虑使用class，而不是id，除非只使用一次。

不推荐

#content .title {
  font-size: 2em;
}

推荐

.content .title{
  font-size: 2em;
}

此外，因为ID选择器权重很高，一个只包含一个ID选择器的权重高于包含1000个class(类)名的选择器，这使得它很奇怪。

// 这个选择器权重高于下面的选择器
#content .title {
  color: red;
}

// 高于这个选择器
html body div.content.news-content .title.content-title.important {
  color: blue;
}

3、CSS选择器中避免标签名

当构建选择器时，应该使用清晰、准确以及有语义的class类名，不要使用标签选择器，这样会使得你的代码更容易维护。

不推荐

div .content > header.content-header > h2.title {
  font-size: 2em;
}

推荐

.content > .content-header > .title {
  font-size: 2em;
}

4、尽可能地精准

如果开发人员写选择器链的时候，不直接使用子选择器，可能会导致设计问题或者损耗性能。如果你不写很通用的，需要匹配到DOM末端的选择器， 你应该总是考虑直接子选择器。

<article class="content news-content">
  <span class="title">News event</span>
  <div class="content-body">
    <div class="title content-title">
      Check this out
    </div>

    <p>This is a news article content</p>

    <div class="teaser">
      <div class="title">Buy this</div>
      <div class="teaser-content">Yey!</div>
    </div>
  </div>
</article>

下面的CSS将应用于有title类的全部三个元素。
然后，要解决content类下的title类 和 teaser类下的title类下不同的样式，这将需要更精确的选择器再次重写他们的样式。

不推荐

.content .title {
  font-size: 2rem;
}

推荐

.content > .title {
  font-size: 2rem;
}
.content > .content-body > .title {
  font-size: 1.5rem;
}
.content > .content-body > .teaser > .title {
  font-size: 1.2rem;
}

5、缩写属性

不推荐

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

推荐

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

6、单位和0

  • 省略“0”值后面的单位。不要在0值后面使用单位，除非有值。

    不推荐

    padding-bottom: 0px;
margin: 0px;

    推荐

    padding-bottom: 0;
margin: 0;

  • 去掉小数点前的“0”

    不推荐

    font-size: 0.8em;

    推荐

    font-size: .8em;

7、十六进制表示法

颜色值采用十六进制表示法更加简洁，始终使用小写的十六进制数字。

不推荐

color: #FF33AA;

推荐

color: #f3a;

8、id和class名的分隔符

  • 使用连字符（中划线）分隔ID和Class（类）名中的单词。
  • 在选择器中不要使用除了连字符（中划线）以为的任何字符（包括没有）来连接单词和缩写。

不推荐

.demoimage {}
.error_status {}

推荐

#video-id {}
.ads-sample {}

9、声明顺序

  • 每个声明用分号结束，每个声明换行。

  • 属性名的冒号后空一格。

    不推荐

    h3 {
 font-weight:bold;
}

    推荐

    h3 {
 font-weight: bold;
}

  • 每个选择器和属性声明总是使用新的一行。

    不推荐

    a:focus, a:active {
 position: relative; top: 1px;
}

    推荐

    a:focus,
a:active {
 position: relative; 
 top: 1px;
}

  • 规则之间始终有一个空行（双换行符）分隔。

    推荐

    html {
 background: #fff;
}

body {
 margin: auto;
 width: 50%;
}

  • 可遵循以下声明顺序：

    1. 结构性属性：
      1. display
      2. position, left, top, right etc.
      3. overflow, float, clear etc.
      4. margin, padding
    2. 表现性属性：
      1. background, border etc.
      2. font, text

不推荐

.box {
  font-family: 'Arial', sans-serif;
  border: 3px solid #ddd;
  left: 30%;
  position: absolute;
  text-transform: uppercase;
  background-color: #eee;
  right: 30%;
  isplay: block;
  font-size: 1.5rem;
  overflow: hidden;
  padding: 1em;
  margin: 1em;
}

推荐

.box {
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  overflow: hidden;
  margin: 1em;
  padding: 1em;
  background-color: #eee;
  border: 3px solid #ddd;
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}

10、CSS引号

属性选择器或属性值用双引号（””），而不是单引号（”）括起来。URL值（url()）不要使用引号。

不推荐

@import url('//cdn.com/foundation.css');

html {
  font-family: 'open sans', arial, sans-serif;
}

body:after {
  content: 'pause';
}

推荐

@import url(//cdn.com/foundation.css);

html {
  font-family: "open sans", arial, sans-serif;
}

body:after {
  content: "pause";
}

11、选择器嵌套（SCSS）

在Sass中你可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。

不推荐

//没有嵌套，不推荐
.content {
  display: block;
}

.content > .news-article > .title {
  font-size: 1.2em;
}

//不推荐，嵌套无用的内容
.content {
  display: block;

  > .news-article {
    > .title {
      font-size: 1.2em;
    }
  }
}

推荐

content {
  display: block;

  > .news-article > .title {
    font-size: 1.2em;
  }
}

12、嵌套中引入空行（SCSS）

嵌套选择器和CSS属性之间空一行。

不推荐

.content {
  display: block;
  > .news-article {
    background-color: #eee;
    > .title {
      font-size: 1.2em;
    }
    > .article-footnote {
      font-size: 0.8em;
    }
  }
}

推荐

.content {
  display: block;

  > .news-article {
    background-color: #eee;

    > .title {
      font-size: 1.2em;
    }

    > .article-footnote {
      font-size: 0.8em;
    }
  }
}

13、上下文媒体查询(SCSS)

  • 在Sass中，当你嵌套你的选择器时也可以使用上下文媒体查询。

  • 在Sass中，你可以在任何给定的嵌套层次中使用媒体查询。

  • 由此生成的CSS将被转换，这样的媒体查询将包裹选择器的形式呈现。

    ​

不推荐

// This mobile first example looks like plain CSS where the whole structure of SCSS is repeated
// on the bottom in a media query. This is error prone and makes maintenance harder as it's not so easy to relate
// the content in the media query to the content in the upper part (mobile style)

.content-page {
  font-size: 1.2rem;

  > .main {
    background-color: whitesmoke;

    > .latest-news {
      padding: 1rem;

      > .news-article {
        padding: 1rem;

        > .title {
          font-size: 2rem;
        }
      }
    }

    > .content {
      margin-top: 2rem;
      padding: 1rem;
    }
  }

  > .page-footer {
    margin-top: 2rem;
    font-size: 1rem;
  }
}

@media screen and (min-width: 641px) {
  .content-page {
    font-size: 1rem;

    > .main > .latest-news > .news-article > .title {
      font-size: 3rem;
    }

    > .page-footer {
      font-size: 0.8rem;
    }
  }
}

推荐

/ This is the same example as above but here we use contextual media queries in order to put the different styles
// for different media into the right context.

.content-page {
  font-size: 1.2rem;

  @media screen and (min-width: 641px) {
    font-size: 1rem;
  }

  > .main {
    background-color: whitesmoke;

    > .latest-news {
      padding: 1rem;

      > .news-article {
        padding: 1rem;

        > .title {
          font-size: 2rem;

          @media screen and (min-width: 641px) {
            font-size: 3rem;
          }
        }
      }
    }

    > .content {
      margin-top: 2rem;
      padding: 1rem;
    }
  }

  > .page-footer {
    margin-top: 2rem;
    font-size: 1rem;

    @media screen and (min-width: 641px) {
      font-size: 0.8rem;
    }
  }
}

14、嵌套顺序和父级选择器(SCSS)

以下内容是一个SCSS块应具有的顺序。

  1. 当前选择器的样式属性
  2. 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
  3. 伪类元素 (:before and :after)
  4. 父级选择器的声明样式 (.selected, .active, .enlarged etc.)
  5. 用Sass的上下文媒体查询
  6. 子选择器作为最后的部分

推荐

.product-teaser {
  // 1. Style attributes
  display: inline-block;
  padding: 1rem;
  background-color: whitesmoke;
  color: grey;

  // 2. Pseudo selectors with parent selector
  &:hover {
    color: black;
  }

  // 3. Pseudo elements with parent selector
  &:before {
    content: "";
    display: block;
    border-top: 1px solid grey;
  }

  &:after {
    content: "";
    display: block;
    border-top: 1px solid grey;
  }

  // 4. State classes with parent selector
  &.active {
    background-color: pink;
    color: red;

    // 4.2. Pseuso selector in state class selector
    &:hover {
      color: darkred;
    }
  }

  // 5. Contextual media queries
  @media screen and (max-width: 640px) {
    display: block;
    font-size: 2em;
  }

  // 6. Sub selectors
  > .content > .title {
    font-size: 1.2em;

    // 6.5. Contextual media queries in sub selector
    @media screen and (max-width: 640px) {
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }
  }
}
Esther佳佳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端编码规范
qq_45285598的博客
04-04 377
较为详细的前端编码规范
前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范
09-24
以下是一些关于CSS和Sass编码规范的关键点： 1. **ID和class命名**： - ID和class名应具有描述性，反映元素的用途而非表面特征。例如，`heavy`比`fw-800`更能表达字体加粗的意图，`important`比`red`更能传达颜色...
前端通用编码规范
手掌日月摘星辰
05-28 620
HTML编码规范 1 前言 2 代码风格 2.1 缩进与换行 2.2 命名 2.3 标签 2.4 属性 3 通用 3.1 DOCTYPE 3.2 编码 3.3 CSS和JavaScript引入 4 head 4.1 title 4.2 favicon 4.3 viewport 5 图片 6 表单 6.1 控件标题 6.2 按钮 6.3 可访问性 (A11Y
HTML/CSS/JS编码规范
weixin_34292924的博客
08-24 675
最近整理了一份HTML/CSS/JS编码规范，供大家参考。目录：一、HTML编码规范二、CSS编码规范三、JS编码规范一、HTML编码规范1. img标签要写alt属性根据W3C标准，img标签要写alt属性，如果没有就写一个空的。但是一般要写一个有内容的，根据图片想要表达的意思，因为alt是在图片无法加载时显示的文字。如下不太好的写法：&lt;img src="company-logo.svg"...
html+css前端编码规范共7页.pdf.zip
最新发布
11-19
HTML和CSS是构建网页设计的基础，它们的编码规范对于创建高效、可维护和易于扩展的网页至关重要。这份名为“html+css前端编码规范共7页.pdf”的文档，尽管压缩为.zip格式，但我们可以从中推断出它将涵盖一系列前端...
Css-Sass：一些Css-Sass作品
02-07
综上所述，"Css-Sass-main"这个压缩包可能包含了一系列使用Sass编写的CSS样式示例，展示了Sass如何提升CSS的编写效率和代码质量。通过研究这些示例，你可以更好地理解Sass的语法和用法，从而在实际项目中更好地应用...
OA-1-网页前端CSS书写规范.zip_css_peopledyh
09-23
"OA-1-网页前端CSS书写规范.pdf"这份文档应该会详细阐述这些原则，并可能提供更多的实用技巧和最佳实践，帮助开发者形成良好的CSS编码习惯，提升工作效率。在实际工作中，遵循这些规范将有助于创建更高效、更易于...
Web前端编码规范
12-13
javascript编码规范、HTML编码规范、CSS编码规范
WEB前端编码规范
10-27
适用于公司的前端开发人员的规范，可以作为公司的前端开发人员的编码约束准则，同时对于所有前端开发人员是一份学习的文档，当前公司用的就是这份文档，我们所有开发人员入职的时候必须阅读的这一份文档，
Vue项目书写规范
weixin_44090040的博客
08-20 3906
1. 组件名为多个单词 我们开发过程中自定义的组件的名称需要为多个单词，这样做可以避免跟现有的以及未来的HTML元素相冲突，因为所有的 HTML 元素名称都是单个单词的。 推荐： Vue.component('todo-item', { // ... }) export default { name: 'TodoItem', // ... } 不推荐： Vue.component('todo', { // ... }) export default { name: 'Todo',
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值