Question

2年多来，我建立了自己的网站，每个JSP页面都有自己定义的css。现在作为性能优化的一部分，我想将这些CSS合并到一个css文件中。如何在不受相同选择器名称影响的情况下合并它？

例如，我有多个JSP页面定义以下选择器

table.myitemlisttable {
    width: 100%;
    margin: 10px auto;
    padding: 0px;
    border: 0px;
    border-collapse: collapse;
    background-color: rgba(0, 0, 0, .7);
}

其中名称相同但属性存在差异

Answer 1

我要做的一件事是避免冲突并保持课程数量下降，每个body代码都会id。然后我可以将它们用作限制选择器来限制我的规则范围。例如，您有一个“联系我们”页面和一个“产品”页面。产品获得：

<body id="products">

与我们联系

<body id="contactus">

每个页面都可以有一个具有相同类的表，而在CSS中，您只需将id放在规则前面。

#products table.myitemlisttable {
    width: 100%;
    margin: 10px auto;
    padding: 0px;
    border: 0px;
    border-collapse: collapse;
    background-color: rgba(0, 0, 0, .7);
}

#contactus table.myitemlisttable {
    width: 100%;
    margin: 10px auto;
    padding: 0px;
    border: 0px;
    border-collapse: collapse;
    background-color: rgba(255, 255, 255, .7);
}

您甚至可以在所有页面上找到一致的内容，然后将其拉出来保存行。

table.myitemlisttable {
    width: 100%;
    margin: 10px auto;
    padding: 0px;
    border: 0px;
    border-collapse: collapse;
    background-color: rgba(0, 0, 0, .7);
}

#products table.myitemlisttable {
    background-color: rgba(0, 0, 0, .7);
}

#contactus table.myitemlisttable {
    background-color: rgba(255, 255, 255, .7);
}

Answer 2

通过在末尾附加页面名称来更改类或ID。例如。 table.myitemlisttable_page_items。
复制+将每个CSS片段粘贴到一个CSS页面中。
根据需要重命名类和ID，并尽可能删除任何重复的CSS。

Answer 3

嗯..我喜欢@misterManSam的答案，但我稍微改变一下，以减少很多地方的班级变化。

我将一个类或id添加到我的css选择器中，然后在每个页面上包装（全部）我的html ...

<强> CSS

.page1 table.myitemlisttable
.page2 table.myitemlisttable

<强> HTML

<div class='page1'> ...existing page1... </div>

将css合并到一个css文件中

3 个答案: