当前位置:  开发笔记 > 前端 > 正文

我们可以在另一个css类中包含常见的css类吗?

如何解决《我们可以在另一个css类中包含常见的css类吗?》经验,为你挑选了3个好方法。

我是CSS新手.我只是想知道,是否有可能将一个共同的类包含在另一个类中?

例如,

.center {align: center};
.content { include .center here};

我遇到了css框架 - 蓝图.我们需要将位置信息放入HTML中,例如

因此,我们将定位属性放在html中,而不是css中.如果我们改变布局,我们需要更改html而不是css.

这就是我问这个问题的原因.如果我可以将.span-4包含在我自己的CSS中,我将不必在我的html标记中指定它.



1> cletus..:

奇怪的是,即使CSS谈论继承,类也不能以这种方式"继承".你真正做的最好的是:

.center, .content { align: center; }
.content { /* ... */ }

另外我强烈建议你不要这样做"裸"类选择器.尽可能使用和ID或标签和类:

div.center, div.content { align: center; }
div.content { /* ... */ }

我之所以这么说是因为如果你尽可能广泛地选择你的选择器,一旦你获得大型样式表,它最终会变得难以管理(根据我的经验).您最终会将非预期的选择器相互交互到您创建新类(如.center2)的位置,因为更改原始内容会影响您不想要的各种事物.


我强烈反对避免裸体选择者.在我多年的CSS中,我从来没有遇到过将两个概念上不同的类命名为相同的问题.如果你这样做,那么a)你可以很容易地改变一个名字,b)指定元素名称不会解决问题,只是使它不那么可预测,并且通过扩展,更难以诊断和解决,因为*大多数时候,元素不匹配,所以bug只会出现一些时间.真正的问题是使用类似"中心"的类名.
我必须部分同意cletus和Thom.首先,像"中心"这样的类描述它应该是什么样子,而不是它的样子,应该避免.像"内容"这样的语义类名称是更好的选择.现在,至于使用广泛(或"裸")选择器,我必须同意cletus - 它确实是一个灾难的秘诀.Firebug使得识别错误变得更容易,但是如果你有十个`
,每个都有不同的语义含义,那么每个都应该拥有它自己的类.如果它们共享显示属性,则使用多重选择器(例如`div.content,div.author_name {}`)

2> Derek Reynol..:

这就是层叠的层叠样式表也发挥了作用.

将您的html元素或窗口小部件/模块(嵌套的html元素组)视为对象.您知道您将拥有共享相同属性的对象,因此您需要创建可以使用的可重用类.

.baseModule {align: center;}

假设您的模块是一条消息(错误,闪烁...).因此,您"扩展"或"包含".baseModule类,因为所有消息都将居中对齐(请参阅最终的html示例).

.message {border: 1px solid #555;}

此外,您希望您的错误消息具有红色背景.此外,如果您希望它是不同的颜色或其他东西,您可以在此处覆盖.baseModule.message的border属性.

.error {background-color: red;}

所以现在你有一些可以轻松重用的css定义.


I am a regular message.

I am an error message. My background color is red.

要将此与您的问题联系起来,您基本上可以利用多个类名来获得最大的可重用性.当然,ie6不支持链式选择器(class1.class2.class3),但它仍然是一个巧妙的技巧!



3> Deeksy..:

在标准的CSS中,它不可能这样做,尽管它会很好.

对于类似的东西,你需要使用SASS或类似的,"编译"到CSS.


+1这些系统只是使CSS编写更容易 - 它们最终都像普通的CSS一样.
推荐阅读
云聪京初瑞子_617
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有