Let's Connect

Subscribe by Email

Your email:

Latest Posts

Posts by category

Idyllic Software Blog

Current Articles | RSS Feed RSS Feed

Why we don’t use Twitter Bootstrap

Posted by Vinod Sobale on Tue, Mar 12, 2013
  
  
  
  

Bootstrap is another buzzword just like HTML5, CSS3 & Node.js & DHTML (if any of you even remember DHTML) & it undoubtedly has managed to grab the developer community’s attention like no other front end framework by far for various reasons. Now, I will admit that it gets you going in no time, minimizing the developer's pain (although in a quick & dirty way), but I will not be discussing how great it is. Rather, I wish to constructively criticize it’s usage by the community & why it’s not always wise to use it.

1. Messy markup

DOM is messy as it is. The worse you could do is bloat it up with truckload of CSS classes by specifying them in the markup. Bootstrap comes with a gigantic list of CSS classes that can be plugged into markup to perform specific actions. 


messy DOM

Even though they are big help, it can considerably slow down DOM operations when it comes to matching every single class (selector) applied. Looking for every CSS rule up & down the DOM has always proven to be a very expensive operation. Rather than bloating your markup with such classes, it’s always a good idea to write a specific block of styles targeted for doing one thing & one thing only.

2. Non-supported HTML attributes

HTML5 attributes

Bootstrap uses several nonsupported HTML attributes such as placeholder, required, aria attributes group, data attributes group & so on. Support for these newly introduced attributes (except for aria attributes) is surprisingly low & bootstrap takes no responsibility in providing graceful degradation options (at least not that I know of).

Aria attributes are widely supported but, when used irresponsibly, they can cause a lot of grief to the accessibility scope of your application/website. Read up on them here.

Placeholder attributes are becoming popular among the developer community for the wrong reasons. Optimistically, there are various polyfill scripts lying around to achieve where placeholder fails (Sorry, I will not explain why placeholder is used). Quite honestly, as a framework vendor, bootstrap must provide a fallback support option. Well, all the more reason to avoid bootstrap for JavaScript components.

3. Javascript components

There are 2 components that I particularly dislike. Tooltip & Modal. Let’s look at Tooltip first.

Shortcomings of Tooltip

    • Since CSS3 transitions are still not supported by all browsers, this component shamelessly breaks in IE7/8 & Opera mini.

    • It uses data-attributes for local title storage which IE9+ (Yes IE 10 too!) do not support & yet again, no fallback!

Modal comes with some predefined transitions & luckily they degrade gracefully in older browsers but this component fails to live up to a couple of very common expectations. Lets discuss them.

Shortcomings of Modal 

    • When launched modal is not always in the center of the browser window vertically as well as horizontally. It is positioned in CSS & left as well as top values are static. Centering it could have easily been handled using minimal JavaScript code. I’d say, using it is a loselose situation as it doesn’t satisfy minimum expectations.

4. A few messy parts worth mentioning

I am thoroughly convinced that Bootstrap is not for me & probably managed to get you onboard with me, even though that’s not really the objective of this article. There’s a couple of clumsy parts of bootstrap that I am not happy about & i.e. foundation CSS bloated with !important rules & LESS adaption over SASS. I'll go over each in detail.


1. !important should never be used NO MATTER WHAT!

If you have studied CSS specificity, every CSS rule comprises of selectors & has specific value as a whole & in order for me to override it, all I have to do is come up with a stronger rule with bigger value than the existing. It’s no rocket science. If you religiously know specificity inside out, you will never have to use !important rule. Bootstrap foundation CSS is full of such rules & developer ends up writing even more & then it’s all downhill from there as you may have guessed. In my opinion, Bootstrap is not setting a good example among aspiring Front end developers.


2. LESS over SASS

In a preprocessor era, it comes as no surprise that bootstrap uses it too but their choice of Preprocessor is LESS & I might have an idea why. Bootstrap creators are apparently friends with LESS creator & it seemed wise therefore to prefer LESS over SASS regardless of following reasons:

    • LESS development has almost stopped since Alexis has no time to maintain it.

    • Less lacks when it comes to caching .less files.

    • No. of open issues on LESS is far bigger comparatively.

    • SASS uses COMPASS for CSS3 syntax that results in less code unlike LESS

I wish I had more time to elaborate more along the lines of the hurdles bootstrap creates while in troubleshooting phase. Quick fixes during troubleshooting can really turn your application upside down & result in taking unreasonably too long.

Tags: ,

Comments

Wow. There are a striking number of sentences in this post that are flat out incorrect. 
 
Maybe you should do a little more research on this subject.
Posted @ Wednesday, March 13, 2013 9:46 AM by A real Web Developer
>considerably slow down DOM operations 
Versus what? Show the numbers; what is a "considerable" slow down? 
 
> !important should never be used NO MATTER WHAT! 
I see five usages, and all of those are within the print view. Am I missing something? http://twitter.github.com/bootstrap/assets/css/bootstrap.css 
 
Your above points are nitpicks. Bootstrap isn't perfect but it buys you a ton of organization(sanity) in the insane css/sass world.  
 
