How many times is this class?

“What are you doing here?”

Today in the Skype chat, the gentlemen were having intimate conversation, thinking about the meaning of life and, of course, talking about the weather. In one of the messages of this soulful conversation, the link to the mobile jquery framework was missed. After a bit of a walk around the framework site for common development, looking for something interesting, I came across such a demo example :

<div data-role="header"> <a href="#" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete">Cancel</a> <h1>My App</h1> <button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">Save </button></div> 

')
This example creates the Cancel and Save buttons. For fans of frameworks, for example, Bootstrap, which has been popular in the last couple of years, this code looks fine. For me, it looks like hell and this is why.


(picture to attract attention)

Many years ago, people made up tables, and styles for elements were often left in the tags themselves, rather than style files. And it is moveton. Tables are created for tables, and layout is recommended in blocks. Styles should be put into files, as they say: “flies separately, cutlets separately”, i.e. Layout must be separate from the design. A lot has been written about this and a lot of holivaril in the vast network. And it seems that now you can see less and less styles inside the tags (inside the layout). But thanks to the frameworks, especially Bootstrap, not only that all sites have become one “face”, so the layout again returns to the last century.

Repetition - the mother of learning

I will try to rephrase and explain the above written about styles. Why it was necessary to make styles of their layout? It's necessary:

• so that styles can be conveniently applied repeatedly;
• so that when changing the design / element does not interfere with the layout;
• that the code is semantic and clean (the two points above are included in this paragraph);
• to reduce the HTML code / page (well, yes, this is a funny point nowadays);
• something else.

CSS3 came to the aid of all of the above with its capabilities. But more on that later.

And what do frameworks do? Of course the main thing - it simplifies life. But for the rest:

• Styles are in a separate file, but how many of these styles?
• to change the layout, you need to climb not in styles, but in layout;
• code is semantic, but redundant most often;
• all sites are of the same type (well, this is the trouble of frameworks in general)
• something else.

Double 3

And so, I paraphrase the third time, already by examples

Previously, we wrote this:

 <button style="text-align:right; font-weight:bold; display:inline; font-size:12pt; border-radius:1em; backgrund-image: url("..")"> 

Today so:

 <button class="ui-btn-right ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right"> 

Please note that I did not save all the classes, but only a part.
Also, if you parse the CSS of this button, you will see that there are many duplicate and reassigned attributes.

So, everything that literally was aimed at for a couple of years, so to speak, to ethics and aesthetics of typesetting, has sunk into oblivion. Again returned to the last century. And it became mainstream. Freelance exchanges or exchanges in 90% require Bootstrap and other frameworks. To create a layout, you need to know a bunch of class names and which class is responsible for what, instead of the basics of layout. Now you don’t need to know how this or that attribute works and how to make some kind of piece on Vanilla CSS. And it looks like some kind of DW (visual mode) or Artisteer ... Well, okay, a little distracted.

The main thing, I think, here is that if you need to change the layout, you need to edit not CSS, but HTML. I consider this a tragedy of our time. But we are given unprecedented possibilities CSS3 paired with HTML5 - this is CSS Grid Layout ( on Habré ), flexbox ( on Habré ), wonderful selectors (sisterly, child, generalized (sorry there is not yet a parent (parent))) and much more. Of course, not everything works and not in all browsers, but Graceful Degradation is invented for this case.

WTF?

A reasonable question for you, dear% username%, is: “what am I proposing, what am I leading to?”

Now, another paragraph, and move on to the closer case.

If you watch the design on the web, you can see some kind of pattern. Yes, not just to see, and much is the norm. Be sure to header (header) and the basement (footer). In polygraphy they are called footers. Navigation. There are one or two sidebars. And, of course, content. With the advent of frameworks, in particular, Bootstrap was refused sidebars as such, in the form that they were. Now they are not side, but top or footer bar'y :-)

I suggest, first of all, to reflect on the idea, probably not a new one. Above the new type of frameworks, when the layout remains unchanged, and only styles that should be universal change. Something like reset.css and normalize.css, for other purposes only.

To make it clear - I will show by example:

90% of site frameworks look something like this on HTML5

 … <body> <header>/</header> <nav></nav> <article></article> <aside></aside> <footer></footer> </body> ... 

I would especially like to note that HTML5 gave us these wonderful tags. Now it is not necessary to write class = ”header” .

And now we can refer to any element without classes and id (we will generally leave id as it should be for JS). Simple CSS for illustration:

 body > header, body > footer { width: 100%; text-align: center; background-color: #efe; } body > nav { width: 80%; margin: 0 auto; text-align: center; } body > article { float:left; width: 60%; background-color: #eef; } body > aside { float: right; width: 40%; background-color: #fee; } 

Same on jsfiddle

If you need to add another sidebar, then you can apply a pseudo-class of the type: nth-child or its “little brothers”. Given that the item may or may not be. Buttons and inputs, for example, can be styled through the attributes input [type = ”button”] .

Thus, once the page is folded and tied onto the engine, we can only change the skins. At what they should be universal for all engines and static sites. Well, or with minimal changes. And isn't that what CSS was originally striving for and CSS3 innovations?

Of course, it will not be possible to completely reject classes. But I worked in this direction and I designed layouts with a minimum of classes.

What benefits do I see?
These are the items listed at the beginning:
- when changing the design / element, it is not necessary to interfere with the layout;
- the code is semantic, clean and minimalistic;
And also, very weighty:
- templates can be riveted immediately for hundreds of generated CMS
- tired of the template? Replaced styles. Tired of CMS? Put another and old styles.
- something else.

Minuses:
- Excessive CSS, as in all frameworks;
- there will not be cross-browser compatibility, although for her there is Graceful Degradation
- something else.

You can’t please everyone and everything, of course, but the existing solutions are not suitable for everyone.

In terms of developing and supporting such a miracle, nothing new came to mind. Same modularity and compilation, like all frameworks. Those. like this and that combined. Only, I repeat, on one HTML frame.

PS I am sure that the idea is not new and someone has already expressed it. I myself have been thinking about this topic for a long time, but so far I have not noticed like-minded fools on the horizon . Therefore, I will be grateful to any material on this topic.

PSS Yes, it will be holivar: “You burn the author and do not understand anything in the sausage cuts in the frameworks and my favorite Bootstrap”.

UPDATE

Once again I will try to say, and then in the comments, many look the other way

I propose to reflect on the topic, why not create a universal modular HTML framework for which you already have to write your numerous templates in pure CSS.

Take for example any CMS. Create a universal theme UniTheme (layout).
And then for her, the designers simply make their own CSS. Of course, taking as a basis what kind of generated grid.
If in the admin panel, for example, we enable or disable the sidebar / widgets - this does not affect the layout either. Of course, if any element appears on the page for which there are no styles, you will have to work with your hands, as in general and in any framework.

Bootstrap lovers can also provide ready-made UI elements in some style.
But again - they will be ready for use without interfering with the layout.

And I repeat - of course, I do not propose from a complete rejection of classes, but I propose to minimize their use.

UPDATE 2

Thanks alekciy for the links to the already implemented example of what I reflected in the article: CSS Zen Garden and demo