
Misusing Bootstrap - uyasinov
http://10clouds.com/blog/why-you-misuse-bootstrap-and-why-you-should-stop-doing-this/
======
mgkimsal
Bootstrap is where Wordpress and jQuery are - "good enough" for a large swathe
of problems for a large number of people.

js gurus will decry jQuery - "learn to do it by hand"

php gurus will decry Wordpress - "it's a mess, learn to do it by hand"

and ... wow - front-end developers decrying bootstrap - "it's a mess, learn to
do it by hand"

They're all not entirely wrong, but the specialist nature of their roles
should not be ignored. Do you have a team of web devs ready to build something
that is vital to your business and will be mission critical? Building on
something that's not wordpress might be a good choice.

Are you trying to squeeze out every ounce of bandwidth performance and CPU
optimization? Yeah, jQuery _might_ not be the best choice.

But these libraries/products work "good enough" for so many people that it'll
be a long time before anything dethrones them as the 'go to' tool for problem
X. There's too much of an ecosystem built up around each one.

EDIT: I say this as someone who is generally pretty anti-wp, but I still
recommend and use it for certain projects, it's just not my default go-to for
everything.

~~~
paulojreis
I can see your point but, as someone who works with Bootstrap and jQuery,
don't mix them. :) It's not the same kind of problem.

Even seasoned pros can gain something from jQuery. I know, I know: most
jQuery-based code is bad, and the need for jQuery is becoming smaller
everyday, but it still is among the nicest pieces of JavaScript. jQuery can
save you time and boost your productivity without "imposing", as Bootstrap
does (and any other CSS framework, as CSS is inherently global).

~~~
greenleafjacob
Bootstrap plugins require jQuery

------
bryanlarsen
I've worked on several projects that used Bootstrap to great effect and others
where it was probably a mistake.

On the projects where it didn't work well, there were stakeholders who kept
insisting on "little" tweaks.

On the projects where it worked, the stakeholders said "that looks awesome" on
the first cut.

Not surprisingly, the projects where the stakeholders were happy with generic
Bootstrap were the ones that ended up looking and functioning better, in my
opinion.

~~~
vcarl
This is my experience as well. If people want little tweaks and you're using a
CSS framework, you're going to have a bad time.

OTOH Bootstrap's grid system is almost a must have when I'm writing a
responsive application. There have been a few projects where I've ripped out
the non-grid parts of BS because that was all I wanted.

~~~
paulojreis
Have you tried building your own grid system or importing "just" a grid-
system/mix-ins which generate grid and columns?

~~~
vcarl
I have, and every time I do, I basically end up trying to rebuild Bootstrap's
grid. It has 4 screen sizes that cascade so you can set a small size and not
explicitly declare that you want larger screens to be the same, responsive and
adaptive resizing, offset columns, push/pull (this is hard, and necessary if
you need to change the order of elements based on size), and BS4's alpha adds
opt-in flexbox.

Regarding push/pull, Bootstrap is the only grid system I've used that has had
this. The use case is when you want

    
    
        [x] [y] [z] 
    

on desktop to be

    
    
        [z]
        [y]
        [x]
    

on mobile.

------
stephenr
Honestly I think Bootstrap works really well in exactly one role: "utility"
interfaces. Your admin dashboard. You 'settings' UI. Your business back-office
application.

Anything where you need functionality, not flashiness.

This is because it allows application developers to do just that - work on the
application. They have pre-built components to use, that look reasonable and
fit together, without needing a dedicated front-end developer to constantly
futz with templates or a static version of the app when management asks for an
extra form field.

~~~
amelius
If you don't need flashiness, why use bootstrap at all? All this complicated
CSS with its inevitable namespace pollution, what problem does it solve
exactly, and is that really a problem that needs to be solved?

~~~
stephenr
My current project for a client has dozens of pretty basic CRUD screens and a
few slightly more complex screens. Its reasonable to look at, and scales to a
mobile device, including a side navigation bar that slides in/out on small
screens.

I wrote about 10-20 lines of CSS.

Even though it's expressly an "admin" UI for the app (which has no public web
UI) they would _not_ accept an app made with no stylesheet and just a page of
form elements. It would be practically unusable without any CSS, and the time
it would take me to write the CSS for just the navigation bar OR just the
pagination system OR just the reasonable form layout on multiple screen sizes,
dwarfs the amount of time it takes me to download bootstrap and copy the dist
folder.

For a public facing website - I think bootstrap is terrible, and I'd rather
see something like Bourbon used, where semantic markup is then styled.

This isn't about that. It's about getting a usable interface that takes almost
zero time to implement.

~~~
spoiler
Same here, also, I would like to add out that we in generally tend to use
Bootstrap only for internal admin interfaces, not for the ones that out end-
client would see, though.

