Misusing Bootstrap | Hacker News Reader

Misusing Bootstrap

10clouds.com

99 pointsuyasinov85 comments

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.

Not to mention, a skilled web developer will take Bootstrap for the responsiveness and other extras and make it look good[1], or at least not like any other site.

[1] https://expo.getbootstrap.com/

Unless you mean a skilled back-end oriented web developer which doesn't want to spend much time in the front-end, I can't agree with you.

I don't think a skilled front-end developer would take Bootstrap just for responsiveness and extras. I mean, 3 or 4 mix-ins for building columns, offsets and rows? Button defaults and tabs? Would you grab a behemoth for this?

You can grab just the grid part of Bootstrap. It's 13kb. There's a lot of grids out there and people can make their own, but someone may be used to Bootstrap's.

Yes, of course, that would be a wise thing to do. No problem at all with that. But surely you can spare a few extra bytes by implementing your own, while still using essentially the same "battle-tested" Bootstrap approach.

Also, you wouldn't be constrained. Bootstrap means a predefined set of breakpoints for responsiveness: you can change their values, but not their number - you'll always get 4 breakpoints. Bootstrap also means a float-based grid system; you may want a flexbox based solution if you're targeting new browsers. And, of course, another pet peeve of mine: Bootstrap-powered HTML source-code looks all the same (a bunch of .row and .col.xs-N). Of course, you can use the mix-ins, but I think every Bootstrap user can relate: the mark-up for the user details page looks an awful lot like the order page. :) I actually prefer to write (and, even more, maintain) mark-up with semantic classes.

As I said above, it's not a big problem and using only the grid is a wise thing to do. I just don't think it adds that much; might as well implement it myself, targeted to my needs (and I'll do it once or twice, then reuse).

It's no longer "battle tested" if you're doing it yourself. You just created all the bugs Bootstrap fixed over the years. That's called reinventing the wheel. Is a few extra bytes worth it?

Why waste the time rewriting it?

I don't think writing a custom grid system is reinventing the wheel, since it's a task too small to even employ such consideration. It's like saying creating a folder structure for your project is reinventing the wheel.

Anyway, there's a rather diffuse line between reinventing the wheel and optimizing/fitting your own particular needs. I can easily agree that I've ended up - many times - in the first region while trying to reach the latter. Still, I'd say "no harm" if a) you got a cleaner, more legible source code; b) you got a better grasp of your solution; c) you're learning; and d) saving a few milliseconds from each of your users.

NIH-ism is apparently still strong with web developers. For consideration, sure, you can write your own PNG reader for your back-end by following the spec, and you might make it a bit faster than the commonly available libraries by coding in some assumptions about your use case, but should you? The answer is rarely yes (but rarely isn't never).

I'd say a PNG reader and a CSS grid system aren't quite comparable in scope and complexity. See my reply to the sister post. Also, bear in mind that "grid system" doesn't always mean "float-based,12-column and 4 breakpoint based grid system".

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).

Bootstrap plugins require jQuery

Your comment is unhelpful, you're agreeing with the author. If you're not a front-end person or you just don't give a shit, Bootstrap is probably fine. But if you're tasked with building an extensible website, Bootstrap is like choosing to drive a semi-truck to pick up groceries. It works for the thoroughfares but you're gonna get stuck on the hills and in turns.

"Your comment is unhelpful, you're agreeing with the author" lolwut

I read the article instead of the clickbait headline, something that appears to be happening less and less on Hacker News. Is Eternal September finally here?

You seem to be complaining that the comment wasn't antagonistic enough. Is that what you mean to be doing?

Not at all. Was trying to elucidate on the comment and add some insight. It appeared OP just operated off the headline with some generic wisdom about Bootstrap being just fine for most things (which it absolutely is not). Upvotes are easy when they reassure the ego which was just threatened. The fact that a lot of egos on Hacker News appear to be tied to a shitty framework like Bootstrap is a bit upsetting, thus the Eternal September comment.

I said "good enough" for many people. Whether it's "fine" is immaterial - it's good enough and gets enough of a job done for people to move on to areas of the project.

EDIT: "generic wisdom about Bootstrap being just fine for most things (which it absolutely is not)"

Again, no, I said it's good enough for most people. That's not the same thing as "just fine for most things". I'd probably still posit that it is fine for most things, but that's not what my original position was.

The article doesn't say "learn to do it by hand", the article says "pick a framework, but pick one that was originally intended for building production websites with".

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.

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.

I did exactly the same for almost every project I started. Just extract the grid, vendor-prefixes and a few other generic rules for alignment and you're set.

The only wish I could make is a "simplified" responsive menus/navbars, so it would be easier to build on top of that after.

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

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.

