?

Log in

No account? Create an account
Eyes

Blog Template Design and CSS

Dear blog template designers,

If you were to allow HTML and CSS in users' blog entries, please refrain from specifying CSS styles for unnamed/unclassified tags, like:

<html>
  <head>
    

    <style type='text/css'>
      

      p { text-align: justify; }
← !!!  -_-;;
      

    </style>
    

  </head>
  </body>
    

    <p>
      This paragraph is part of the template.
    </p>
    

    <!-- user's entry begins here -->
    

      <div style='text-align: center; font-style: italic'>
        <p>Stanza one</p>
        <p>Stanza two</p>
      </div>
    

    <!-- user's entry ends here -->
    

  </body>
</html>

I hope you catch what goes wrong here….  That's right, the two stanzas do not inherit the centered text style from the parent <div> tag, but takes the justified text style from the stylesheet definition in the <head> section, which is a violation of POLA ] because most users wouldn't expect any default style to be applied to unclassified/unnamed HTML elements they use, like the <p> tags above.

This can be fixed by specifying a named default class attribute to all HTML elements to which a custom style is to be applied, and specifying the class in the CSS in the <head> section.  Example:

<html>
  <head>
    

    <style type='text/css'>
      

      p.blogstyle { text-align: justify; }
      

    </style>
    

  </head>
  </body>
    

    <p class='blogstyle'>
      This paragraph is part of the template.
    </p>
    

    <!-- user's entry begins here -->
    

      <div style='text-align: center; font-style: italic'>
        <!-- These are now unaffected by the template style -->
        <p>Stanza one</p>
        <p>Stanza two</p>
      </div>
    

    <!-- user's entry ends here -->
    

  </body>
</html>

The class name (“blogstyle” above) can be anything the template author wants it to be, but it would be nice if the names followed a convention (example: a common prefix such as “LJ”) so that users could easily avoid a name clash.

Yes, I understand this could be a hassle for style designers, but IMHO, catching users with abrupt surprise (and frustration, if they were to debug what went wrong with their code, only to realize it wasn't their fault but the blog style's limitation) is worse than the hassle.  Especially if the style template is written for general audience: A couple of saved minutes causes hours and even days of frustration by N random users.

So please, save us users from unnecessary grief, would you?

Sincerely,
Eugene

Edit: It has come to my attention that this is also how some template authors specify default styles that user's text entry should have.  However, in that case, it is better and non-intrusive to enclose user's entry area in a <div style="(insert the default style here)"></div> pair instead, so that the user contents can inherit the specified inline style by default, yet override it as necessary.

Comments

What's the point in setting the p align to "justify" in the CSS if in the html you're setting the DIV to "center" a line before it?

The point here is that the <style> section is provided by the template author, not by the entry author (an individual user), who often does not even think about the possibility of an HTML head style section overriding his own unclassified tags.

Style authors often do it because 1) they want to specify justification for user's text, and/or because 2) they use paragraph tags as part of the template and want them to justify the text inside.

For 1), wrapping the user's entry area inside a <div style="text-align: justify"></div> tag pair probably the best, non-intrusive way.

Aha I get it, the user wants CENTER but instead gets JUSTIFY because the stylesheet defines the tag pre-emptively.

How nasty.
You just wanted an excuse to use POLA to the world today XD.
(kidding, you know that ;) )