Philosophical crisis on first project

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?

1 Like

None of the FCC projects requires you to use any specific library. You can do them all in vanilla HTML/CSS/JS.

Also how is Bootstrap violating separation of concerns? What is the difference between <div class="mySuperClass> and <div class="container">?

1 Like

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.

1 Like

I think you understand separation of concerns wrong.

This is what you “shouldn’t be using”:

<div style="background-color: gray" onclick="this.style.backgroundColor = 'red'"></div>
6 Likes

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.

wat

WAT

WAAAAAAAT

Where are you getting these ideas? They’re wrong. You should forget them and go build web apps. Use Bootstrap just because you think you shouldn’t. Be a rebel.

5 Likes

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.

See this: https://codepen.io/owel/pen/LypxEr

Now, there’s nothing stopping you from mixing Bootstrap and your own custom style sheet. That’s what I do.

So you can have:

<div id="news" class="container">
   <div class="row feature-stories">
      <div class="stories col-sm-10"> 
         blah blah blah
      </div>
   </div>
</div>

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.

So does positioning count as presentation or content?

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?

You’re also not quite understanding the “separation of concerns” quite correctly either—HTML contains the structure (not the “content” per se), CSS contains the presentation. What this means is that CSS code shouldn’t be mixed in with the HTML—i.e., no inline styles that would make future maintenance complicated and difficult. The minimum you should do in order to maintain separation is to at least put all of the CSS into a STYLE tag at the top of the HTML file, not mix it in with the HTML. On complex multi-page projects, you should dispense with the STYLE tag and put all of the CSS into a separate file. That’s what the separation of concerns means. Not anything else. It’s as simple as “all of the CSS code should be in one place, all of the HTML structure should be in another place, and then all of the JavaScript should be in yet another place”.

That’s actually not really technically accurate to say that classes are for styling period. Remember that classes are also selectors for JavaScript…

1 Like

You are correct sir. I stand corrected. Never say never… or period. :+1:

1 Like

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.

Now expand a website to 10 or 100 pages. If I want to make a change in styling or behavior I must go to every single page in my site and edit the inline styles or embedded JavaScript if I want all of my pages to maintain consistent styling and behavior. That would be a lot of unnecessary work if the javascript and stylesheets were separate and linked. With a linked stylesheet I can just go edit one document and change all 100 of my pages within my website.

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.

3 Likes

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:

  1. This isn’t Bootstrap’s fault
  2. This doesn’t have anything to do with separation of concerns
  3. 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
  4. With Sass, you can incorporate Bootstrap (or any other CSS framework) into your own stylesheets quite easily
  5. 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?

2 Likes

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.