Philosophical crisis on first project

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.

Yes, I do know about this. It’s a bit over my head at the moment, but when I learn how to add Bootstrap classes in CSS using Sass I may embrace it at that point.

I’m only picking on Bootstrap right now because all along I’ve learned to do things one way, and then along comes something that says, “No! Do it the other way!”. My brain is no longer elastic enough to change that easily.

Well, take a look at the style sheet for my first project. It’s a bit simplistic at this point, but it’s the best answer I have.

It’s a fine project, but it doesn’t really address the problem you described. The only consistent philosophy I see in your styling is to only use element selectors, which you’ll find is far from maintainable, even for small applications.

My point isn’t that you’re wrong about how much it sucks to have to make lots of changes, but that even if you write all of your own CSS and don’t use any libraries, you’ll run into the same problem. Classes actually make this easier to manage - if you keep the element’s position defined by one class, the background color in another, the font in yet another and so on, then you can change out classes to very easily make huge changes to your application without having to duplicate a lot of CSS. This is the approach that Bootstrap uses, and you may find that knowing how to write CSS in this way will come up in a job interview.

You’re thinking, and thinking is good, but don’t constrain yourself too much, especially in the beginning.

1 Like

It really isn’t my philosophy to not use classes or ids. I actually started that page using several, but when I started the styling I realized that I had so few elements on the page that I didn’t need to select them with classes or ids. The semantic tags worked just fine. I removed them because they were unnecessary in this instance.

My point, I guess, is that with a simple page such as this Bootstrap really wouldn’t have added anything particularly useful, and if I think that classes and ids would make it unnecessarily complex, you can imagine how I’d feel about Bootstrap classes.

So, I’m okay with classes and ids, as long as they stick to the principle of being semantic and not strictly for styling, which many of the Bootstrap classes are.

If I may add to the convo, try your hand at flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

It solves some of your concerns regarding semantics and rewriting.

1 Like

Thank you for the tip. I’ve used flex box a little, but I don’t understand it very well yet. It sounds like something I should dig into in the near future. I believe it is used by Bootstrap.

I keep running into people/discussions/blogs that say build it yourself and don’t reply on libraries… and they consider Bootstrap a very intro framework…

I don’t love it aesthetically so forced myself to use it for the Tribute Project…

But seriously man, ‘you do you’. Do what works for you…

1 Like

Reading throughout the comments and replies I’m sure you can come to understand how your vision of Bootstrap and the principle of Separation of Concerns is kinda wrong.

You keep defending your point of view, which is right and you should do so, but some things are technical, hence the right or wrong is pretty much decided by the thing itself. In the case of Bootstrap, which is a technical piece of CSS which is opinionated and yet semantically correct, the Separation of Concerns is respected.

The fact that you have to change a class name each time you want to change the layout of a single page is not an attribute to Bootstrap, it is a must-do of any web page, since you are talking about changing the single pages layouts you would have to scout through those 100 pages anyway, whether you use bootstrap or your personal CSS.

A smart solution which comes with backend rendered pages (PHP, NodeJS, Ruby, Python and others) would be to include headers and footers, separating the logic of the layout into smaller and more easely changable pieces.

To answer your question, you are not being too principled, you are just not getting the right meaning of the principle.

If you were to change that “col-md-6” in a few pages you would have to do it manually, true, which is bothersome, also true. But you would be doing the same if you were using your own CSS or if you wanted to change the content of a single page. The solution to this problem would be to create a meaningful class or id that targets that specific page’s elements, but you are still adding things, and this can be done whether or not you are using Bootstrap, hence why the Bootstrap library has really no concern over your overall layout in case you wanted to make small changes, and that is because you would just need to style a particular element with newer styles that would overwrite the existing Bootstrap styles. There are many solutions to your Separation of Concerns principle, one would be to use Javascript to change the styles accordingly, adding and removing classes from elements based on the url of the page, and there are many other ways.

I’m happy to help you if you have any questions regarding more in-depth subjects, and I hope you don’t take my answer the wrong way because I really don’t mean to discourage you in pursuing your ideas and research and talk about your knowledge; that is a great thing you’ve done today, know it.

4 Likes

I like how you think :wink:

1 Like

Great question, great back and forth. thanks for that… good read :smiley:

+1 @DarrenfJ… also enjoying the read

I agree with this wholeheartedly. I haven’t gotten that far yet, but I’m looking forward to getting there. Thank you for the reply.

2 Likes

True, a lot of your concerns about being able to manage and update a larger project have solutions in place… I taught myself just enough php for this very reason. For sure though, while I agree with what others are saying about your misunderstanding of the principles of using classes in html, I believe even more in learning through experience. Right now, you are mostly going off of what you were taught, and what you understand it to mean, in theory. However, the more projects you do, and the bigger the projects get, the more the pieces will fall into place on a practical level.

Speaking of bigger projects, a little something that stood out to me is you keep mentioning this is such a simple project that you dont see the point and think it unnecessary to do certain things. Personally, I feel that simpler projects are the perfect opportunity to learn…even if its not something you feel you want to use, its really great practice for when bigger projects come along. Dont look at it at just a simple page, an easy enough project to do one way instead of the way you would if it were a bigger project. Use it as practice to learn how to handle the bigger projects when we get there.

To bring things full circle, when I first started trying to figure out php, the first site I built with it was a 2…maybe 3 page website. Can we say overkill? Totally and completely unnecessary for a site that small, but if anything went wrong…and everything went wrong at one point or another, I only had 3 pages to deal with as I figured out what php was about. The first big project I did using php was for a website of several hundred pages…and I am forever grateful I didnt have to just then, with a site that big, try to learn and implement php on it.

Just a point of view to consider, about putting the effort in now and gaining some experience with new concepts while the projects are indeed simple, instead of waiting to do that when the projects are larger and may be overwhelming.

2 Likes