I’ve been learning front-end development for a few months now, not just on freeCodeCamp, but other places as well. One of the first principles of web design I learned, which I have found stressed again and again is that content and presentation must be separated. In other words your HTML contains your content, and only your content, and the CSS contains your presentation and only your presentation.
So here’s the issue I’m having. The first project requires using Bootstrap, which violates this separation of concerns, and not just a little. Bootstrap is basically throwing away the style sheet and putting the presentation entirely in the HTML.
This seems a bit like going back to the days of layout using tables. I don’t really understand why Bootstrap was created this way. I get that Bootstrap does make improvements with responsiveness, but responsive designs can be made entirely using CSS (I know because I’ve made a few).
I have done some research and discovered that it is possible to move the Bootstrap classes to CSS using Less, but that is a bit over my head for the time being.
Has anyone else had this issue with Bootstrap, or am I being a bit TOO principled?
Thank you for that clarification. I think I misinterpreted the instruction where it said to make a website that is ‘functionally similar’. I may just skip the Bootstrap, at least for now.
There isn’t much difference between those two classes, but as I understand it, neither of those classes should be used in HTML because neither are semantic. They don’t add any meaning to the content, and are only used for styling purposes.
I think ‘container’ adds meaning. It is a container after all. so does ‘nav’ and ‘btn-primary’ and ‘badge’. Each implies the function of the element. at least in a visual sense. You seam to imply that we shouldn’t use styling at all. CSS is for styling. HTML is for function. But it would be very problematic to style with HTML elements alone with no classes at all.
I’m not saying classes shouldn’t be used, but that they should carry some kind of meaning relevant to what the tag contains, such as banner, navigation, gallery, links, copyrightInfo, etc. I don’t think ‘container’ adds any meaning at all. Isn’t that what <div> means already? That’s what I’ve learned, anyway.
OK. ‘container’ is a generic element. Thus the name. “Bootstrap requires a containing element to wrap site contents and house our grid system.” What name would you come up with for a generic encompassing DIV on your webpage that you wanted styled in a particular way? It’s just a requirement of the library. Look, you can start from scratch if you want. That’s actually really admirable, in a way. But, Bootstrap is very popular. Learning to use it is not a bad idea either.
I would give it a class name that describes WHY I want it styled in that particular way. That’s really what HTML semantics boils down to. A class should describe what something is rather that what it should look like. That’s what’s been ingrained into me over that past few months.
It is a container. It is required by the library. I guess they should have called it a ‘bootstrap-container’? classes are for styling. Period. They have nooooooo meaning in HTML. Anyway, you win Andy. Good luck.
The ‘container’ and it’s related ‘row’ class are for creating the 12-column grid of Bootstrap to allow you to create a page design/template/organization/whatever you want to call it, quickly and more importantly would work in different browser widths and also mobile screens-- without spending a lot of work/time writing your own media queries.
The ‘container’ and ‘row’ works with the related col-xx-nnn classes. It allows you to build a page design very quickly and look good. The drawback is, several thousands other sites may share the same look as your site…
You can also embed rows within other rows, to further subdivide a column into 12 more (albeit smaller), columns.
PS: The ‘container’ class just centers the whole content on screen. Otherwise, the 12-columns of each row go edge to edge on your browser. Nothing wrong with that if that’s what you want, just apply some margins/paddings on your body tag if you want.
not sure of the context of your question, but I would say that, in most cases, positioning is about presentation. may be some exceptions. But I think the whole conversation is off track. HTML elements like are designed to give a clue as to the meaning or purpose in an element in a webpage. CSS is there for styling. That is what classes are for. Classes designate groups for styling. How do I want my footers to look? How do I want my navigation menus to look? You, as a web disigner, can choose to highlight those elements as you see fit. I may highlight headers with color. I may highlight them with a font size. I may choose some combination of both. It’s up to me. Those choices can be universal (classes) or specific (id). that’s the power of css.
You’re misunderstanding the whole point of Bootstrap if you think it’s putting the presentation in the HTML. Classes aren’t necessarily “styles” per se, and most of the Bootstrap class names are semantic by the way—are you saying you don’t see navbar, navbar-header, and navbar-nav as semantic?
Let me see if I can clarify my position a little better. You are correct in stating that I shouldn’t be using this:
This is putting styling and behavior within the HTML which should not be done. This might not be a big deal in a small tribute page which is the only page on the website. It is inelegant, but it won’t be too much trouble to maintain.
This is exactly the problem I have with Bootstrap. If I style a paragraph by giving it a class of col-md-6, and later on I want to change the styling of my website, and I want three coulumns to a page instead of two, well now I need to go into all 100 of my pages and change the class to col-md-4.
That’s one of the big reasons why we keep styling and behavior out of our HTML, and why Bootstrap goes against what I’ve learned before.
And what if you had to change the text? Or anything else in the html?
Anything you do is going to involve changing something. I’m sure there’s some clever way to create html templates that would allow you to change it once. A solution I sometimes use is to generate content html dynamically with JS. I was recently writing a page for a friend and realized that I had to change the navbar and footer. I was bummed that I had to change it on every page. Then I realized that if I used JS to fill in the navbar and footer info, I could always just change it in one place. I’m sure there are other (even better) solutions out there, but that worked for me. In theory that would be a solution for your bootstrap crisis. In theory, you also should never code the same thing more than once (d.r.y.) I’ve been using JS to allow me to only code once, but I’m sure there are smarter solutions out there, by smarter people. But I’m just learning here.
You have to learn how to crawl first. Worry about how to soar with the eagles when you get there. Don’t expect your first pages to be perfect examples of coding philosophy pendantry. Just code. Just learn. Empower yourself to make mistakes and be messy. It’s OK as long as you learn and learn how to do better as time goes on. There will be time to get into deeper topics later. The “separation of concerns” is a good principle, but don’t let it paralyze you into not being able to do anything.
As the old saying goes, “The perfect is the enemy of the good”. I would go further than that - when starting to learn coding, don’t let the perfect be the enemy of the “good enough for now”. When you learn to ride a bicycle, you do it with training wheels. You don’t panic because “real cyclists” can do flips through flaming hoops. Just get started and build your knowledge. There will be plenty of time to sharpen your skills later.
Thank you for your concern, but I don’t think declining to use Bootstrap is tantamount to paralysis. I’ve completed my first project without it and have moved on to the next.
My personal philosophy on Bootstrap is that it really only works well for single page websites where most of the maintenance is going to be on the back-end, but if I’m making such a small website I can just code the styling myself without too much trouble, so what’s the point? I know how to use Bootstrap, I just don’t care for it.
Also, I think my original question has been answered.
Nope, it’s just me.
You can see my first project here. Please tell me what you think.
Your concerns regarding having to make too many changes are good, misplaced though they are. Embrace them. However, there are a few problems with picking on Bootstrap in particular:
This isn’t Bootstrap’s fault
This doesn’t have anything to do with separation of concerns
There exist many web technologies that you’ll learn about in the future which mitigate the epic, terrible strain of having to type things more than once, and any project along the scale you’re thinking will require them
With Sass, you can incorporate Bootstrap (or any other CSS framework) into your own stylesheets quite easily
Practically speaking, any text editor you use is going to have a “Find and Replace” feature that, when combined with regex, will make these sorts of changes much more manageable when/if they happen, whereas replicating what Bootstrap can do will require tons of time
The question I have is, How would you write your styles in one sheet such that you can make positional changes for dozens of elements?
I think it’s still too early on for you to be having some crisis.
The thing is you’ll look back at your old code several years later, and there will always be regret — “I wish I did this instead so-and-so.” or “This approach would have been better.” or “yuck, can’t believe I wrote this.” or “wished I used this framework and not that framework”…
But all you can do is come up with your best work for that particular point in time - bang on some code, and push it out. The more experience and skills you pick up along the way, the more it will teach you how to solve some past problems, so on your next project, you’ll be approaching it differently and hopefully better.
But you can’t do it perfect the first time. It’s a continuous improvement process.