代码之家 › 专栏 › 技术社区 › Enigmativity

现有网站CSS替换(重新蒙皮)最佳实践,无需更改HTML

skinning css

2

Enigmativity · 技术社区 · 16 年前

我可以看到许多其他关于CSS在堆栈溢出方面的最佳实践的好答案:

但我想我有一个不同的问题。

div 的和 ul 它有一个很好的现有CSS文件,但是当我开始对CSS进行更改时,我很快发现我破坏了布局。我的感觉是,很难感觉到所有CSS是如何协同工作的,实际上CSS对HTML中的父元素和兄弟元素有什么影响。

因此,我的问题是“通过仅替换CSS而不修改现有HTML来重新定义现有网站的最佳实践是什么?”我不能更改类、id、节点层次结构等。

我正在尝试重新设置皮肤的特定站点的一个示例是 http://demo.nopcommerce.com/ .

现有的CSS可以和从主CSS文件中提取的内容一样复杂/详细:

.header-selectors-wrapper
{
    text-align: right;
    float: right;
    width: 500px;
}

.header-currencyselector
{
    float: right;
}

.header-languageselector
{
    float: left;
}

.header-taxDisplayTypeSelector
{
    float: right;
}

.header-links-wrapper
{
    float: right;
    text-align: right;
    width: 570px;
}

.header-links
{
    border: solid 1px #9a9a9a;
    padding: 5px 5px 5px 5px;
    margin-bottom: 5px;
    display: inline-table;
}

.order-summary-content .cart .cart-item-row td, .wishlist-content .cart .cart-item-row td
{
    border-bottom: 1px solid #c5c5c5;
    vertical-align: middle;
    line-height: 30px;
}

.order-summary-content .cart .cart-item-row td.product, .wishlist-content .cart .cart-item-row td.product
{
    text-align: left;
    padding: 0px 10px 0px 10px;
}

.order-summary-content .cart .cart-item-row td.product a, .wishlist-content .cart .cart-item-row td.product a
{
    font-weight: bold;
}

任何帮助都将不胜感激。

4 回复 | 直到 8 年前

1

Dave A-R 16 年前

crimson_penguin和Jon P都建议使用好的工具,所以我会给你一些一般性的建议。

在你的情况下我会这么做,尽管这不是解决办法。

首先,要知道你希望最终产品的外观。准备好一个设计,这样你从一开始就知道你想在哪里结束。也不要吝啬于任何细节,“训练中出汗越多,战斗中流血越少”

例如:

#navigation {....}
   #navigation #left {....}
     #navigation #left h1 {....}
     #navigation #left p {....}
   #navigation #right {....}

一旦你有了一个设计并且知道了当前的代码,就开始做一些修改。首先从简单的低级元素开始,比如一个文本块或一个图像。然后你可以在这些周围建立。正如前面两张海报所提到的,Firebug(用于Firefox)和DOM检查器(用于Safari/Chrome)非常有用,因为在看到它的外观之前,您可以在页面上尝试一些东西,而不必做任何承诺。

这是一个漫长的、可能会有压力的过程,但只要有点耐心和毅力,你很快就能达到目的。

2

1

crimson_penguin 16 年前

如果我这样做的话,我将广泛地使用WebKit的DOM检查器(Safari或Chrome中提供的方法是右键单击页面并选择Inspect元素)。我希望它能帮助您在编写新的css时,将注意力集中在节点/类/id结构上,并帮助您调试新的css。

它比只查看源代码要方便得多,因为它位于树状视图中,并且节点在默认情况下是折叠的。它还有一些非常有用的特性,用于检查节点的度量(宽度/高度/填充/边框/边距),以及显示应用于节点的样式、顺序和最终使用的样式。

3

1

MW_dev 16 年前

我建议使用 Firebug Firefox插件。您可以使用它来预览对CSS的更改,方法是在浏览器中查看页面时编辑现有CSS,而不必对CSS文件进行永久性更改。你会对样式等的“层叠”有一个概念。

一个非常方便的javascript调试工具。

4

0

Rodney P. Barbati 7 年前

在我的工作中,我们刚刚开始了大规模的重新整理工作—大约13000个JSP页面,应用程序的代码行数超过150万行。

在输出所有CSS之后,该工具将在每个元素上用适当的CSS类重写JSP文件。

应当指出的是,在任何有关的网页中,几乎没有共同之处。我想,当我们在几次迭代中对工具进行微调时,我们也许可以确定页面的特定部分属于一组页面级组件,如面板、字段组、容器等。如果我们可以确定每个页面中的这些元素,我们最终可以注入实际的可重用组件来代替现有的HTML。

我认为这可能是唯一有效的方法,有机会在一定程度上转换的信心,没有得到打破的网页。我们根本不会改变HTML元素的结构,所以一开始,这个工具的输出应该和它现在的样子一模一样,但是有了这个结构,我们就可以通过对正确的类进行单点编辑来改变整个应用程序的外观,等等。

CSS块

不管怎样,我希望其中一些是有意义的,可以是有用的。请随时给我发邮件询问或评论。