CSS and the chaos of Frameworks

Well, let's get straight to the point. Let's get straight to the point. Every time I see the use of css in my clients, it's little different from the old htmls full of "style=", only now we have endless strings of "class=" and sometimes combined with "style=". Of course, we'll probably have an initial Bootstrap load.

And it is a very good help to use CSS frameworks, which will simplify a lot the use of grids, button styles and positions, modal windows, menus... you know. But, if you are going to tackle a new project, think about, even if you use CSS frameworks for certain aspects, creating your own CSS template that addresses styles (colours, boxes, etc) that you are going to use in your project.

Additionally, it's funny how some people still don't make much use of custom tags instead of filling everything with divs and classes. The result will be very similar or similar, but it can help you to better understand the design of your web or webapp, as well as avoid the "overlaps" that make you say "why the hell is he doing this?

On the subject of custom tags, there are people who think that since they have less compatibility than classes, they decide not to use them. Although it is curious that they are integrating in their javascript requirements that only the latest browsers are going to support.

Let's see an example, using Bootstrap as a base.

	<!-- With Bootstrap -->
	<div class="row mt-3">
		<div class="col-4 offset-2 border shadow">
			Hi Bootstrap World
		</div>
	</div>

Now let's see what happens if we use custom tags.

	<!-- With Tags -->
	<style>
      mycard {
        width: 34%;
        border: 1px solid grey;
        padding: 1em;
        display: block;
        margin-left: 16%;
        background-color: white;
        border-radius: 3px;
        box-shadow: 5px 5px 7px rgba(0,0,0,.2);
        margin-top: 1em;
        text-align: center;
	}
   </style>
    
    
	<mycard>
		Hi Tags World
	</mycard>

Wow. Looks like you've got a bit more of a mess. Except... if we have that "mycard" specification in our CSS file and, in ALL our code, we just use our new "mycard" tag.

Play with this code on Codilink

Of course, you can also do this using classes. And a very good practice is that, for each element, box, card, layout you want to use, you use a parent class (or tag) and the internal elements you use "standard" tags.

For example...

	<style>
      .CardClass {
        display: block;
        border: 1px solid grey;
        width: 10em;
        padding: 1em;
      }

      .CardClass p {
        display: block;
        color: black;
        padding: 0;
        font-size: .8em;
        line-height: .8em;
      }

      .CardClass p:nth-child(1) {
        border-bottom: 1px solid black;
        color: red;
        font-size: 1em;
        line-height: 2em;
      }

      .CardClass p:nth-child(3) {
        color: green;
      }
   </style>
    
    
	<div class="CardClass">
		<p>Hi! I'm Red</p>
		<p>And I'm not</p>
		<p>I'm Green</p>
	</div>

Play with this code on Codilink

Apparently more code to write, but... on the one hand you can skip (a bit) the definitions of the framework you are using (if you use it). On the other hand, every time you change your stylesheet, you'll have your whole site updated. And finally, you will have a code with unified styles and much, much, much cleaner.

In short. Use whatever you prefer. But... the less you fill the code that contains the information with styles and THOUSANDS OF CLASSES, you'll be glad when you need to you have to make a modification.

By the way, remember that to force the browser to use your latest version of your stylesheet, simply add a ?v999xx when you link to it. This will force the latest version to load.

Additionally, I recommend that you start using CSS variables, especially for colours, and thus contemplate the increasingly used dark mode or light mode depending on your system configuration.

As a last tip, remember that if something is not doing what it "should", maybe the "css" that your browser adds by default, or that class or tag is already defined by the framework, you can use "all: unset;" to remove everything that has been defined on it.

And although I understand the "laziness" of making custom styles, believe me, you'll be happy. You will be able to have templates to help you in other projects. You will be able to use relative sizes (many frameworks use pixel sizes) and customize as much as you want. And if you also use in development metalanguages like Pass (remember, PLEASE, remove the non-.css extensions from the deployer/publisher of production), then everything will be easier.