Even then, those are prototypes that get replaced by more adequate things
eventually. Not to mention, in many situations I would actually write better
(as in more robust and more maintainable) solutions than Bootstrap with less
CSS and mark-up funk, but that might stem from my misuse or insufficient
knowledge of how to use bootstrap.

~~~
stephenr
Oh agreed, Bootstrap and concise markup are pretty much mutually exclusive,
but for admin/business functionality apps I don't think that's a huge issue.

Another factor I'm considering is that a packaged/sold product(s) that use
Bootstrap for the UI means that someone purchasing/using the product(s) can
make use of a "bootstrap theme" to apply a new basic appearance (fonts, colour
scheme, possibly icon set, spacings, etc) pretty much just by loading in a new
theme.css file

------
technotarek
Contrary to the author's opinion, BS isn't hard to maintain and the code isn't
messy. I've developed more than 30 projects using BS as the framework. It has
enabled me to prototype, as well as build for production, faster, cleaner and
better. Might there still be something better out there? Sure, but there are
definitely cons to continuously changing your tool set and diverting yourself
from actual building. Imagine if a carpenter bought a new power saw every time
a company introduced a slightly improved model. The economics of that should
be clear.

~~~
ourmandave
What are your thoughts on Bootstrap v4?

I just did a side project and used 4 because they _finally_ moved to rems.

------
ZeroGravitas
Is there a word, possibly related to "humblebrag", for this habit of putting
down and insulting popular tools?

Don't use Bootstrap, don't use jQuery, etc.

I mean the basic concept of the article is the assumption that you, the
average reader, were going to use it in the first place, which means it's
probably wildly successful.

And the comments fall into the same kind of area, "Sure, if you're some kind
of big baby amateur idiot who doesn't know what they're doing, then go ahead
and use one of the most popular tools in this space."

[https://xkcd.com/378/](https://xkcd.com/378/)

~~~
WorldMaker
"Hipsterism", perhaps? Of course classic English words like "snobbery" or
"contrarianism" probably also apply.

~~~
trowawee
It's tech hipsterism. Plus, it's a quick-and-easy way to create a hierarchy in
an industry where somebody who's been working for a decade has the same job
title, dresses the same, and looks basically the same as somebody who's in
their second year. "Oh, you still use jQuery? Yeah, I pretty much just write
pure JS." It's ridiculous tech dick measuring (which is to say it's par for
the course when you get three nerds together in a room).

It's the exact same impulse that says you're not a real dev if you use
language X or framework Y.

------
paulojreis
> If you care about code maintainability and carefully plan your CSS, you
> should definitely reconsider using Bootstrap in your project.

All the points resonate with me and my experience (actually, they're all quite
well put), but this one is the biggest. Bootstrap isn't quite brilliant in
terms of CSS architecture (which is a tricky subject per se, due to many
factors such as the global nature of CSS). And the biggest issue is that CSS
architecture is very much snowball-like: a bad decision will imply future bad
decisions or practices. The example given in the article is quite
demonstrative: an excessively-specific selector which, to be overridden, would
need a even more specific one.

In my opinion - and I've had the bad luck to join two big projects which used
Bootstrap from the beginning - if your project is to be maintained or has at
least a medium-ish size, forget Bootstrap. It doesn't give you that much. A
normalization solution, typography, buttons and a grid system, just roll your
own, with your own presets and much less bloat. It's not a big effort at all,
you can look at what Bootstrap and others have done (to borrow what you like),
and your team will have a firm understanding of their code.

~~~
err4nt
Bootstrap gets 80% of the work done before you begin.....its getting the last
80% complete thats the tricky part ;)

I back up what you say 100%. Bootstrap is not acceptable for production code,
its supposed to be a rapid prototyping tool.

I have found whenever it is added to a project, the technical debt it bring
that you have to keep fighting is never worth whatever the initial savings
was. I build without it wherever possible and avoid a lot of problems and
maintenance.

~~~
wil421
Why isn't bootstrap acceptable for production?

For smaller projects why shouldn't I be able to use it? If I'm building a 5-10
page website for a small business it's a prefect fit. I can customize the
colors and use the image sliders and other features already given to me. Add
what I need and I have something that's easily to remember at a later point.

If I created a larger app why would I want to rewrite everything for prod. It
makes it easier if multiple people are working on the UI because we are all
working with bootstrap. Newer people are able to get up to speed on the
project faster since it's a common framework.

~~~
err4nt
Using Bootstrap for a small 5-page site is like taking a cruise ship for a
canoe ride.

It's not that hard to build really lightweight HTML and then just only write
the CSS you need. I specialize in taking sites and making them responsive, and
the first thing I do is go in there and get rid of all the classes extra tags
everywhere clogging up the works.

