Are you sure you want to delete this task? Once this task is deleted, it cannot be recovered.
Xrcluogu d2cd54c895 | 2 years ago | |
---|---|---|
.. | ||
.scss-lint.yml | 7 years ago | |
README.md | 2 years ago |
我们把一个(或一组)选择器和一组属性称之为 “规则声明”。举个例子:
.listing {
font-size: 18px;
line-height: 1.2;
}
在规则声明中,“选择器” 负责选取 DOM 树中的元素,这些元素将被定义的属性所修饰。选择器可以匹配 HTML 元素,也可以匹配一个元素的类名、ID, 或者元素拥有的属性。以下是选择器的例子:
.my-element-class {
/* ... */
}
[aria-hidden] {
/* ... */
}
最后,属性决定了规则声明里被选择的元素将得到何种样式。属性以键值对形式存在,一个规则声明可以包含一或多个属性定义。以下是属性定义的例子:
/* some selector */ {
background: #f1f1f1;
color: #333;
}
link
的方式调用外部样式<style>
块中使用 @import
。style
属性写行内样式。-
作为相关类的自然间断(不要使用_
和 camelCase)。{
前加上一个空格。:
后面加上一个空格,前面不允许空格。}
独占一行。;
不能省略#fff
input[type="text"]
margin: 0;
而不是 margin: 0px;
0
代替 none
。Bad
.avatar{
border-radius:50%;
border:2px solid white; }
.no, .nope, .not_good {
// ...
}
#lol-no {
// ...
}
Good
.avatar {
border-radius: 50%;
border: 2px solid white;
}
.one,
.selector,
.per-line {
// ...
}
Position 处在第一位,因为他可以使一个元素脱离正常文本流,独立显示,并且覆盖盒模型相关的样式。盒模型紧跟其后,因为他决定了一个组件的大小和位置。
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
button
,但是 .s
不能代表任何元素。class
的命名应该尽量短,也要尽量明确。div.doc
。//
) 代替块注释。/* 普通注释 */
出于以下原因,建议使用 OOCSS 和 BEM 的某种组合:
OOCSS,也就是 “Object Oriented CSS(面向对象的CSS)”,是一种写 CSS 的方法,其思想就是鼓励你把样式表看作“对象”的集合:创建可重用性、可重复性的代码段让你可以在整个网站中多次使用。
参考资料:
BEM,也就是 “Block-Element-Modifier”,是一种用于 HTML 和 CSS 类名的_命名约定_。BEM 最初是由 Yandex 提出的,要知道他们拥有巨大的代码库和可伸缩性,BEM 就是为此而生的,并且可以作为一套遵循 OOCSS 的参考指导规范。
示例
<article class="listing-card listing-card--featured">
<h1 class="listing-card__title">Adorable 2BR in the sunny Mission</h1>
<div class="listing-card__content">
<p>Vestibulum id ligula porta felis euismod semper.</p>
</div>
</article>
.listing-card { }
.listing-card--featured { }
.listing-card__title { }
.listing-card__content { }
.listing-card
是一个块(block),表示高层次的组件。.listing-card__title
是一个元素(element),它属于 .listing-card
的一部分,因此块是由元素组成的。.listing-card--featured
是一个修饰符(modifier),表示这个块与 .listing-card
有着不同的状态或者变化。在 CSS 中,虽然可以通过 ID 选择元素,但大家通常都会把这种方式列为反面教材。ID 选择器给你的规则声明带来了不必要的高优先级,而且 ID 选择器是不可重用的。
想要了解关于这个主题的更多内容,参见 CSS Wizardry 的文章,文章中有关于如何处理优先级的内容。
避免在 CSS 和 JavaScript 中绑定相同的类。否则开发者在重构时通常会出现以下情况:轻则浪费时间在对照查找每个要改变的类,重则因为害怕破坏功能而不敢作出更改。
我们推荐在创建用于特定 JavaScript 的类名时,添加 .js-
前缀:
<button class="btn btn-primary js-request-to-book">Request to Book</button>
.scss
的语法,不使用 .sass
原本的语法。@include
声明按照以下逻辑排序(参见下文)属性声明
首先列出除去 @include
和嵌套选择器之外的所有属性声明。
.btn-green {
background: green;
font-weight: bold;
// ...
}
@include
声明
紧随后面的是 @include
,这样可以使得整个选择器的可读性更高。
.btn-green {
background: green;
font-weight: bold;
@include transition(background 0.5s ease);
// ...
}
嵌套选择器
_如果有必要_用到嵌套选择器,把它们放到最后,在规则声明和嵌套选择器之间要加上空白,相邻嵌套选择器之间也要加上空白。嵌套选择器中的内容也要遵循上述指引。
.btn {
background: green;
font-weight: bold;
@include transition(background 0.5s ease);
.icon {
margin-right: 10px;
}
}
变量名应使用破折号(例如 $my-variable
)代替 camelCased 和 snake_cased 风格。对于仅用在当前文件的变量,可以在变量名之前添加下划线前缀(例如 $_my-variable
)。
为了让代码遵循 DRY 原则(Don't Repeat Yourself)、增强清晰性或抽象化复杂性,应该使用 mixin,这与那些命名良好的函数的作用是异曲同工的。虽然 mixin 可以不接收参数,但要注意,假如你不压缩负载(比如通过 gzip),这样会导致最终的样式包含不必要的代码重复。
应避免使用 @extend
指令,因为它并不直观,而且具有潜在风险,特别是用在嵌套选择器的时候。即便是在顶层占位符选择器使用扩展,如果选择器的顺序最终会改变,也可能会导致问题。(比如,如果它们存在于其他文件,而加载顺序发生了变化)。其实,使用 @extend 所获得的大部分优化效果,gzip 压缩已经帮助你做到了,因此你只需要通过 mixin 让样式表更符合 DRY 原则就足够了。
请不要让嵌套选择器的深度超过 3 层!
.page-container {
.content {
.profile {
// STOP!
}
}
}
当遇到以上情况的时候,你也许是这样写 CSS 的:
再说一遍: 永远不要嵌套 ID 选择器!
如果你始终坚持要使用 ID 选择器(劝你三思),那也不应该嵌套它们。如果你正打算这么做,你需要先重新检查你的标签,或者指明原因。如果你想要写出风格良好的 HTML 和 CSS,你是不应该这样做的。
web前端规范指南
other
Dear OpenI User
Thank you for your continuous support to the Openl Qizhi Community AI Collaboration Platform. In order to protect your usage rights and ensure network security, we updated the Openl Qizhi Community AI Collaboration Platform Usage Agreement in January 2024. The updated agreement specifies that users are prohibited from using intranet penetration tools. After you click "Agree and continue", you can continue to use our services. Thank you for your cooperation and understanding.
For more agreement content, please refer to the《Openl Qizhi Community AI Collaboration Platform Usage Agreement》