Building constants into CSS using JSP
March 21, 2007 – 1:23 amThe concept of constants in CSS doesn’t seem to really exist. So I created a JSP page instead of a css file to make life easier, simple concept but saved me lots of time when I decided to give my site a face lift.
How I did it:
I created a file mystyles.jsp and basically just set some java variables at the top then referenced them using the <%= %> syntax in the file. For example:
<% //basic colors
String white = "#FFFFFF";
String red = "#FF0000";
String blue = "#0000FF";
String black = "#000000";
//base definitions
String primaryColor = "#3B895B"; //color of widgets
String accentColor = "#3B895B";
String font = "Verdana, Arial, Helvetica, sans-serif";
%>body {
font-family: <%=font>;
padding-top: 2px;
margin-top: 0px;
color: <%=black>;
}
I think you get the idea, then I just include the css using:<link rel=“stylesheet” type=“text/css” href=”mystyle.jsp“>
curious if anyone else has had thoughts on a better approach…
One Response to “Building constants into CSS using JSP”
I have done similar move in JSP. Recently I have been experimenting with a different technique; here is the comment I put in my CSS which explains it well:
* All Colors: PLEASE READ
This section is layed out differently to most CSS developers intuition.
Each block enclosed in curly brackets has just 1 property getting a color applied.
The preceding set of comma delimited tags, classes and IDs, are all the dom elements
items to use that color.
h1, p, .comments, #username {
color: #pink;
}
this minimises the duplication of colors in the CSS, is more efficient and obvious
in terms of cascading color precidence. It makes it easy to limit developers
pallette to known colors AND limit their applciation. Reskinning will be *much*
easier too.
The rest of this file, and other CSS in this project is layed out conventionally,
unless similary marked
I have .stubbys for all the fg/bg section - these will be pruned once the palettte
is tuned.
———————————————– */
and a sample looks like:
body,
ul.tabs li, tr.channelHeader,
span.fullHighlight, a.fullHighlight, span.halfHighlight, a.halfHighlight, span.halfHighlight a
{
background-color: #CDCDCD; /* mid grey */
}
.stubby {
background-color: #7f7f7f; /* dark grey */
}
.rar {
background-color: black; /* black */
}
This discourages other developers to add different colors, and dictates what context they can be used in. It makes it easy to find where and why a color is being used, as each color is only listed once per context. (I have color, background-color and border color listings, so each color is listed up to 3 times. )
By toolman on Mar 21, 2007