Exactly my experience as well. Let's use a grid and the bootstrap elements! designs come in without grid in mind, and no bootstrap elements

Though I do agree with the article in some respects. Bootstrap can be a bloat on a heavily designed site. You end up only using the grid for instance, and there are lighter weight frameworks for that.

Bootstrap is a godsend to strapped IT departments with no designers backing them though. Can really break the old schoolers out of table based layouts and nice pretty buttons quickly.

I leaned more heavily on Bootstrap when initially wrapping my head around RWD, but now that it has "clicked" in my brain, I'll be switching off of Bootstrap to something smaller. Bourbon and Neat more than likely, but I do need to look into Pure CSS too.

Pretty much. For me, I think bootstrap comes out ahead even the projects that wanted to tweak everything. It gets a little messy, but not as messy as building from scratch.

Projects that allow you to work within bootstrap's limitations and simply tweak the colors and other basics are a dream come true and wind up looking great. Not design award grade artistic, but functionally very good in a way that's not hard to look at.

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.

So many internal IT departments don't have the luxury of a designer, so Bootstrap is great for them. All of our internal tools were old-school, table-based layouts and slowly they're making their way to Bootstrap because the pure coders there can implement it easily for all the boring dashboards and intranet level things.

Exactly. As someone who has spent a lot of time writing intranet sites as a one man army (with more strength in application development than design), Bootstrap has been a godsend for me.

Right, I also don't think it can be underestimated the useful power of Bootstrap's documentation: it is very well put together in terms of being a largely well organized palette of options with copy and paste code directly beneath living examples. It's much easier to point non-front-end developers and junior developers at Bootstrap's documentation and tell them "find what you need and use that" than with many of the alternatives.

Admittedly semantic classnames are nice to haves, but they become a vocabulary you have to teach others, whereas Bootstrap has built a useful enough shared vocabulary and strong enough documentation on it that it is rather reliable across the spectrum of developer skill level and familiarity.

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?

bootstrap provides a solid design and layout grid that's easy to use for a pure developer. Fonts, colors, margins all just work. Alerts are properly aligned, forms are laid out in a clear and concise way.

That's all problems that need solving for pure utility interfaces and bootstrap is very solid at solving those, especially if you don't care that your utility interface looks like "just another bootstrap site".

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.

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.

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

Admin interfaces still need to be usable and look good. Bootstrap takes care of all that for you.

It just doesn't matter if they all look the same, which is what happens if you use Bootstrap out of the box.

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.

What are your thoughts on Bootstrap v4?

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

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/

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

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.

I find the idea you bring up quite interesting. A key difference between that and the text editor argument in the (awesome) XKCD you linked is that, at least in the XKCD comic, they are arguing in favor of an alternative. The linked article just says, "don't use this" and mentions a few alternatives without saying much about why they'd be a better option. I find it more constructive to read about why something is a good option, not why something else is a bad option.

Kurt Cobain illustrated the concept well in his song "Very Ape":

If you ever need anything please don't/ Hesitate to ask someone else first/ I'm too busy acting like I'm not naive/ I've seen it all, I was here first [1]

[1] https://www.youtube.com/watch?v=OPiz6yp6_74

There's also a trend of making the article name combative. "The Things You Don't Know About X Could Fill a Book," "You Aren't Using Y Right and Probably Never Will," "The 13 Parts of Z You've Never Even Heard Of," etc. Even if they contain decent information, I'm not likely to read it.

> 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.

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.

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.

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

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

Or check out the CSS of 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

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.

>> A normalization solution, typography, buttons and a grid system, just roll your own, with your own presets and much less bloat.

I've gone with the "ala carte" solution and just grab a minimal grid system, a minimal css framework for buttons and other smaller components, and a normalization tool. I've found by being able to pick and choose my tools, it still takes a lot less bloat than BS.

Having said that, I still find it useful. For example, I've been working on a large enterprise billing application. We used BS out of the box and although we ran into a few issues, it saved us months in design work and allowed us to start writing the services and UI pages much faster than if we had we taken a more "ala carte" approach like the kind I prefer.

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.

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).

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.

"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"...

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.

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.

> 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.

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

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.

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

She

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.

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

Agreed. I was surprised to not see it mentioned in the article, and only at the bottom here. I love it, it's my goto front-end framework.

What are the advantages of UIKit over bootstrap?

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

And also – easily tweakable.

http://www.eugenesivokon.com/why-uikit-is-better-than-twitte...

That blog is built with Bootstrap 3.3.2.

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?

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/

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

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.

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."

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)

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

The other alternative that is not mentioned in the article is Basscss: http://www.basscss.com/

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.

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

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

If anything, this article enumerated reasons why I do want to use Bootstrap.

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.

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

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.

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.

> 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.

Reply on news.ycombinator.com