CSS与Sass的研发规范

发布时间：2022-06-07 14:18 所属栏目：122 来源：互联网

导读：这次给大家带来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">

　　 News event

　　 

　　 

　　 Check this out

　　 

　　 This is a news article content

　　 

　　 Buy this

　　 Yey!

　　 

　　 

　　</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">

　　 News event

　　 

　　 

　　 Check this out

　　 

　　 This is a news article content

　　 

　　 Buy this

　　 Yey!

　　 

　　 

　　</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开发规范的详细内容。

（编辑：ASP站长网）