管理CSS爆炸
我一直非常依赖CSS来开发我正在工作的网站。现在，所有CSS样式都在每个标记的基础上应用，因此现在我尝试将其移至更多外部样式中，以帮助将来进行任何更改。
但是现在的问题是，我注意到我遇到了“ CSS爆炸”。对我来说，决定如何最好地组织和抽象CSS文件中的数据变得越来越困难。
我正在div从大量基于表格的网站中使用网站中的大量标签。因此，我得到了许多如下所示的CSS选择器：
div.title {
background-color: blue;
color: white;
text-align: center;
}
div.footer {
/* Styles Here */
}
div.body {
/* Styles Here */
}
/* And many more */
还算不错，但是作为我的初学者，我想知道是否可以就如何最好地组织CSS文件的各个部分提出建议。我不想为网站上的每个元素都拥有单独的CSS属性，而且我一直希望CSS文件相当直观且易于阅读。
我的最终目标是简化CSS文件的使用并展示其强大功能以提高Web开发速度。这样，将来可能在该站点上工作的其他个人也将进入使用良好编码实践的实践中，而不必像我以前那样去实践。
问题答案：
这个问题问得好。在我所看到的所有地方，CSS文件都会在一段时间后失去控制，尤其是（但不仅限于）团队合作时。
以下是我本人想要遵守的规则（并非我总是设法做到）。
-
尽早重构，经常重构。 经常清理CSS文件，将同一类的多个定义融合在一起。 立即 删除过时的定义。
-
在修复错误期间添加CSS时，请留意更改的内容（“这是为了确保该框在IE <7中保持对齐”）
-
避免冗余，例如在
.classname和中定义相同的内容.classname:hover。 -
使用注释
/** Head **/来构建清晰的结构。 -
使用有助于保持风格不变的修饰工具。我使用 Polystyle ，我很高兴（售价15美元，但花得很值）。也有免费的工具（例如，基于 CSS Tidy的 Code Beautifier ，这是一个开放源代码工具）。 ****
-
建立明智的课程。请参阅下面的一些注意事项。
-
使用语义，避免DIV汤-
<ul>例如，将s用于菜单。 -
在尽可能低的级别上定义所有内容（例如，中的默认字体系列，颜色和大小
body），并inherit在可能的情况下使用 -
如果您有非常复杂的CSS，则CSS预编译器可能会有所帮助。我正计划出于同样的原因研究 xCSS 。周围还有其他几个。
-
如果是团队合作，请同时强调CSS文件的质量和标准。每个人都非常重视其编程语言的编码标准，但是很少有人意识到这对于CSS也是必要的。
-
如果是团队合作， 请 考虑使用版本控制。它使事情更容易跟踪，而编辑冲突也更容易解决。即使您只是“简单”地学习HTML和CSS，这也确实值得。
-
请勿使用
!important。不仅因为IE=<7无法处理它。在复杂的结构中，!important经常会使用来更改无法找到其来源的行为，但这是长期维护的 毒药 。
建立明智的班级
这就是我喜欢建立明智的班级的方式。
我首先应用全局设置：
body { font-family: .... font-size ... color ... }
a { text-decoration: none; }
然后，我确定页面布局的主要部分，例如顶部区域，菜单，内容和页脚。 如果我编写了不错的标记，那么这些区域将与HTML结构相同。
然后，我开始构建CSS类，在合理的范围内尽可能多地指定祖先，并尽可能地将相关类分组。
div.content ul.table_of_contents
div.content ul.table_of_contents li
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber
将整个CSS结构视为 一棵 具有越来越具体定义的 树 ，离您的根越远。您希望将类的数量保持在尽可能低的水平，并且希望很少重复。
例如，假设您具有三个级别的导航菜单。这三个菜单看起来不同，但是它们也具有某些特征。例如，它们都是<ul>，它们的字体大小都相同，并且所有项目都彼此相邻（与的默认呈现相反ul）。此外，所有菜单都没有任何项目符号（list- style-type）。
首先，在名为的类中定义 通用 特征menu：
div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }
然后，定义三个菜单中每个菜单的特定特征。级别1高40像素；2和3级，20像素。
注意： 您也可以为此使用多个类，但是Internet Explorer 6的多个类存在问题，因此本示例使用id。
div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }
菜单的标记如下所示：
<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>
如果您在页面上具有语义上相似的元素（例如这三个菜单），请尝试先计算出共同点，然后将它们放入类中；然后，计算出特定的属性并将其应用于类，或者，如果必须支持Internet
Explorer 6，则将其应用于ID。
其他HTML技巧
如果将这些语义添加到HTML输出中，设计人员以后可以使用纯CSS自定义网站和/或应用程序的外观，这是一个很大的优势，可以节省时间。
-
如果可能的话，给每个页面的主体一个唯一的类：
<body class='contactpage'>这使得在样式表中添加特定于页面的调整非常容易：body.contactpage div.container ul.mainmenu li { color: green } -
自动构建菜单时，请添加尽可能多的CSS上下文，以便以后进行广泛的样式设置。例如：
<ul class="mainmenu"> - First item
- Second item
- Third item
- Fourth item
-
本文向大家介绍CSS 爆发，包括了CSS 爆发的使用技巧和注意事项，需要的朋友参考一下 示例 爆发类似于恒星，但其点与人体的距离较小。可以将爆裂形状想象成一个正方形，顶部有多个稍微旋转的正方形。 使用::before和::after伪元素创建其他正方形。 8点爆发 8点突发是2个分层的正方形。底部的正方形是元素本身，另外的正方形是使用:before伪元素创建的。底部旋转20°，顶部方块旋转135°
-
管理 CSS 的推荐方法是简单地使用 *.vue 单个文件组件内的 <style>，它提供： 与 HTML 并列同级，组件作用域 CSS 能够使用预处理器(pre-processor)或 PostCSS 开发过程中热重载(hot-reload) 更重要的是，vue-style-loader（vue-loader 内部使用的 loader），具备一些服务器端渲染的特殊功能： 客户端和服务器端的通用编
-
管理 CSS 的推荐方法是简单地使用*.vue单个文件组件内的<style>，它提供： 与 HTML 并列同级，组件作用域 CSS 能够使用预处理器(pre-processor)或 PostCSS 开发过程中热重载(hot-reload) 更重要的是，vue-style-loader（vue-loader内部使用的 loader），具备一些服务器端渲染的特殊功能： 客户端和服务器端的通用编程体验。
-
我想动态地管理Wildfly应用服务器中部署和分解的，这意味着无需重新实例化或重新部署整个包即可更改其内容（主要是文件作为子模块）。（这需要时间，在此期间其他模块不可用） 我试图通过Wildlfy CLI使用可用于部署的命令来实现这一点，例如以下命令： 这些命令有效地删除或添加Wildfly上分解的应用程序中的内容，但是如果不重新部署整个应用程序，它似乎不会被部署。 有没有办法实现这一目标？可行吗
-
问题内容： 我看到这个问题从Django的项目和建议,但仍不能得到这个工作。我的Django Admin页面根本不显示CSS。 这是我当前的配置。 settings.py httpd.conf 另外，我还运行以下命令来创建（我认为）符号链接 ln -s /home/djangotest/sgel/media/admin/ /usr/lib/python2.6/site-packages/djang
-
我很难弄清楚这件事。我只想在我需要的某些页面上插入某些CSS和JS文件。因此，我在平铺定义文件中做了类似的操作： 这是insertScripts.jsp电码: 所以我在我的baseLayout页面中这样调用它，它是addUser页面的父页面: 问题是它抛出了以下异常: