下面是关于“前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范”的完整攻略。
目录
命名规范
-
选择器和属性命名使用小写字母 : 所有的选择器(class和id)和属性名都应当使用小写字母。
-
共同前缀 : 对于属于同一组件或者定制化组件的样式,使用共同的前缀,以区别于其他样式。
-
中划线(-)连接符 : 在CSS类选择器和ID选择器中,使用中划线连接符,以清晰表明单词的分隔。
-
语义化 : 使用简单、清晰、有语义的名称,不使用具备歧义或者计算机专用的缩写和简称。
代码格式
-
缩进 : 使用2个空格进行缩进,而不是使用制表符。
-
分号 : 在CSS声明的末尾始终加上分号。
-
空格 : 属性值前一定要有一个空格,以增加可读性。
-
每行样式数不超过1个 : 为了提高代码的可读性,每行不要超过一个样式。
注释规范
-
组件注释 : 用注释说明该部分的作用,命名,使用方式等,最好使用多行注释。
-
行内注释 : 行内注释使用双斜线(//),表示注释说明该行的属性或者作用。
-
结构注释 : 使用注释说明这一部分的含义(如容器)。
SCSS 规范
-
使用变量 : 在SCSS中,使用变量可以提高代码的复用性和易维护性。
-
使用嵌套 : 使用嵌套可以简化层级结构,提高代码可读性。
-
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技术站