Oct 222013
 

I see the discussion about how best to structure your HTML+CSS to be both appealing to the reader and easy to maintain is continuing; see The Semantic CSS Debate for some of it and links to more. What particularly struck me was this sentence:

I now find myself actively advocating against libraries like bootstrap due to the long term maintainability issues their approach to CSS causes.

On the surface, this appears to be one issue that templating systems can help solve. Whether you use XSLT to generate a web site from Word documents or XML, or something like Jekyll (which I use for the Textuality web site), or a database-driven system, to generate the site, you should be able use both a framework such as bootstrap and your semantic content. You do have to be prepared to put in an intermediate step, that of generating the output from the input and plan in advance for the fact that you may wish to switch from format a to format b.

This seems to me to be a logical way of doing things, or maybe it’s simply because I’m steeped in the idea of creating the data in a format that can be transformed to an appropriate output format. This idea does make the choice of output format (in this case precisely which HTML + CSS framework to use) somewhat less daunting, or rather, the cost of changing it later somewhat less (although not negligible since the transformation system needs to be changed).

Disclaimer: yes, I do write my blog posts using pointy brackets. WordPress provides a templating system which enables changing styles fairly readily; all I write by hand is the content within the main content block.

  One Response to “Spaghetti with HTML and CSS”

  1. Personally, I prefer to generate the CSS via something like sass, then use @include to mixin styles from a CSS framework while preserving the semantic classes in HTML. You can partially do this with bootstrap (using LESS) but unfortunately many of its styles don’t work correctly when used that way and it’s not particularly well suited to it. I tend to favor Foundation as a framework because it’s specifically designed so it can be used as a source of mixins and not have any of its styles included directly. I haven’t used it over a long enough period to really know how that works in terms of maintenance but it looks promising at this stage.

    There are definitely cases where generating the HTML from some other source is a good approach too but it makes things much more complex if you have significant interactions with JavaScript since that obviously works entirely on the generated form. For more static content with bits of JavaScript enhancement it definitely is a good option though.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

/* ]]> */