Streamlining CSS: Chicken Sandwiches, Simplified

Let’s order lunch and streamline our code classes.

We’ve already nuked and simplified The Yellow Buick Review’s HTML/CSS. Before we make it external, let’s streamline our CSS (cascading style sheet) even more. What’s that? You don’t know how to streamline CSS code for a poetry anthology E-book? That’s no problem. Do you at least know how to order lunch? Cool! Let’s start with that. There’s an amazing fried chicken place around the corner from the office. I’ll go around and get everyone’s order:

lunch order list

Tara would like a fried chicken sandwich with potato chips and an iced tea:

  • Toasted deli roll
  • Fried chicken
  • Bacon
  • Chipotle aioli
  • Swiss cheese
  • Lettuce
  • No tomato

Susan would like a fried chicken sandwich with potato chips and an iced tea:

  • Toasted deli roll
  • Fried chicken
  • Bacon
  • Chipotle aioli
  • Swiss cheese
  • Lettuce
  • Extra tomato

Artie would like a fried chicken sandwich with potato chips and an iced tea:

  • Toasted deli roll
  • Fried chicken
  • No bacon
  • Chipotle aioli
  • Swiss cheese
  • Lettuce
  • Tomato

You see where I’m going with this, right? Now, if we placed that order at the local food truck, it’d be kind of annoying. It would work, sure, but we could simplify that a bit:

Tara, Susan, and Artie want three fried chicken sandwiches with potato chips and iced teas.

  • All three on toasted deli rolls
  • All three with chipotle aioli
  • All three with Swiss cheese
  • All three with lettuce

Tara’s should have:

  • Bacon
  • No tomato

Susan’s sandwich should have:

  • Bacon
  • Extra Tomato

Artie’s sandwich should have:

  • No bacon
  • Tomato

See how much shorter that is? See how we can easily discern the common parts of our lunch order? If you can streamline a sandwich order, you can do that with Cascading Style Sheets.

As things stand from last time, inside YBR_6_DW_PurgedCSS.html we have a Cascading Style Sheet in which every single class has individual rules covering all of its attributes. Consider these two:

p.PoemLine, li.PoemLine, div.PoemLine {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 100%;
padding-left: 1em;
text-indent: -1em;
margin-top: 0;
margin-bottom: 0;
line-height: normal;
}
p.PoemLineIndent1, li.PoemLineIndent1, div.PoemLineIndent1 {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 100%;
padding-left: 3em;
text-indent: -1em;
margin-top: 0;
margin-bottom: 0;
line-height: normal;
}

Notice anything? Those two sets of rules are nearly identical. The only thing that changes is the padding-left attribute. The padding-left attribute has two more em’s of padding on PoemLineIndent1.

Right now, if we wanted the poetry in our anthology to be in some other typeface, we’d need to change font-family and font-size in almost a dozen different classes. That wouldn’t be fun. We’d probably miss one, and it would look bad.

So, let’s figure out what all our PoemLineXYZ classes have in common:

  • font-family: “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;
  • font-size: 100%;
  • text-indent: -1em;
  • margin-top: 0;
  • margin-bottom: 0;
  • line-height: normal;

Those rules apply for all of our PoemLine classes. To put it another way, if we were to change an attribute (size, color, indent) for ANY of our PoemLine classes, we’d want to change that attribute for ALL of our PoemLine classes. So we want to group them together when we define these common elements.

Here’s what that looks like:

p.PoemLine, li.PoemLine, div.PoemLine,
p.PoemLineIndent1, li.PoemLineIndent1, div.PoemLineIndent1,
p.PoemLineIndent2, li.PoemLineIndent2, div.PoemLineIndent2,
p.PoemLineRightJ, li.PoemLineRightJ, div.PoemLineRightJ,
p.PoemLineCenter, li.PoemLineCenter, div.PoemLineCenter {
/* I can group all of these PoemLine styles together, because
all of my PoemLine classes use the same font-family etc. The
only difference among PoemLineXYZ classes is the padding-left
and text-align */
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 100%;
text-indent: -1em;
margin-top: 0;
margin-bottom: 0;
line-height: normal;
}

I have all those commas and comments in there to remind me and my production staff what the heck I was thinking. /* Because we don’t remember what I was thinking by the time we are working on our next book. */

If I were to change the “font-size” rule from 100% to 120%, nearly all of the lines of poetry in The Yellow Buick Review would get 20% bigger. Why “nearly” all? Because the first line of each stanza is governed by one of the PoemStanza classes.

Meanwhile, since the PoemLine classes do have a few individual quirks, I just list those.

p.PoemLine, li.PoemLine, div.PoemLine {
padding-left: 1em;
text-align: left;
}

p.PoemLineIndent1, li.PoemLineIndent1, div.PoemLineIndent1 {
padding-left: 3em;
text-align: left;
}

p.PoemLineIndent2, li.PoemLineIndent2, div.PoemLineIndent2 {
padding-left: 5em;
text-align: left;
}

p.PoemLineRightJ, li.PoemLineRightJ, div.PoemLineRightJ {
padding-left: 1em;
text-align: right;
/* In practice, it's rare for right justified lines to be very long
But just in case, they should still have a hanging LEFT indent
in left-to-right languages such as English, or Latin as it happens.
So, same text-indent as others */
}

p.PoemLineCenter, li.PoemLineCenter, div.PoemLineCenter {
padding-left: 1em;
text-align: center;
}

I’ll save this file as YBR_7_StreamlinedCSS.html . I’ve dropped the “DW” part of the file names, because we’re moving away from specifically Dreamweaver tasks.

Want to poke around yourself? You can download all the Yellow Buick Review source files for free.

(Since I started posting these articles, Doug Smith wrote in with some additional consolidation tips, some of which I’ve incorporated. Doug also has some handy E-book download icons that I’ll probably start using once we move into Steps 5 and 6. Thanks, Doug!)

Now, some may protest that we’re still leaving some chips on the table (potato chips?) with regards to code streamlining. For example, PoemLine, PoemLineIndent1, and PoemLineIndent2 are all “text-align: right.” More significantly, nearly all of the attributes are identical to the PoemStanzaXYZ classes. Well, we could streamline those a bit, but I think we’ve done enough. If we streamline too much, we risk making the code harder for future staff members to read and adjust. As any poet (or Twitter user) knows, there comes a point where the language stops being “elegantly concise” and starts being “densely impenetrable.” So we’ll stop there, for now.

Besides, it’s time to eat.

Rowdy's Famous Fried Chicken Sandwich

Photo courtesy of Gary Zappelli

This post is dedicated to the late, great Flash’s Cocktail restaurant in Boston’s Back Bay. Home of the legendary Rowdy’s Famous Fried Chicken Sandwich. If you know, you know.

Updated March 2, 2015, with updated links to new files.

3 Comments

Filed under Code Samples, Look and Feel

3 responses to “Streamlining CSS: Chicken Sandwiches, Simplified

  1. Pingback: To Make a Long Narrative Poem Short | The Yellow Buick Review

  2. Pingback: Simplify, Simplify (CSS Portion) | The Yellow Buick Review

  3. Pingback: After Step 3 Comes…Step 3? | The Yellow Buick Review

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s