寻找CSS最小化器 [英] Looking for CSS minimizer

查看:61
本文介绍了寻找CSS最小化器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个大型CSS文件,其中包含以下类:

myclass {

margin-right:7px;

margin-顶部:5px;

填充底部:5px;

填充顶部:5px;

}


我想将CSS文件减少到最小值

- 删除冗余行

- 定义缩短。例如。以上课程应更改为

保证金:5px 7px 0px 0px;

填充:5px 0px 5px 0px;

请告诉我哪个工具可以使用。


谢谢,

Yash

I have a large CSS file which has classes defined such as:
myclass {
margin-right:7px;
margin-top:5px;
padding-bottom:5px;
padding-top:5px;
}

I would like to reduce the CSS file to its minimum with
- redundant lines removed
- defintion shortened. e,g. the above class should be changed to
margin : 5px 7px 0px 0px;
padding : 5px 0px 5px 0px;
Please let me know which tool can be used.

Thanks,
Yash

推荐答案

Yashgt写道:
Yashgt wrote:

我有一个大的CSS文件,其中定义了类如下:

myclass {

margin -right:7px;

margin-top:5px;

padding-bottom:5px;

padding-top:5px;

}


我想将CSS文件减少到最小值

- 删除冗余行

- 定义缩短了。例如。上面的类应改为

保证金:5px 7px 0px 0px;

填充:5px 0px 5px 0px;
I have a large CSS file which has classes defined such as:
myclass {
margin-right:7px;
margin-top:5px;
padding-bottom:5px;
padding-top:5px;
}

I would like to reduce the CSS file to its minimum with
- redundant lines removed
- defintion shortened. e,g. the above class should be changed to
margin : 5px 7px 0px 0px;
padding : 5px 0px 5px 0px;



实际上他们可能是


..myclass {

保证金:7px 5px 0 0 ;

填充:5px 0;

}


,最好的工具是记事本和人类...


-

保重,


Jonathan

------- ------------

LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com


(后续设置为ciwas,因为这不是HTML问题)


Yashgt写道:
(follow-ups set to c.i.w.a.s only, since this isn''t an HTML question)

Yashgt wrote:

我有一个大的CSS文件,其中包含定义的类,例如:

myclass {

margin-right:7px;

margin-top:5px;

padding-bottom:5px;

padding-top:5px;

}


我想将CSS文件减少到最小值

- 删除冗余线路

- defintion sh ortened。例如。上面的类应改为

保证金:5px 7px 0px 0px;

填充:5px 0px 5px 0px;
I have a large CSS file which has classes defined such as:
myclass {
margin-right:7px;
margin-top:5px;
padding-bottom:5px;
padding-top:5px;
}

I would like to reduce the CSS file to its minimum with
- redundant lines removed
- defintion shortened. e,g. the above class should be changed to
margin : 5px 7px 0px 0px;
padding : 5px 0px 5px 0px;



保证金:5px 7px 0px 0px;


不等于


保证金权利:7px;

margin-top:5px;


前者可能会覆盖左边距和下边距,否则会因为其他因素而在受影响的元素上设置
已经应用了

的CSS规则。


顺便说一句,你需要在myclass前面有一段时间。

margin: 5px 7px 0px 0px;

is not the equivalent of

margin-right: 7px;
margin-top: 5px;

The former may override left and bottom margins that would otherwise
have been set on the affected elements because of other CSS rules that
have been applied.

By the way, you need a period in front of myclass.


7月3日,11:14,Yashgt< yas ... @ gmail.comwrote:
On 3 Jul, 11:14, Yashgt <yas...@gmail.comwrote:

我有一个包含类的大型CSS文件定义如下:

myclass {

margin-right:7px;

margin-top:5px;

padding-bottom:5px;

padding-top:5px;


}


我想减少使用

将CSS文件降至最低 - 删除冗余行ed

- 缩短了定义。例如。上面的类应改为

保证金:5px 7px 0px 0px;

