CSS & HTML

CSS面向对象实现使用EL表达式来管理css对象_CSSOO use java EL manage css objects

之前为了让css高度重用,所以我使用自定义标签来管理css对象,现在为了更方便，所以直接使用java EL表达式(Expression Language)来管理越来越多的css对象,页面标签的class属性值被写在了properties配置文件里面,EL表达式负责读取与其对应的 class属性值.

所以在java web的页面中,class属性可以这样写:

<div>
<h1>
<a href=”#”>
<img src=”images/logo.png” width=”200” height=”70” alt=”logo image”/>
<span>websit logo</span>
</a>
</h1>
<p>web site introduction</p>
<ul>
<li><a href=”#”>link</a></li>
<li><a href=”#”>link</a></li>
<li><a href=”#”>link</a></li>
</ul>
</div>

el表达式中的值则可以在css.properties中进行添加和修改:

logo = logo displayBlock overflowHide
logolink = displayBlock textDecNone positionR
logoText = logoText positionA overflowHide
menuNav = menuNav positionR listStyleNo displayBlock last
menuItem = menuItem left positionR

这样做了之后,在web页面中使用的样式会更加自由,代码重用几乎可以达到100%.下面是更新后的CSS面向对象结构图:

CSS 面向对象结构图

[caption id=”” align=”alignnone” width=”600”]CSS面向对象结构图 CSS面向对象结构图[/caption]

EL表达式管理CSS对象的项目github:

https://github.com/RainZhai/cssel