The Tridecadal Korean (astralblue) wrote,
The Tridecadal Korean
astralblue

  • Mood:

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.

Subscribe

  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 4 comments