如何实现CSS更少的嵌套,结构更清晰

应该组织一个代码。这是事实,我认为这是一个很好的有关嵌套的文本的开头。

因此... CSS用于描述以标记语言编写的文档的表示形式。在CSS上还有更多文本需要检查,例如CSS中的位置,文本下划线,相对单位。我们每个人都熟悉这一点,并且知道您首先需要一个选择器来检测元素,然后才是样式。

为了选择所需元素的最佳方法,我们应该使用有选择器的所有技巧。但是,CSS不允许嵌套,并且必须单独选择每个元素。换句话说,如果有子元素,则应将其与父元素完全分开定义。

Less 和 Sass

Less和Sass是CSS预处理器,它们以有价值的方式扩展CSS语言。他们提供的众多改进之一只是一种更简单,更自然的方法来定义嵌套元素及其在嵌套之间的相对位置!

嵌套使代码易于阅读,扩展和维护。这是一个选项,具有较少的解释和比较简单的解释,因此下一个解释对于它们两者都是通用的。

Nesting

一个例子将说明一切(以防万一,然后我将进行解释):

less:

.grandparent{
.parent1{
.child1{}
.child2{}
.child3{}
}
.parent2{
.child1{}
.child2{}
}
}

 
css:


.grandparent .parent1 .child1{}
.grandparent .parent1 .child2{}
.grandparent .parent1 .child3{}
.grandparent .parent2 .child1{}
.grandparent .parent2 .child2{}



因此,预处理器使您可以使用与HTML中相同的结构,而不是用同一行(CSS语法)定义带有空格的子元素。因此,如果child3元素是parent1的子代,而parent1是祖父母的子代,则所有定义均与此相同。

&符

作为开发人员,我充满了最佳实践和建议,以下是其中的一个。嵌套应该必须用于伪类,因为它是必须的。

要定义元素的特定状态,有必要在选择器旁边添加伪类,并带有嵌套,这是超直观的-只需将&符放在伪类旁边。的

`&`

嵌套时始终引用父选择器。除了这种用法之外,它还可以(但不必要)在子选择器旁边使用,但可以

`_`

.child{
&:active{}
}


如果&符号位于嵌套中子元素的旁边,则将其编译为双精度类选择器。
// less

.child{
&.grandchild{}
}


CSS:

.child.grandchild{}

结论

深度嵌套,实际上是推荐的,它有缺点 -很难重用,覆盖和扩大CSS文件,但是使用它的开发人员已经意识到了这一切,这不是问题(相信我)。

使用所有可用的功能,使您的代码编写体验尽可能快速,轻松。嵌套自然是其中之一,因此请充分利用它!

0 个评论

要回复文章请先登录注册

知识价值的认可,源自您的赞赏

扫描二维码,你的支付将由imGeek代收后转给对方

×