Published on 02 November 2012 by @mathiasverraes
The downside to using front-end frameworks like Twitter Bootstrap, is that you’re likely to end up with a HTML that contains a lot of styling logic. The whole point of CSS was to get that styling out of the HTML! It’s not the framework’s fault, because the framework obviously can’t provide for your specific application. But it’s very unfortunate that the Bootstrap documentation does nothing to point you in the direction of proper semantic HTML.
Here’s a quick example showing semantic html. Let’s make a button that no self-respecting spaceship can go without:
Now let’s add Twitter Bootstrap to make the spaceship totally Web 3.0-compliant. If we do it by the book, we’d write something like this:
We’re now back to square one, because we coupled our HTML to the CSS implementation detail. Just like with code,
we want to encapsulate what varies. In that last example,
if we want to change the button to yellow, we’d have to change
for every auto-destruct button we have.
The way to solve this, is by using LESS’s mixin feature. If you’re using Bootstrap’s precompiled CSS files (bootstrap.css or bootstrap.min.css), you’ll have a bit of extra to work to do. Get the LESS files from the GitHub repo and put them somewhere in your project. You’ll need a LESS compiler (or less-middleware in Node).
Now make a master.less file, have it compiled to master.css, and include only the master.css in your HTML’s <head>. Inside, put this:
This is important because we want to spaceship.less to have access to the styles defined in Bootstrap. This is how we use a mixin in LESS:
The auto-destruct button will now inherit the styles from both the btn and the btn-danger classes. Using this approach consistently will give you cleaner html that’s easier to maintain.
There’s a lot of other advantages to compiling Bootstrap from LESS yourself. In the master.less file, you can replace the first imports with a custom list. You can leave out what you don’t need, set your own variables, …
Follow @mathiasverraes on Twitter.
|Modelling Heuristics||Workshop @ Domain-Driven Design Europe||workshop||Amsterdam, NL||Feb 1|
|Conference||Domain-Driven Design Europe 2017||organiser||Amsterdam, NL||Jan 31 - Feb 3|
|Domain-Driven Design||Neos Conference||workshop||Hamburg, DE||Mar 30|
|Keynote (TBD)||Neos Conference||keynote||Hamburg, DE||Mar 31|
This work by Mathias Verraes is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 License.