Inline styles and the people who hate them

2 Feb 2006 - 9:43pm
8 years ago
5 replies
571 reads
Troy Brophy
2005

Sorry about the sensationalist subject line. I couldn't resist.

For the past six months I've been building a massive, consumer Web
application. I took over the development from a guy who was keen on
standards-compliant XHTML (yay!) and keeping every style rule in an external
CSS document (kinda yay). This worked great up until I hit line 6000 of the
external CSS doc and Dreamweaver started choking a little each time I saved.

Then I began grouping pages of the site into sections and creating CSS docs
for each section. This helped, because a lot of rules could be taken out of
the main doc and put into a smaller doc. (The server gzips all outgoing CSS
docs, so even with 6000 lines, the file size for transmission is only about
10-15k.)

Now, the wonderful thing about this app is that it has dozens of pages with
unique designs. Each of these unique designs requires many elements to be
positioned, floated, padded, margined, bordered or backgrounded uniquely.
This has contributed in no small way to the 10,000+ lines of CSS rules for
this app.

Now, when a product manager points to an element on a page and says, "I'd
like you to move that box a little closer to the one above it," I first have
to open the HTML (actually .JSP) file, find the element in question, grab
the class name, then open the associated CSS doc, search for the class name
and finally make the change. (And of course, the requests are seldom so
simple, which means the fixes tend to involve a lot more scrolling around
inside a multi-thousand-line doc looking for a CSS value.)

I've been putting these positioning rules into the external CSS dogmatically
since taking over this job, and also because nearly every place you look you
see people extolling the virtues of separating style from content. Yes,
yes.It's a great idea. Particularly effective when you have a fairly simple
set of page designs and a lot of content to flow into them. But when you
have an app with over a hundred pages, most having unique designs and very
little content, positioning elements inline is a huge time-saver.

One of the big benefits of separating style rules from content is the ease
of making site-wide changes with minimal effort. Another benefit I can see
is having an app that's ready to be ported to handheld, or other medium. But
in the case of this app, site-wide changes can only really affect colors and
fonts, since there are so many unique design structures throughout. And
since there are no plans to port this to handheld, that argument loses its
strength.

So my current consideration is to move the specific positioning information
back into inline styling. Positioning that is repeated frequently on one
page will be moved to the header (internal). And, naturally, globally-used
styles will remain in the blessed external CSS docs.

If you've made it this far into the e-mail, thanks. I'd love to hear any
counter arguments to this desire for regression. I've heard rumors that
inline styles will be deprecated in future versions of XTHML. If true, that
would give me pause. I've tried so many times to set up site-wide standards
for the use of fully-external CSS in this app, but its complexity has made
doing so mind-numbingly difficult.

-Troy

Comments

2 Feb 2006 - 10:06pm
Steve Baty
2009

Troy,

One option you might like to consider is to use in-page styles based on the
specific element ID of the object being modified. Since the stylesheet
processing rules will give anything on the page greater precedence than the
included stylesheets, you can have <div class="className" id="uniqueID"> and
created the specific positioning styles you need for the ID - ie #uniqueID
{styles here;}

This approach allows you to maintain the separation between content and
styling code whilst reducing a) the weight of the global CSS; and b) the
hunting around you have to do to modify a particular element - you know it's
positioning styles will be located at the top of the page.

I agree with your general approach, and your desire to avoid inline styles
as much as possible.

I hope this helps.

Steve Baty
Director, User Experience Strategy
Red Square

On 03/02/06, Troy Brophy <troy at bitspark.com> wrote:
>
> <snip>
>
> If you've made it this far into the e-mail, thanks. I'd love to hear any
> counter arguments to this desire for regression. I've heard rumors that
> inline styles will be deprecated in future versions of XTHML. If true,
> that
> would give me pause. I've tried so many times to set up site-wide
> standards
> for the use of fully-external CSS in this app, but its complexity has made
> doing so mind-numbingly difficult.
>
> -Troy
>
>

2 Feb 2006 - 10:55pm
Kyle Cooney
2006

It may be too late for for you to implement this, but one thing that I've
been doing lately is separating my stylesheets at a very high level, by
function.

For example, I have a single css file which I link to in every page, named
main.css. That file contains the following content/statements:

@import url(/css/typography.css);
@import url(/css/positioning.css);
@import url(/css/color.css);

Still, at 6000 lines, deciding what style belongs in each file might be no
small task. You might be able to take the idea a bit further, though, and
create various incarnations of the main.css file, representing various
templates or sections of the application in question and create css files in
subfolders, something like (just an example):

/css/crm.css
@import url(/css/crm/typography.css);
@import url(/css/crm/positioning.css);
@import url(/css/crm/color.css);