Not using it? Congratulations on your half million dollar decision.
Posted @ Wednesday, March 13, 2013 12:44 PM by Jim Jones
Yeah, I have to agree with commentor Jim Jones on this. You have not presented any actual data to back your claims. If I may also add to that list of incorrect assertions, custom attributes have been supported all the way back to IE6, even in quirks mode. 
 
They are not supported in the exact same way as we would like them to, i.e. - elem.data.myCustom, but you can grab them from any element 
 
<div id="geoff" data-geoff="geoff de geoff"> 
var geoff = document.getElementById("geoff"); 
alert(geoff.getAttribute("data-geoff")); 
 
http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6 
 
"It uses data-attributes for local title storage"...yeah, because the title storage is why I use a framework....no...no not really at all. 
 
There are lots of things in bootstrap I don't 'like' out of the box, so I just overwrite them, since less allows me to do that quite easily. 
 
To further gripe about your article, cause it's fun: "not happy with....LESS adaption over SASS" tells me you are pretty much a fanboy. LESS can arguably be defended to be better than SASS, mixins for one, cross-development compatibility for two (believe it or not, there are lots of reason to use programming languages other than Ruby). I'm not going to make the argument that SASS is better though, because I have nothing against SASS, if that is what you are into it is a fine tool. But to claim SASS is 'better' is just plain wrong and ignorant. 
 
Thanks for the flame though, always feels good! 
 
Posted @ Wednesday, March 13, 2013 2:01 PM by Anonymous Commenter
Well i was sceptical when i saw the title of this article, but the author has very good points that i personally experienced. 
Now i have a good reason to start learning new front end framework
Posted @ Wednesday, March 13, 2013 11:49 PM by Marcin Adamczyk
I have to agree with the post. Bootstrap has many inconvenients (such as not providing fallbacks for some components) and enforces anti-patterns on us, like using "!important" and polluting the HTML with a lot of classes. All these things are mentioned on the article and they certainly are bad, but you can't deny Bootstrap speeds up the front-end development time. I highly doubt there exists an alternative to Bootstrap that overcomes all of these things, sadly...Bootstrap isn't the best thing on Earth but it certainly is quite useful
Posted @ Wednesday, March 13, 2013 11:55 PM by George Lucas
@A real Web Developer 
 
Care to share with us? 
 
Thanks
Posted @ Thursday, March 14, 2013 12:38 AM by Vinod
Hello Jim, 
 
1. There was a reason external stylesheets became popular in no time. One of the reasons as you may know was to seperate the presentation from the content & let the DOM only handle behvioural(Accept DOM methods via JS & perfom operations) stuff. Second reason was to let CSS handle the presentation rather than having DOM identify it, interpret it & visually display it. This is like 
 
element.style = 'whatever you want to do'; 
 
Are we not pretty much doing the similar if not the same by supplying so many classes in the markup? Making the DOM look for the classes, interpret them & the provide result when using efficient CSS selectors could our job fastest. 
 
As CSS is not a programming language, it relies on DOM elements to be ready(rendered) first before any styles apply. So, by adding these classes in the markup itself.  
 
Let me give you an example: 
Consider this <tag class="a b">....</tag> 
 
Poor DOM : use class="a" if it is defined, or use class="b" if it is defined, or use BOTH if both defined... And, when using both, if they assign same property, the last CSS definition overrides the others. 
 
Why not, simply assing an ID to the element. That way, you will end up achiving the following: 
 
