You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jul 3, 2024. It is now read-only.
<bodyonload="window.defaultStatus='A List Apart, for people who make websites.'" id="sectiontwo">
38
+
39
+
40
+
<divid="wrapper"><pclass="hide"><ahref="#maincontent">Skip navigation</a>.</p><divid="header"><ahref="/" title="A List Apart Home - current issue."><imgsrc="/i/h/7.gif" width="597" height="75" border="0" alt="A List Apart front page: HOME" /></a></div>
41
+
42
+
<divid="menu"><ul><liid="one"><ahref="/" title="A List Apart Home - current issue.">up front</a></li><liid="two"><ahref="/articles/" title="Design, code, content.">articles</a></li><liid="three"><ahref="/about/" title="Everything you wanted to know about A List Apart.">about ala</a></li><liid="four"><ahref="/live/" title="We may be coming to your town.">live events</a></li><liid="five"><ahref="/xmlfeed/" title="RSS feeds, headlines and summaries.">xml feeds</a></li></ul></div>
43
+
44
+
45
+
<divid="pagebody"><divid="maincontent">
46
+
47
+
48
+
<h6>ISSN: 1534-0295. xx September 2004 – Issue No. <ahref="/issues/xxx/" title="Permanent location for this issue.">xxx</a></h6>
49
+
50
+
51
+
52
+
<h1><acronymlang="en-us" title="Object-Oriented Programming">OOP</acronym>-up your styles</h1>
53
+
<h3class="byline">by <ahref="/authors/aarongustafson/" title="View all articles by this author.">Aaron Gustafson</a></h3>
54
+
55
+
<p>Seems like everywhere you turn someone is talking about Object-Oriented Programming (<acronymlang="en-us" title="Object-Oriented Programming">OOP</acronym>). Some scripting languages have been object-oriented from the beginning, while others have moved in that direction over time. <acronymlang="en-us" title="Object-Oriented Programming">OOP</acronym> makes sense: you can create generic classes, functions, etc. that can be used whenever they’re needed and can serve multiple purposes. And for designers/developers into Web Standards, it makes a lot of sense too. Just as we separate content/structure from presentation, <acronymlang="en-us" title="Object-Oriented Programming">OOP</acronym> allows us to separate behavior (or presentation) from a given situation. Generic code is reusable, scalable and tends to be less verbose than situation-specific code.</p>
56
+
57
+
<p>While working on a new website, I got to thinking about <acronymlang="en-us" title="Object-Oriented Programming">OOP</acronym> and its applications for presentation as well. Sure, styling with <acronymlang="en-us" title="Cascading Style Sheets">CSS</acronym> isn’t really programming <dfnlang="la" title="In itself; for its own sake.">per se</dfn>, but it is possible to view <acronymlang="en-us" title="Cascading Style Sheets">CSS</acronym> from an object perspective. Dan Cedarholm sowed the seed of this idea in <ahref="http://www.alistapart.com/articles/mountaintop/">Mountaintop Corners</a>, but I felt we could abstract it even further.</p>
58
+
59
+
<h2>The Example </h2>
60
+
61
+
<p>Let’s say we want to create several text boxes with rounded corners and a drop shadow, each with a different background color: </p>
62
+
63
+
<imgsrc="files/boxes.gif" width="392" height="175" alt="these are three colored boxes which we will attempt top recreate in an object-oriented manner" />
64
+
65
+
<p>Now marking these boxes up is pretty simple, this is <ahref="http://www.alistapart.com/articles/cssdropshadows/" title="A List Apart: CSS Drop Shadows">well</a><ahref="http://www.alistapart.com/articles/cssdrop2/" title="A List Apart: CSS Drop Shadows II: Fuzzy Shadows">covered</a><ahref="http://www.alistapart.com/articles/onionskin/" title="A List Apart: Onion Skinned Drop Shadows">territory</a>. We’ll take it a little farther though, letting the cascade do more of the work for us (rather than <code>class</code>-ing each div):</p>
<p>Now we can apply some style. We might consider creating a class for each colored box once we’ve <ahref="files/corners.html" title="This page shows how to build the slices to create the rounded, shadowed boxes">cut the necessary corners</a>. For example: </p>
74
+
75
+
<pre>
76
+
div.blueBox {
77
+
background: #9cf url(topLeft.gif)
78
+
top left no-repeat;
79
+
color: #fff;
80
+
float: left;
81
+
margin: 0 0 10px;
82
+
padding: 0;
83
+
max-height: 3000px;
84
+
max-width: 3000px;
85
+
}
86
+
div.blueBox div {
87
+
background: url(topRight.gif)
88
+
top right no-repeat;
89
+
padding: 0;
90
+
}
91
+
div.blueBox div div {
92
+
background: url(bottomLeft.gif)
93
+
bottom left no-repeat;
94
+
}
95
+
div.blueBox div div div {
96
+
background: url(bottomRight.gif)
97
+
bottom right no-repeat;
98
+
padding: 10px 10px 17px 15px;
99
+
}
100
+
/* reset for any inner divs */
101
+
div.blueBox div div div div {
102
+
background: transparent;
103
+
padding: 0;
104
+
}
105
+
</pre>
106
+
107
+
<p>Repeating all of that code for each box color we propose seems a little redundant. Thinking more generically, we can drop the background-color and background-image values from each div to make a generic class, “box”:</p>
108
+
109
+
<pre>
110
+
div.<strong>box</strong> {
111
+
background: url(topLeft.gif)
112
+
top left no-repeat;
113
+
float: left;
114
+
margin: 0 0 10px;
115
+
padding: 0;
116
+
max-height: 3000px;
117
+
max-width: 3000px;
118
+
}
119
+
div.<strong>box</strong> div {
120
+
background: url(topRight.gif)
121
+
top right no-repeat;
122
+
padding: 0;
123
+
}
124
+
div.<strong>box</strong> div div {
125
+
background: url(bottomLeft.gif)
126
+
bottom left no-repeat;
127
+
}
128
+
div.<strong>box</strong> div div div {
129
+
background: url(bottomRight.gif)
130
+
bottom right no-repeat;
131
+
padding: 10px 10px 17px 15px;
132
+
}
133
+
/* reset for any inner divs */
134
+
div.<strong>box</strong> div div div div {
135
+
background: transparent;
136
+
padding: 0;
137
+
}
138
+
</pre>
139
+
140
+
<p>Then we can greate another class for each color which fills in the color-specific info:</p>
141
+
142
+
<pre>
143
+
div.blue {
144
+
background-color: #9cf;
145
+
color: #fff;
146
+
}
147
+
</pre>
148
+
149
+
<p>We apply the two classes to the div as such:</p>
<p> And we can go even further, applying addional rules to change the appearance of the content within the boxes depending on their color: </p>
158
+
159
+
<pre>
160
+
div.blue h1 {
161
+
color: #070;
162
+
margin: 0 0 .25em;
163
+
}
164
+
div.blue a,
165
+
div.blue a:link,
166
+
div.blue a:visited {
167
+
border-bottom: 1px dotted #070;
168
+
color: #070;
169
+
text-decoration: none;
170
+
}
171
+
div.blue a:focus,
172
+
div.blue a:hover {
173
+
border-bottom-style: solid;
174
+
}
175
+
</pre>
176
+
177
+
<p>Now <ahref="files/final.html">we are using</a> much more compact <acronymlang="en-us" title="Cascading Style Sheets">CSS</acronym> that is capable of being reused (for instance, we could add additional colored boxes further down the line). This sort of thinking can help speed development and keeps your code flexible and reusable. And, if you’re adventurous, you can then take this simple example even further by combining this technique with semantic <code>id</code>-ing <ahref="files/withIDs.html">to great effect</a>.</p>
178
+
<h2id="talkaboutit">Discuss</h2>
179
+
<p>Was it good for you, too? <ahref="/discuss/eatcake/">Discuss</a> this article.</p>
180
+
181
+
182
+
<pid="authorbio">Aaron Gustafson is Sr. Web Designer / Developer at <ahref="http://www.cronin-co.com/" title="Cronin and Company">Cronin and Company</a> in Glastonbury, Connecticut. He is a major proponent of web standards, accessibility and usability, speaking often on these topics and helping clients, large and small, meet the growing need for well-structured and accessible websites.</p>
183
+
184
+
</div><divid="sidebar">
185
+
186
+
<divid="subnav">
187
+
188
+
189
+
<dl>
190
+
191
+
<dt>Discuss</dt>
192
+
<dd><ahref="/discuss/eatcake/">Talk about</a> this article.</dd>
<pclass="pullquote">Using JavaScript and the DOM, we have the ability to control every element on a well-structured web page. Add a bit of CSS and we have the recipe for a wonderful experience regardless of the browser, platform or device being used.</p>
201
+
202
+
<labelfor="sp-q">Search</label><br/>
203
+
<!-- Atomz Search HTML for A List Apart Magazine -->
<li><ahref="/topics/xml/">XML & Pals</a> 12</li>
255
+
256
+
</ul>
257
+
</dd></dl>
258
+
<p>ALA lives at <ahref="/logicworks/">Logicworks</a>.</p><p><ahref="http://www.jewelboxing.com/indexala.php">Jewelboxing</a>. Sweet disc packaging systems. Put your stuff in something nice, will ya?</p>
<tablewidth="100%" summary="This table contains steps necessary to complete the slicing of our round-cornered, drop shadowed box.">
49
+
<caption>Corners cut for “OOP-up your styles”</caption>
50
+
<thead>
51
+
<tr>
52
+
<thscope="col">Step 1 </th>
53
+
<thscope="col">Step 2 </th>
54
+
<thscope="col">Step 3 </th>
55
+
</tr>
56
+
</thead>
57
+
<tfoot>
58
+
<tr>
59
+
<td>First, divide the box into four corners, making sure the top and bottom left are cut such that their long edges can be extended.</td>
60
+
<td>Cut out the sections you’ve identified.</td>
61
+
<td>Using the concepts put forward in <ahref="http://www.alistapart.com/articles/mountaintop/">Mountaintop Corners</a>, get rid of the box color completely.</td>
62
+
</tr>
63
+
<tr>
64
+
<tdcolspan="3"><strong>Wrap up:</strong> Stretch the repeating regions of the top and bottom left corners to a total of 3000<abbrtitle="pixels">px</abbr> (or whatever width/height you think would be your maximum) tall or wide (depending on the orientation).</td>
65
+
</tr>
66
+
</tfoot>
67
+
<tbody>
68
+
<tr>
69
+
<td><imgsrc="step1.gif" width="165" height="213" alt="Dividing the box into four corners" /></td>
70
+
<td><imgsrc="step2.gif" width="165" height="213" alt="Dropping out un-needed graphics from the box" /></td>
71
+
<td><imgsrc="step3.gif" width="165" height="213" alt="Removing the box color to make it more generic" /></td>
0 commit comments