我们知道，使用css类作为标识符为HTML元素赋予功能和特性在某些时候会非常便利，现在举一个实际的例子。

我们在ZCMS的前端功能开发时经常会为链接加${FrontAppContext}前缀和SiteID=${Site.ID}后缀，类似于

       <a class="member_photo" href="${FrontAppContext}member/info?SiteID=${Site.ID}">

这种写法大量存在于前端动态功能模板中，写起来既不便利也不美观。很显然这种小问题不太可能去封装一个标签，如果封装成模板函数（类似于${frontlink('member/info')}）也差不太多，那么使用css类怎么做呢？

可以这样：

首先，写一个空的ccs类到公共css文件中，类似于：

.front-link{}

然后，加一段js到公共js文件中，类似于：

	// 所有前端链接统一前缀和后缀
	$("a.front-link").each(function() {
		var href = $(this).attr("href");
		if (href.indexOf("?") > 0) {
			href += "&";
		} else {
			href += "?";
		}
		href += "SiteID=" + siteID;
		href = frontAppContext + href;
		$(this).attr("href", href);
	});

最后，在前端模板中使用此样式：

       <a class="member_photo front-link" href="member/info">

很明显，用起来酸爽多了。