With tools like Bootstrap you end up using bloated, heavy HTML to get a few
mediocre responsive breakpoints, but it's no comparison to a properly
responsive page.

Here's some button and input styles in a single-file HTML5 app:
[http://staticresource.com/encode](http://staticresource.com/encode)

Here's a set of responsive content blocks where the breakpoints are measured
based on the width of the block, not the browser:
[http://staticresource.com/block-styles.html](http://staticresource.com/block-
styles.html)

Or check out the CSS of [http://elementqueries.com](http://elementqueries.com)
to see how a simple, easy to read layout can be done with just a touch of CSS
at the top of the page.

None of these use Bootstrap, and if I had even so much as linked to them, I'd
be working against the defaults they bring in.

Here's what I use as my 'reset' that I bring in to every project, it's a much
smaller set of opinions and leaves me more free to just build what I want:
[https://gist.github.com/tomhodgins/c4988b9d9878763ae861](https://gist.github.com/tomhodgins/c4988b9d9878763ae861)

~~~
wil421
Thank you the links are very appreciated. I do feel like I am fighting against
parts of bootstrap at times. Responsive websites are the reason I used
bootstrap in the first place. It's very easy to build a responsive website
with out of the box bootstrap.

------
steverb
The reason I use bootstrap: It looks good enough, and I don't have to spend
time arguing with the UI guy over the "integrity of the design".

The people paying my bills would rather have functionality that looks good
enough now than the same functionality that looks beautiful three months from
now.

~~~
paulojreis
Bootstrap has a righteous _dominant_ position in that kind of solution. When
"good enough" is really "enough" and, mostly, when "now" is really mandatory,
Bootstrap shines. To quickly deploy something that works, that's what I'd do
anyway.

My pet peeve with Bootstrap, however, is its usage in larger applications, in
applications with very customized styles and/or a defined styleguide. If
you're spending a minimum effort in developing a web app and/or specific
styles, then Bootstrap will - very, very soon - be a liability (performance
and mantainability-wise).

~~~
steverb
I haven't found that to be the case...but I do mostly LOB apps, which honestly
aren't all that demanding from a UI perspective.

Requirements gathering is hell though, which is where my team actually earns
their money.

------
al2o3cr
"This, multiplied by another few imported components, will result in too heavy
code."

Let's have a little chat about "how people misuse measurements to talk
themselves into premature optimization"...

------
websitescenes
Some of you may frown on this but I treat bootstrap like a compiled resource.
I always grab the packaged version and over write as necessary. I dislike
fumbling with all the variables and since I use Rails my overrides will be
compiled into scss anyway. I'd hate bootstrap too if I dove into the deep end
for every project.

------
codegeek
I agree that bootstrap is probably a beast for a lot of projects but the
primary reason most of us "misuse" it is the fact that it just damn works for
the majority of use cases where Time and Money is of essence.

I run a bootstrapped product and would LOVE to create my own css rules from
scratch but bootstrap gives the team flexibility to build on top of it quickly
and just about good enough that our clients give us money. That is what
matters to us. Could we care a bit more about the selectors defined by
bootstrap ? Sure. Does it matter to our paying clients. Not a single bit.

------
nilved
> When starting a new project, there is always a need to find an appropriate
> way to scaffold the front-end

This isn't a good premise to start with. I think a lot of people would be
surprised that plain HTML, CSS and JavaScript is a great solution to small-
and medium-sized problems. Overuse of frameworks and libraries is why the
modern web is such a horrible place, especially on mobile or slow networks.

~~~
moron4hire
Hear, hear. Learn to use your tools. They aren't actually that hard.

------
morganvachon
As a non-developer of any sort (web front end or otherwise) with just enough
HTML/CSS/JS under my belt to be dangerous, I've found Bootstrap to be a great
framework for quick and dirty landing pages. I've also found it to be nearly
perfect for simple but responsive, beautiful, mobile friendly websites for
showcasing art and literature without the complexity and requirements other
frameworks demand.

That said, I agree with the author that it's not the best tool for every, or
even most, jobs. You _could_ use it to run a blog, but why? You _could_ build
an online e-commerce site out of it eventually, but _dear God why_?

And that's the beauty of the modern Web. There are so many awesome frameworks
out there that do a few things very well, and others that do just about
everything decently enough; it's an embarrassment of riches for anyone
involved in the industry.

------
romanovcode
He says that bootstrap is too bloated and big and yet recommends Zurb
Foundation. Wat. It's even bigger than bootstrap.

~~~
rco8786
She _

------
ohitsdom
I believe Bootstrap has been an incredible boost for web development. For
people new to the profession/craft, it is an unbelievable tool.

For those more experienced and possessing sound design knowledge and more
complex/detailed development goals, there are better choices.

------
iliaznk
I think YOOTheme's UIKit is a great modular framework that not many people
know about.

~~~
boundlessdreamz
What are the advantages of UIKit over bootstrap?

~~~
iliaznk
It's small, without over-complicated class names and has all kinds of add-ons
like dropdown etc. available as modules.

~~~
iliaznk
And also – easily tweakable.

------
onion2k
That blog is built with Bootstrap 3.3.2.

------
ForHackernews
So what's the alternative? All of the suggested alternatives mentioned in this
article seemed like they were even more low-level and _less_ functional than
Bootstrap.

If I'm primarily a coder who doesn't really understand CSS and doesn't have
time to become a front-end designer, what _should_ I be using? Ideally I want
something that will look pretty enough for end users, and have customizable
themes that they can play with--without involving me.

Is there a better out-of-the-box solution than Bootstrap?

~~~
krapp
Unfortunately, if what you want is an out-of-the-box solution, then
alternatives to Bootstrap are either likely to be as complicated as it, or
require you to know how to write a bit of css.

Although there are lightweight grid solutions such as skeleton[0] which I
personally really like, which make layout easy, you would still probably need
to override some of the presentation styles.

[0][http://getskeleton.com/](http://getskeleton.com/)

------
groundCode
Interesting that the 10clouds site itself uses bootstrap....

------
neo2001
Contrary to the author, I think Bootstrap is not used enough! The value it
adds to a company to have their own hand-craft version of a CSS grid is sub
zero.

------
morninj

        Bootstrap was never meant to be used as a website development framework
    

This seems odd. Most Bootstrap styles aren't namespaced, so it's a nightmare
to add Bootstrap to existing projects of moderate size. In my experience, it
only makes sense to incorporate Bootstrap at the early stages of a project as
a "web development framework."

------
746F7475
I don't know, I mean, there are OK arguments against using bigger libraries,
but if I'm just making a basic front-end for my toy application or for a
hackathon I'm gonna just use bootstrap to get something that looks decent
fast. I'm not going to spend time designing the front end (unless that's the
whole point of the project)

------
shubhamjain
From my personal experience, Bootstrap is pain if you need anything beyond its
default style. You spend too much time in removing the style of its components
and introducing new ones. In many of my projects, I have used bootstrap not
because of its 'good-enough-defaults' but because it has reusable components -
grids, tabs, pills, labels.

For the latter use-case, I am consider using inuit.css[1] which provides the
components but without any defaults which seems perfect for my use case.

[1]:
[https://github.com/csswizardry/inuit.css](https://github.com/csswizardry/inuit.css)

------
sesm
The other alternative that is not mentioned in the article is Basscss:
[http://www.basscss.com/](http://www.basscss.com/)

------
jaequery
On the contrary, there are many companies out there who started (and still is
for the most part) using Bootstrap, ie) DigitalOcean and Coinbase, and killing
it.

------
dvhh
TBH, I am still using Boostrap 2, because it is simple to start with, and is
still compatible with old version of interent explorer

------
jfallon
One of the anti-Bootstrap websites she links to looks like total crap in
Firefox. Oh the irony. :)

------
rco8786
If anything, this article enumerated reasons why I _do_ want to use Bootstrap.

------
JustSomeNobody
If your firm is too cheap to hire someone with actual design skills, use
Bootstrap. Otherwise, don't.

If nothing else, it raises the bar of mediocrity.

------
rado
Do they have vertical column alignment and equal-height columns yet?

------
vinceguidry
As far as I'm concerned, any use of Bootstrap is misuse. The classes are
absolutely hideously named. Anytime you have to break the mold it's way more
painful than it has to be.

I default these days to building up CSS from scratch. The decision to use a
framework has always bit me bad in the past. I do not want to have to become
an expert in a framework, but it seems you need to just to be able to use it
effectively.

~~~
oddevan
As someone who wrote HTML and CSS from scratch and then put a little
time/effort into learning Bootstrap, I can do so much more in the same amount
of time it took me to do my old layouts, and it looks so much better and is
actually responsive.

All that to say, there is value in "becoming an expert" in a framework.

~~~
vinceguidry
> All that to say, there is value in "becoming an expert" in a framework.

You can spend time learning Bootstrap's eccentricities, or you can learn
something useful like OOCSS. One will make you really productive at making
websites that are instantly recognizable as Bootstrap-based, the other will
make you productive implementing any kind of design.

Time spent fighting Bootstrap is wasted time from this perspective. Time spent
fighting your own designs is time spent learning valuable lessons about front-
end coding. You may gain a marginal speed improvement with Bootstrap,
especially (and perhaps only, I find Bootstrap slows me down) if you're new at
front-end, but you're paying a steep price for it down the line, if you ever
plan on building a site that doesn't work with the framework.

