How easy is it to switch between CSS frameworks?

[StevenReeves]

(this may be a question for the CSS forum?)

I am looking in to choosing an appropriate CSS framework (am new to it) - currently thinking of
bootstrap/foundation. I was wondering if could give an idea on how easy is it / what would be required to switch between frameworks? How easy is it to switch between them or to another CSS framework, assuming:

1. that just the CSS part is used (i.e. no jquery/javascript)?
2. the jquery/javascript is used?

I’m thinking if you have a more lightweight framework with fewer classes, this may lock you in to the
framework less than say a framework with lots of classes such as Bootstrap - but I may be wrong?

3. if they’re integrated within a JS framework such as Angular?

Many thanks…

[Dormilich]

@StevenReeves

but I may be wrong?

Yes. Every CSS framework locks you to itself. Not because of the class names but the HTML structure they require.

@StevenReeves

if they’re integrated within a JS framework such as Angular?

JS frameworks usually have some kind of bridge to make it easier to use the CSS framework of your choice.

[StevenReeves]

Thank you v. much for reply.
I was wondering if you’d expand a little your answer, possibly with an example.
I was comparing 1 or 2 components of Foundation and Bootstrap (see below). Most of the differences seem to be in the styling (you might disagree) most of which I’ve omitted. The 2 HTML structures although not the same seem very similar.
Possibly more complex examples may differ more. The XYGrid (if use grid-x) and BS Grid seem similar.
regards…

Foundation:

<div class="top-bar">
    <div class="top-bar-left">
	<ul class="dropdown menu" data-dropdown-menu>
	  <li>
		<a href="#">One</a>
		<ul class="menu vertical">
		  <li><a href="#">One</a></li>
		  <li><a href="#">Two</a></li>
		  <li><a href="#">Three</a></li>
		</ul>
	  </li>
	  <li><a href="#">Two</a></li>
	</ul>
    </div> 
</div>

<div class="button-group">
    <a class="button">One</a>
    <a class="button">Two</a>
    <a class="button">Three</a>
</div>

Bootstrap:

<div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
	  <div class="collapse navbar-collapse" id="navbarSupportedContent">
		<ul class="navbar-nav mr-auto">
		   <li class="nav-item dropdown">
			<a href="#" id="navbarDropdown">One</a>
			<div class="dropdown-menu" >
			  <a class="dropdown-item" href="#">One</a>
			  <a class="dropdown-item" href="#">Two</a>
			  <a class="dropdown-item" href="#">Three</a>
			</div>
		  </li>
		  <li><a href="#">Two</a></li>
	  </div>
    </nav>
 </div>	
  
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">One</button>
  <button type="button" class="btn btn-secondary">Two</button>
  <button type="button" class="btn btn-secondary">Three</button>
</div>

[PaulOB]

@StevenReeves

I am looking in to choosing an appropriate CSS framework (am new to it)

The first question is why you think you need a framework?

The need for a framework depends on what you are going to build and who is going to build and maintain it.

If the reason for using a framework is because lack of experience in CSS then you could find a framework harder than building it from scratch if you don’t simply use all the standard template structures etc. Once you veer away from the norm then you need a good understanding of the framework in question and a good understanding of CSS/html as well.

Which framework you use (bootsrap/foundation etc) will also again depend on what type of things you need to support as some have everything included and some are minimal. You cannot usually switch between the two so choose one and then learn it well.

I’ve used bootstrap on very large projects and it works well on a team structure where everybody sticks to the rules. However as soon as someone with little experience starts tinkering with it they tend to break it badly and need me to fix it for them.

For my own small projects I would never use a framework as I don’t want the code bloat and can code a site before someone has even loaded all their dependencies. However, If you are reasonable with CSS/Html but want the security of a framework then some people do find it useful as it handles a lot of the bugs you may find in certain browsers (although this is less of an issue today).

I would also advise against using any current frameworks that do not support flexbox. If the framework is still using floats then don’t touch it with a barge-pole unless you are actively supporting older browsers.

Think of a framework as a tool and not a crutch and then decide if its the right tool for you.

There is no right one answer other than whatever you choose you must learn it well and understand the basic concepts of css/html/js.

[StevenReeves]

Thanks !!!