1. Less DOM operations for the sake of stying the page (document) 
2. clean Markup (content) 
3. Effiecient usage of selectors (http://css-tricks.com/efficiently-rendering-css/) 
4. Less no. of classes in your Stylesheet. 
 
Does this make sense? 
 
2.  
Bootstrap.css (Contains 5 !important rules) 
Bootstrap-responsive.css (Contains 14 !important rules) 
I didn't even check print.css 
 
I hope this helps. 
 
Regards, 
Vinod
Posted @ Thursday, March 14, 2013 1:21 AM by Vinod
I to was very skeptical regarding the usage of Bootstrapping. Now that I have got my understanding clear I can make my mind to abhor it..  
Posted @ Thursday, March 14, 2013 1:32 AM by Jim Lee
Using Bootstrap does not enforce any of those anti-patterns. If all you're doing is downloading a minified CSS file and including it into your non-semantic HTML, then you are Doing It Wrong, and that is not Bootstrap's fault. As web developers, you should know better
Posted @ Thursday, March 14, 2013 1:39 AM by Rebecca Skinner
Thou this post mentions some drawbacks existing in the current bootstrap framework... I believe they are'nt suggestive enough to reject the use of bootstrap. Bootstrap is a massive css js framework and greatly reduces the work specially for non-frontend developers.
Posted @ Thursday, March 14, 2013 1:41 AM by Aditya Chaturvedi
There's a wonderful comment in the post you provided that summarizes lot of the author. If you hate it from his perspective then *hate is a harsh word.  
 
The modern browser is changing; capability is increasing; if an old browser doesn't support something it's because that is OLD. From a developer perspective for a quick project setup I hardly care if it supports an ancient browser or not. I like to move on focusing with what's coming not what used to be.  
 
As for where to use bootstrap or not please understand bootstrap is not production ready it gives a BOOTSTRAP where you can start building something bigger. So if you want everything you need to work on it, bootstrap is not out of the box solution for your next big thing. You have to work a lot on it but it provides what you need to start off. 
 
Sometimes I develop just my self and don't want to waste time on designing a prototype here's where bootstrap helps me a lot. And even in the team perspective time is very important factor to build a product and hence if we need to develop a prototype bootstrapping is the way to go with. 
 
My advice don't focus what it doesn't give, focus on what it gives and build on it. No matter what you use bootstrap or not you'll still have to do a lot of work to load something faster that means sometimes even replace using a jquery function completely with custom javascript.
Posted @ Thursday, March 14, 2013 1:47 AM by Fazle Taher
@Anonymous Commenter 
 
Quote "They are not supported in the exact same way as we would like them to" 
 
If you have read the article carefully, I have supported the fact that although the support is surprisingly better, we get carried away & use them irresponsibly. 
 
LESS creator (clodhead) publicly declared that he not time to maintain the project anymore. ON the other hand SASS still has huge community support. Is this still not convincing enough to prefer SASS? 
 
For instance, SASS was facing a duplication issue when imported .SCSS files & @wilsonpage wrote one neat script that avoids the duplication & since a lot of people backed the technique, it is soon going to be a part next SASS release (don't exactly know when) 
 
Check it out: 
https://github.com/wilsonpage/sass-import-once 
 
All the more reason to prefer SASS. 
 
Hope this helps. 
 
Vinod
Posted @ Thursday, March 14, 2013 2:00 AM by Vinod
Hello Fazle Taher, 
 
Thanks for such an insightful comment. I look bootstrap from you point of view & like you mentioned bootstrap is not production ready, make an effort to write something on my own that serves my requirements better. 
 
Vinod
Posted @ Thursday, March 14, 2013 2:22 AM by Vinod
Well, having a buckload of different classes on each DOM element or having a buckload of different classes, and using them one for each DOM or action required? I tend to prefer using a lot of classes in one DOM element than have to define a lot more of classes to be used at different elements. This way, it will become easier to select elements by using a contextual finder, and not having to go through all the DOM tree several times. And nowadays, computers can handle CSS and HTML pretty much... javascript is the most responsible for a bad performance on the client side. Use proper selectors, rely a lot less on polling and kill your event handlers when they are not needed anymore.
Posted @ Thursday, March 14, 2013 11:57 AM by Filipe Abreu
You wrote a lot of nonsense things in this article.
Posted @ Thursday, March 14, 2013 12:20 PM by Patrick Espake
@Vinod. 
 
"LESS development has almost stopped since Alexis has no time to maintain it." 
 
This is just abhorrently wrong, and quite frankly, insulting to everyone that contributes to open source projects. 
 
Looking at the publicly visible github project I see commits from 6 days ago, 8 days ago, 14 days ago, etc. 
https://github.com/cloudhead/less.js 
 
Sass has 3 pull requests while less has 6 - at the moment. That in no way indicates that SASS is better maintained. 
 
This is the last I return to this blog becuase now you are being either outright deceptive and/or lazy. I wish you had more time to look up facts. If you are looking at this blog to be a "pro", I suggest you take everything here with a very big grain of salt.....like a salt shakers worth. 
Posted @ Thursday, March 14, 2013 1:52 PM by Anonymous Commenter
You also mention never to use !important, 
 
Just from a brief scan, you use !important 63 times in the stylesheet for this site >_< 
Posted @ Thursday, March 14, 2013 11:10 PM by Joel
why you dont contribute on twitter bootstrap?
Posted @ Friday, March 15, 2013 9:36 AM by ahmad
OMG you're right! I've been such a fool. If you hadn't spammed the bootstrap mailing list, I would never have been able to make my own trade-off decisions for myself.
Posted @ Friday, March 15, 2013 9:57 AM by Len Jaffe
very nice post and great idea! thanks for share :)
Posted @ Saturday, May 04, 2013 12:41 PM by sogellizer
I can't help but think that any designer/coder with a bit of experience will already have a handful of self-written CSS layouts to incorporate the grid system, clearing floats, browser compatibility etc. 
 
We all have our favourite ways of accomplishing things as far as code and graphics go, and it is amazing how a few variations on CSS and HTML templates can be turned into virtually any site you like. So if you want to use bootstrap or any other front end then do it, but it is way better to build your own version instead by just collecting your favourite CSS and re-using it. 
 
Using other peoples code for the sake of swiftness means you never really get a handle on your problems, take the time to get it right yourself, then reap the rewards.
Posted @ Wednesday, May 08, 2013 9:55 AM by Tom
I agree. For me, the worst part is the extra Dom markup. This makes a terrible choice for webapps. 
As for less, I find it better than sass but its my opinion.
Posted @ Tuesday, May 14, 2013 2:50 PM by Shash7
Post Comment
Name
 *
Email
 *
Website (optional)
Comment
 *

Allowed tags: <a> link, <b> bold, <i> italics