加入收藏 | 设为首页 | 会员中心 | 我要投稿 常州站长网 (https://www.0519zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 搜索优化 > 正文

CSS与Sass的研发规范

发布时间:2022-06-07 17:03:39 所属栏目:搜索优化 来源:互联网
导读:这次给大家带来CSS与Sass开发规范,使用CSS与Sass开发规范的注意事项有哪些,下面就是实战案例,一起来看一下。 ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称。代替表象和晦涩难懂的名称。 应该首选具体和反
  这次给大家带来CSS与Sass开发规范,使用CSS与Sass开发规范的注意事项有哪些,下面就是实战案例,一起来看一下。
 
  ID and class naming
 
  ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称。代替表象和晦涩难懂的名称。
 
  应该首选具体和反映元素目的的名称,因为这些是最可以理解的,而且发生变化的可能性最小。
 
  通用名称只是多个元素的备用名,他们兄弟元素之间是一样的,没有特别意义。
 
  区分他们,使他们具有特殊意义,通常需要为“帮手”。
 
  尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义,
 
  语义化的名称 通常是正确的选择,因为它们所代表的信息含义,不包含表现的限制。

  合理的避免使用ID
 
  一般情况下ID不应该被应用于样式。
 
  ID的样式不能被复用并且每个页面中你只能使用一次ID。
 
  使用ID唯一有效的是确定网页或整个站点中的位置。
 
  尽管如此,你应该始终考虑使用class,而不是id,除非只使用一次。
 
  不推荐
 
  #content .title {
 
    font-size: 2em;
 
  }
 
  推荐
 
  .content .title {
 
    font-size: 2em;
 
  }
 
  另一个反对使用ID的观点是含有ID选择器权重很高。
 
  一个只包含一个ID选择器权重高于包含1000个class(类)名的选择器,这使得它很奇怪。
 
  // 这个选择器权重高于下面的选择器
 
  #content .title {
 
    color: red;
 
  }
 
  // than this selector!
 
  html body p.content.news-content .title.content-title.important {
 
    color: blue;
 
  }
 
  CSS选择器中避免标签名
 
  当构建选择器时应该使用清晰, 准确和有语义的class(类)名。不要使用标签选择器。 如果你只关心你的class(类)名
 
  ,而不是你的代码元素,这样会更容易维护。
 
  从分离的角度考虑,在表现层中不应该分配html标记/语义。
 
  它可能是一个有序列表需要被改成一个无序列表,或者一个p将被转换成article。
 
  如果你只使用具有实际意义的class(类)名,
 
  并且不使用元素选择器,那么你只需要改变你的html标记,而不用改动你的CSS。
 
  不推荐
 
  p.content > header.content-header > h2.title {
 
    font-size: 2em;
 
  }
 
  推荐
 
  .content > .content-header > .title {
 
    font-size: 2em;
 
  }
 
  尽可能的精确
 
  很多前端开发人员写选择器链的时候不使用 直接子选择器(注:直接子选择器和后代选择器的区别)。
 
  有时,这可能会导致疼痛的设计问题并且有时候可能会很耗性能。
 
  然而,在任何情况下,这是一个非常不好的做法。
 
  如果你不写很通用的,需要匹配到DOM末端的选择器, 你应该总是考虑直接子选择器。
 
  考虑下面的DOM:
 
  <article class="content news-content">
 
    <span class="title">News event</span>
 
    <p class="content-body">
 
      <p class="title content-title">
 
        Check this out
 
      </p>
 
      <p>This is a news article content</p>
 
      <p class="teaser">
 
        <p class="title">Buy this</p>
 
        <p class="teaser-content">Yey!</p>
 
      </p>
 
    </p>
 
  </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;
 
  }
 
  缩写属性
 
  CSS提供了各种缩写属性(如 font 字体)应该尽可能使用,即使在只设置一个值的情况下。
 
  使用缩写属性对于代码效率和可读性是有很有用的。
 
  不推荐
 
  css 代码:
 
  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;
 
  推荐
 
  css 代码:
 
  border-top: 0;
 
  font: 100%/1.6 palatino, georgia, serif;
 
  padding: 0 1em 2em;
 
  0 和 单位
 
  省略“0”值后面的单位。不要在0值后面使用单位,除非有值。
 
  不推荐
 
  css 代码:
 
  padding-bottom: 0px;
 
  margin: 0em;
 
  推荐
 
  css 代码:
 
  padding-bottom: 0;
 
  margin: 0;
 
  十六进制表示法
 
  在可能的情况下,使用3个字符的十六进制表示法。
 
  颜色值允许这样表示,
 
  3个字符的十六进制表示法更简短。
 
  始终使用小写的十六进制数字。
 
  不推荐
 
  color: #FF33AA;
 
  推荐
 
  color: #f3a;
 
  ID 和 Class(类) 名的分隔符
 
  使用连字符(中划线)分隔ID和Class(类)名中的单词。为了增强课理解性,在选择器中不要使用除了连字符(中划线)以为的任何字符(包括没有)来连接单词和缩写。
 
  另外,作为该标准,预设属性选择器能识别连字符(中划线)作为单词[attribute|=value]的分隔符,
 
  所以最好的坚持使用连字符作为分隔符。
 
  不推荐
 
  .demoimage {}
 
  .error_status {}
 
  推荐
 
  #video-id {}
 
  .ads-sample {}
 
  Hacks
 
  避免用户代理检测以及CSS“hacks” – 首先尝试不同的方法。通过用户代理检测或特殊的CSS滤镜,变通的方法和 hacks 很容易解决样式差异。为了达到并保持一个有效的和可管理的代码库,这两种方法都应该被认为是最后的手段。换句话说,从长远来看,用户代理检测和hacks
 
  会伤害项目,作为项目往往应该采取阻力最小的途径。也就是说,轻易允许使用用户代理检测和hacks 以后将过于频繁。
 
  声明顺序
 
  这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性和可扫描重要。
 
  作为最佳实践,我们应该遵循以下顺序(应该按照下表的顺序):
 
  结构性属性:
 
  display
 
  position, left, top, right etc.
 
  overflow, float, clear etc.
 
  margin, padding
 
  表现性属性:
 
  background, border etc.
 
  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;
 
  }
 
  声明结束
 
  为了保证一致性和可扩展性,每个声明应该用分号结束,每个声明换行。

  选择器嵌套 (SCSS)
 
  在Sass中你可以嵌套选择器,这可以使代码变得更清洁和可读。嵌套所有的选择器,但尽量避免嵌套没有任何内容的选择器。
 
  如果你需要指定一些子元素的样式属性,而父元素将不什么样式属性,
 
  可以使用常规的CSS选择器链。
 
  这将防止您的脚本看起来过于复杂。

  上下文媒体查询(SCSS)
 
  在Sass中,当你嵌套你的选择器时也可以使用上下文媒体查询。
 
  在Sass中,你可以在任何给定的嵌套层次中使用媒体查询。
 
  由此生成的CSS将被转换,这样的媒体查询将包裹选择器的形式呈现。
 
  这技术非常方便,
 
  有助于保持媒体查询属于的上下文。
 
  第一种方法这可以让你先写你的手机样式,然后在任何你需要的地方
 
  用上下文媒体查询以提供桌面样式。
 
  嵌套顺序和父级选择器(SCSS)
 
  当使用Sass的嵌套功能的时候,
 
  重要的是有一个明确的嵌套顺序,
 
  以下内容是一个SCSS块应具有的顺序。
 
  当前选择器的样式属性
 
  父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
 
  伪类元素 (:before and :after)
 
  父级选择器的声明样式 (.selected, .active, .enlarged etc.)
 
  用Sass的上下文媒体查询
 
  子选择器作为最后的部分
 
  The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.
 
  Recommended
 
  css 代码:
 
  .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;
 
      }
 
    }
 
  }
 
  以上就是CSS与Sass开发规范的详细内容。
   这次给大家带来CSS与Sass开发规范,使用CSS与Sass开发规范的注意事项有哪些,下面就是实战案例,一起来看一下。
 
  ID and class naming
 
  ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称。代替表象和晦涩难懂的名称。
 
  应该首选具体和反映元素目的的名称,因为这些是最可以理解的,而且发生变化的可能性最小。
 
  通用名称只是多个元素的备用名,他们兄弟元素之间是一样的,没有特别意义。
 
  区分他们,使他们具有特殊意义,通常需要为“帮手”。
 
  尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义,
 
  语义化的名称 通常是正确的选择,因为它们所代表的信息含义,不包含表现的限制。
 
  不推荐
 
  .fw-800 {
 
    font-weight: 800;
 
  }
 
  .red {
 
    color: red;
 
  }
 
  推荐
 
  .heavy {
 
    font-weight: 800;
 
  }
 
  .important {
 
    color: red;
 
  }
 
  合理的避免使用ID
 
  一般情况下ID不应该被应用于样式。
 
  ID的样式不能被复用并且每个页面中你只能使用一次ID。
 
  使用ID唯一有效的是确定网页或整个站点中的位置。
 
  尽管如此,你应该始终考虑使用class,而不是id,除非只使用一次。
 
  不推荐
 
  #content .title {
 
    font-size: 2em;
 
  }
 
  推荐
 
  .content .title {
 
    font-size: 2em;
 
  }
 
  另一个反对使用ID的观点是含有ID选择器权重很高。
 
  一个只包含一个ID选择器权重高于包含1000个class(类)名的选择器,这使得它很奇怪。
 
  // 这个选择器权重高于下面的选择器
 
  #content .title {
 
    color: red;
 
  }
 
  // than this selector!
 
  html body p.content.news-content .title.content-title.important {
 
    color: blue;
 
  }
 
  CSS选择器中避免标签名
 
  当构建选择器时应该使用清晰, 准确和有语义的class(类)名。不要使用标签选择器。 如果你只关心你的class(类)名
 
  ,而不是你的代码元素,这样会更容易维护。
 
  从分离的角度考虑,在表现层中不应该分配html标记/语义。
 
  它可能是一个有序列表需要被改成一个无序列表,或者一个p将被转换成article。
 
  如果你只使用具有实际意义的class(类)名,
 
  并且不使用元素选择器,那么你只需要改变你的html标记,而不用改动你的CSS。
 
  不推荐
 
  p.content > header.content-header > h2.title {
 
    font-size: 2em;
 
  }
 
  推荐
 
  .content > .content-header > .title {
 
    font-size: 2em;
 
  }
 
  尽可能的精确
 
  很多前端开发人员写选择器链的时候不使用 直接子选择器(注:直接子选择器和后代选择器的区别)。
 
  有时,这可能会导致疼痛的设计问题并且有时候可能会很耗性能。
 
  然而,在任何情况下,这是一个非常不好的做法。
 
  如果你不写很通用的,需要匹配到DOM末端的选择器, 你应该总是考虑直接子选择器。
 
  考虑下面的DOM:
 
  <article class="content news-content">
 
    <span class="title">News event</span>
 
    <p class="content-body">
 
      <p class="title content-title">
 
        Check this out
 
      </p>
 
      <p>This is a news article content</p>
 
      <p class="teaser">
 
        <p class="title">Buy this</p>
 
        <p class="teaser-content">Yey!</p>
 
      </p>
 
    </p>
 
  </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;
 
  }
 
  缩写属性
 
  CSS提供了各种缩写属性(如 font 字体)应该尽可能使用,即使在只设置一个值的情况下。
 
  使用缩写属性对于代码效率和可读性是有很有用的。
 
  不推荐
 
  css 代码:
 
  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;
 
  推荐
 
  css 代码:
 
  border-top: 0;
 
  font: 100%/1.6 palatino, georgia, serif;
 
  padding: 0 1em 2em;
 
  0 和 单位
 
  省略“0”值后面的单位。不要在0值后面使用单位,除非有值。
 
  不推荐
 
  css 代码:
 
  padding-bottom: 0px;
 
  margin: 0em;
 
  推荐
 
  css 代码:
 
  padding-bottom: 0;
 
  margin: 0;
 
  十六进制表示法
 
  在可能的情况下,使用3个字符的十六进制表示法。
 
  颜色值允许这样表示,
 
  3个字符的十六进制表示法更简短。
 
  始终使用小写的十六进制数字。
 
  不推荐
 
  color: #FF33AA;
 
  推荐
 
  color: #f3a;
 
  ID 和 Class(类) 名的分隔符
 
  使用连字符(中划线)分隔ID和Class(类)名中的单词。为了增强课理解性,在选择器中不要使用除了连字符(中划线)以为的任何字符(包括没有)来连接单词和缩写。
 
  另外,作为该标准,预设属性选择器能识别连字符(中划线)作为单词[attribute|=value]的分隔符,
 
  所以最好的坚持使用连字符作为分隔符。
 
  不推荐
 
  .demoimage {}
 
  .error_status {}
 
  推荐
 
  #video-id {}
 
  .ads-sample {}
 
  Hacks
 
  避免用户代理检测以及CSS“hacks” – 首先尝试不同的方法。通过用户代理检测或特殊的CSS滤镜,变通的方法和 hacks 很容易解决样式差异。为了达到并保持一个有效的和可管理的代码库,这两种方法都应该被认为是最后的手段。换句话说,从长远来看,用户代理检测和hacks
 
  会伤害项目,作为项目往往应该采取阻力最小的途径。也就是说,轻易允许使用用户代理检测和hacks 以后将过于频繁。
 
  声明顺序
 
  这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性和可扫描重要。
 
  作为最佳实践,我们应该遵循以下顺序(应该按照下表的顺序):
 
  结构性属性:
 
  display
 
  position, left, top, right etc.
 
  overflow, float, clear etc.
 
  margin, padding
 
  表现性属性:
 
  background, border etc.
 
  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;
 
  }
 
  声明结束
 
  为了保证一致性和可扩展性,每个声明应该用分号结束,每个声明换行。
 
  不推荐
 
  css 代码:
 
  .test {
 
    display: block; height: 100px
 
  }
 
  推荐
 
  css 代码:
 
  .test {
 
    display: block;
 
    height: 100px;
 
  }
 
  属性名结束
 
  属性名的冒号后使用一个空格。出于一致性的原因,
 
  属性和值(但属性和冒号之间没有空格)的之间始终使用一个空格。
 
  不推荐
 
  css 代码:
 
  h3 {
 
    font-weight:bold;
 
  }
 
  推荐
 
  css 代码:
 
  h3 {
 
    font-weight: bold;
 
  }
 
  选择器和声明分离
 
  每个选择器和属性声明总是使用新的一行。
 
  不推荐
 
  css 代码:
 
  a:focus, a:active {
 
    position: relative; top: 1px;
 
  }
 
  推荐
 
  css 代码:
 
  h1,
 
  h2,
 
  h3 {
 
    font-weight: normal;
 
    line-height: 1.2;
 
  }
 
  规则分隔
 
  规则之间始终有一个空行(双换行符)分隔。
 
  推荐
 
  css 代码:
 
  html {
 
    background: #fff;
 
  }
  
  body {
 
    margin: auto;
 
    width: 50%;
 
  }
 
  CSS引号
 
  属性选择器或属性值用双引号(””),而不是单引号(”)括起来。
 
  URI值(url())不要使用引号。
 
  选择器嵌套 (SCSS)
 
  在Sass中你可以嵌套选择器,这可以使代码变得更清洁和可读。嵌套所有的选择器,但尽量避免嵌套没有任何内容的选择器。
 
  如果你需要指定一些子元素的样式属性,而父元素将不什么样式属性,
 
  可以使用常规的CSS选择器链。
 
  这将防止您的脚本看起来过于复杂。
 
  上下文媒体查询(SCSS)
 
  在Sass中,当你嵌套你的选择器时也可以使用上下文媒体查询。
 
  在Sass中,你可以在任何给定的嵌套层次中使用媒体查询。
 
  由此生成的CSS将被转换,这样的媒体查询将包裹选择器的形式呈现。
 
  这技术非常方便,
 
  有助于保持媒体查询属于的上下文。
 
  第一种方法这可以让你先写你的手机样式,然后在任何你需要的地方
 
  用上下文媒体查询以提供桌面样式。
 
  嵌套顺序和父级选择器(SCSS)
 
  当使用Sass的嵌套功能的时候,
 
  重要的是有一个明确的嵌套顺序,
 
  以下内容是一个SCSS块应具有的顺序。
 
  当前选择器的样式属性
 
  父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
 
  伪类元素 (:before and :after)
 
  父级选择器的声明样式 (.selected, .active, .enlarged etc.)
 
  用Sass的上下文媒体查询
 
  子选择器作为最后的部分

  以上就是CSS与Sass开发规范的详细内容。
 

(编辑:常州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读