Spaghetti with HTML and CSS

I see the dis­cus­sion about how best to struc­ture your HTML+CSS to be both appeal­ing to the read­er and easy to main­tain is con­tinu­ing; see The Semant­ic CSS Debate for some of it and links to more. What par­tic­u­larly struck me was this sentence: 

I now find myself act­ively advoc­at­ing against lib­rar­ies like boot­strap due to the long term main­tain­ab­il­ity issues their approach to CSS causes.

On the sur­face, this appears to be one issue that tem­plat­ing sys­tems can help solve. Wheth­er you use XSLT to gen­er­ate a web site from Word doc­u­ments or XML, or some­thing like Jekyll (which I use for the Tex­tu­al­ity web site), or a data­base-driv­en sys­tem, to gen­er­ate the site, you should be able use both a frame­work such as boot­strap and your semant­ic con­tent. You do have to be pre­pared to put in an inter­me­di­ate step, that of gen­er­at­ing the out­put 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 logic­al way of doing things, or maybe it’s simply because I’m steeped in the idea of cre­at­ing the data in a format that can be trans­formed to an appro­pri­ate out­put format. This idea does make the choice of out­put format (in this case pre­cisely which HTML + CSS frame­work to use) some­what less daunt­ing, or rather, the cost of chan­ging it later some­what less (although not neg­li­gible since the trans­form­a­tion sys­tem needs to be changed).

Dis­claim­er: yes, I do write my blog posts using pointy brack­ets. Word­Press provides a tem­plat­ing sys­tem which enables chan­ging styles fairly read­ily; all I write by hand is the con­tent with­in the main con­tent block.

One thought on “Spaghetti with HTML and CSS

  1. Per­son­ally, I prefer to gen­er­ate the CSS via some­thing like sass, then use @include to mix­in styles from a CSS frame­work while pre­serving the semant­ic classes in HTML. You can par­tially do this with boot­strap (using LESS) but unfor­tu­nately many of its styles don’t work cor­rectly when used that way and it’s not par­tic­u­larly well suited to it. I tend to favor Found­a­tion as a frame­work because it’s spe­cific­ally designed so it can be used as a source of mix­ins and not have any of its styles included dir­ectly. I haven’t used it over a long enough peri­od to really know how that works in terms of main­ten­ance but it looks prom­ising at this stage.

    There are def­in­itely cases where gen­er­at­ing the HTML from some oth­er source is a good approach too but it makes things much more com­plex if you have sig­ni­fic­ant inter­ac­tions with JavaS­cript since that obvi­ously works entirely on the gen­er­ated form. For more stat­ic con­tent with bits of JavaS­cript enhance­ment it def­in­itely is a good option though.

Leave a Reply

Your email address will not be published. Required fields are marked *