填充:5px 0px 5px 0px;
I have a large CSS file which has classes defined such as:
myclass {
margin-right:7px;
margin-top:5px;
padding-bottom:5px;
padding-top:5px;

}

I would like to reduce the CSS file to its minimum with
- redundant lines removed
- defintion shortened. e,g. the above class should be changed to
margin : 5px 7px 0px 0px;
padding : 5px 0px 5px 0px;



这是一个很难的问题,很难实现,这是不切实际的。通过单独处理CSS

肯定是不可能的(有用的)


简单易懂保证金权利的情况:< 1vs。保证金:< 4很容易

足够,但不是很有用。在单个块的

范围内,如果提供了所有四个值,则很容易。如果这些值的某些值相等,那么生成保证金属性的1,2或3
值版本仍然很容易。


问题是如果提供了某些值_aren''t_。在你的

例子中,保证金:5px 7px 0px 0px;这是错误的 - 设置边际 -

底部和保证金左边为0,之前它们没有设置为

all。

如果您对具有完全匹配的

选择器的块的CSS属性进行分组,那么您可以节省更多(如果CSS已写入

)这种方式,通常不适合复杂的工作)。再说

但是,你只能用CSS取代整套的哑比赛

,这显然是效率低下的。


总的来说,这个微不足道的最小化就是:琐碎的。它可能会节省几个字节,但不足以值得。


真正的优化是在一个块中实现属性将

可证明永远不会被应用,因为他们总是会在另一个具有不同选择器的块中使用

属性。这是一个计算上很困难的b $ b,需要了解整个网站 -

HTML。不仅仅是一页HTML,而是适用于整个网站的整个CSS meta-

结构。 _IF_你知道

" nav-menu" class只适用于HTML元素,这些元素是header-bar的子元素。上课,然后你可以在此基础上做简单的b $ b简化。然而,这也改变了CSS的CSS行为(单独的CSS)和一个带有裸的页面。导航菜单
在标题之外使用的
可能会注意到行为的结果变化。


CSS几乎都编码错误。因此,如果一个工具难以提供

并且只显示设计结构一致的好处,

但其编码效率稍低,那么它非常狭窄

这种工具的实用余量。



This is a difficult problem, so difficult that it''s impractical. It''s
certainly not possible to do it (usefully) by processing the CSS
alone.

The trivially simple case of margin-right: <1vs. margin: <4is easy
enough, but just not very useful. It''s only easy to do within the
scope of a single block, and if all four values are supplied. If some
of these values are equal, it''s still easy to generate the 1,2 or 3
valued version of the margin property.

The problem is though if some of the values _aren''t_ supplied. In your
example, margin : 5px 7px 0px 0px; is just wrong - that sets margin-
bottom and margin-left to 0 when previously they hadn''t been set at
all.

If you group the CSS properties for blocks with exactly matching
selectors, then you can likely save a bit more (if the CSS was written
in that way, which it often isn''t for sophisitcated work). Again
though, you''re only able to replace dumb matches of entire sets in CSS
that''s _obviously_ inefficient.

Overall, this trivial minimisation is just that: trivial. It might
save a few bytes, but not enough to be worthwhile.

The real optimisation is in realising the properties in one block will
provably never be applied as they''re always going to be preceded by
properties in another block with a different selector. This is
computationally difficult and requires knowledge of the entire site -
the HTML as well. Not just one page of HTML, but the whole CSS meta-
structure that applies across the whole site. _IF_ you know that the
"nav-menu" class is only ever applied to HTML elements that are
children of the "header-bar" class, then you can potentially do
simplifications on the basis of this. However this also _changes_ the
behaviour of the CSS (the CSS alone) and a page with a "bare" nav-menu
used outside the header might notice a resultant change in behaviour.

CSS is almost all badly coded. So where a tool is difficult to provide
and only shows a benefiit where the design structure is consistent,
yet slightly inefficient in its coding, then that''s a very narrow
margin of usefulness for such a tool.



这篇关于寻找CSS最小化器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