Philosophical crisis on first project

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

Pretty sure v3 of Bootstrap doesn’t use flexbox but v4 will.

There is a clever way to create css that can allow you to change things once and only once for various different styling rules within any given site. CSS preprocessors allow you to do this using variables. Variables are eventually going to become part of the CSS spec itself and preprocessors will not be needed to use them. Sass or Less are 2 of the most popular preprocessors and I understand Bootstrap has a Less version.

You can then set all your colours and fonts etc using variables in one single place. As well as redefine grids etc. This makes things much easier to manage

The whole premise of this thread made me think of an old Joseph Campbell story:

An Indian guru was giving a discourse on how, all things are God, and so there need be no separation from God. A student bowed and left the ashram, only to return a few hours later, disheveled, battered and terrified. He told his pathetic story:

"I was in the street, and along came a procession, and I realized it was God. So I stood there. In the parade there was an elephant, with a mahout on his back, screaming for me to "Get out of the way! But I thought, “This elephant too is God.”

You told us, master, “All is God: me, the procession, the elephant, even the stone wall he threw me against, after seizing me with his trunk-and almost trampling me. And here I am! What did I do wrong?”

The saint bowed and smiled. “You failed to listen to God screaming from the back of the elephant, to tell you to get out of the way!”

Philosophy is great, but we have to live in the real world.

I know it’s not an exact fit, but it made me think of this so I dug it up.

Read this:

Addresses your concerns pretty comprehensively, though it’s not specific to Bootstrap.

1 Like

I don’t think the opening poster is as incorrect about the ideal as people are saying. It’s just that there are conflicting philosophies about how things should work and have been for as long as I can recall.

I’m not entirely new to html and css. I self-taught myself html in the 1990s and I have books on css from 2004 but my skills are rusty and outdated (wordpress made me lazy and I stopped coding my own sites, though I did hack my theme to look better). So I’m pleased to be updating them to the latest versions.

However learning back then the whole “completely reusable html” thing was really pushed. So when I first met Bootstrap I saw it as a less than ideal tool but it didn’t so much cause a philosophical crisis as make me raise my eyebrows and think “This would be awkward to change without messing with the html. Not very CSS Zen Garden at all.”

But that’s because Bootstrap is a framework which means it works the opposite way to how the html/css relationship was seen to work.

The original idea of css was that you didn’t put any positioning/design information in your html because ideally you should be able to completely alter the design just by editing the external sheet. It just wasn’t useful to describe your the position of something because if you later wanted to move it from the top of the page to the sidebar the description would no longer be accurate.

Bootstrap and other frameworks work by including a metric ton of styles and layout options in the framework css and then you plug the customer classes and ids into your html. It’s so far from the ideal because it’s based on a completely different philosophy. Ease of entry for people with limited design skills. It helps people with even a basic knowledge of html to create great looking pages without learning css but if you ever want to do a complete redesign you have a real job on your hands for a large flat-file site.

Then I realised that actually that doesn’t matter as much any more because most large sites run on CMS’s these days so you’ll still only be changing a few pages of code to change the design.

Gosh that got long,
Becka

1 Like