/css/cms.css
@import url(/css/cms/typography.css);
@import url(/css/cms/positioning.css);
@import url(/css/cms/color.css);

/css/etcetc.css
@import url(/css/etcetc/typography.css);
@import url(/css/etcetc/positioning.css);
@import url(/css/etcetc/color.css);

Anyhow, just my .02 cents. I hope it helps.

Best,

Kyle

On 2/2/06, Doc <stevebaty at gmail.com> wrote:
> [Please voluntarily trim replies to include only relevant quoted
material.]
>
> Troy,
>
> One option you might like to consider is to use in-page styles based on
the
> specific element ID of the object being modified. Since the stylesheet
> processing rules will give anything on the page greater precedence than
the
> included stylesheets, you can have <div class="className" id="uniqueID">
and
> created the specific positioning styles you need for the ID - ie #uniqueID
> {styles here;}
>
> This approach allows you to maintain the separation between content and
> styling code whilst reducing a) the weight of the global CSS; and b) the
> hunting around you have to do to modify a particular element - you know
it's
> positioning styles will be located at the top of the page.
>
> I agree with your general approach, and your desire to avoid inline styles
> as much as possible.
>
> I hope this helps.
>
> Steve Baty
> Director, User Experience Strategy
> Red Square
>
> On 03/02/06, Troy Brophy <troy at bitspark.com> wrote:
> >
> > <snip>
> >
> > If you've made it this far into the e-mail, thanks. I'd love to hear any
> > counter arguments to this desire for regression. I've heard rumors that
> > inline styles will be deprecated in future versions of XTHML. If true,
> > that
> > would give me pause. I've tried so many times to set up site-wide
> > standards
> > for the use of fully-external CSS in this app, but its complexity has
made
> > doing so mind-numbingly difficult.
> >
> > -Troy
> >
> >
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

3 Feb 2006 - 11:08am
jbellis
2005

Troy,

On the matter of effeciently identifying what style is in force at a given
snippet in a page, I just moved from TopStyle (already pretty powerful) to
StyleMaster (which might have been mentioned here a few days ago) and it has
an awesome answer to that.

You can click anything in the live HTML preview pane and in addition to
showing the full hierarchical ancestry of the tags (DreamWeaver's "Relevant
CSS"), it instantly highlights the applied style in the style list! Unless I
missed something, this might be a critical benefit to you.... and really
great interaction design, I might add. In effect, since your CSS and pages
show simultaneously in the CSS tool, it might "virtually" put the isolated
CSS back "into" the content page, right? I guess it comes down to whether
the JSPs render in StyleMaster... or you can trick it into doing so.

www.jackbellis.com, www.usabilityInstitute.com
----- Original Message -----
From: "Troy Brophy" <troy at bitspark.com>
This worked great up until I hit line 6000 of the
> external CSS doc and Dreamweaver started choking a little each time I
saved.
>

3 Feb 2006 - 4:21pm
Andrea Kulkarni
2006

It seems like you are in need of some development
management tools.

Try these resources taken from Dan Cederholm's book
"Bulletproof Web Design":
For all -
http://www.accessify.com/tools-and-wizards/accessibility-tools/favelets/
and further
for Firefox/Mozilla - Web Developer Extension
http://chrispederick.com/work/webdeveloper/
for IE/Win - Web Accessibility Toolbar
http://www.webaim.org/techniques/articles/aistoolbar

I use them to quickly check the structure of the page
and identify named items so I can locate them in the
style sheet without having to dig through the document
code.

HTH
Andrea Kulkarni
Instructional Multimedia Design

10 Feb 2006 - 2:23pm
Troy Brophy
2005

I just wanted to thank everyone who responded to my message.

I meant to send it to a CSS-specific list, but copy/pasted the wrong address
in.

Ultimately, the most useful responses came from this list. Go figure.

I've begun work on a redesign of a section of the application, and I'm using
some of the ideas that Kyle outlined, and removing ALL styling from the
document. It may add a step or two when a specific element needs to be
changed, but the elegance of the arrangement is not lost on me.

Thanks again,

Troy

_____

From: Kyle Cooney [mailto:kyle.cooney at gmail.com]
Sent: Thursday, February 02, 2006 7:56 PM
Cc: Troy Brophy; discuss at lists.interactiondesigners.com
Subject: Re: [IxDA Discuss] Inline styles and the people who hate them

It may be too late for for you to implement this, but one thing that I've
been doing lately is separating my stylesheets at a very high level, by
function.

For example, I have a single css file which I link to in every page, named
main.css. That file contains the following content/statements:

@import url(/css/typography.css);
@import url(/css/positioning.css);
@import url(/css/color.css);

><><><

Syndicate content Get the feed