“What are you doing here?”

Today, on Skype chat, gentlemen had an intimate conversation, thought about the meaning of life, and, of course, talked about the weather. In one of the messages of this emotional conversation, a link to the jquery mobile framework slipped . Having walked around the framework site for general development, looking for something interesting, I came across such a demo example :

Cancel
My App
Save

This example creates the Cancel and Save buttons. For fans of the framework, for example, the popular Bootstrap in the last couple of years, this code looks fine. For me, it looks like hell and that's why.


(picture to attract attention)

Many years ago, people typeset tables, and styles for elements are often left in the tags themselves, and not style files. And this is a bad manners. Tables are created for tables, and layout is recommended in blocks. Styles should be taken out to files, as they say: “flies separately, cutlets separately”, i.e. layout should be separate from the design. A lot has already been written about this and a lot of holivar on the vast expanses of the vast network. And it seems now less and less you can see the styles inside the tags (inside the layout). But thanks to the frameworks, especially Bootstrap, not only have all the sites become on one “face”, the layout is again returning to the last century.

Repetition - the mother of learning

I will try to rephrase and explain the above about styles. Why was it 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, do not interfere with the layout;
• so that the code is semantic and clean (above two points are included in this paragraph);
• to reduce HTML code / page (well, yes, this is a funny point nowadays);
• something else.

CSS3 with its features came to the rescue of all the above. But more on that later.

What do frameworks do? Of course, the main thing is that it simplifies life. But the rest:

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

Take 3

And so, the third time I rephrase, already on examples

We used to write like this:

Today is like this:

Please note that I did not save all 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 was strived for literally a couple of years, so to speak, to ethics and aesthetics of layout, has sunk into oblivion. Again returned to the last century. And it has become a mainstream. On freelance exchanges or job exchanges, 90% require Bootstrap and other frameworks. To make up the 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 sort of chip on Vanilla CSS. And it resembles some kind of DW (visual mode) or Artisteer ... Well, okay, a little distracted.

The main thing, I think, here it became 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 were given hitherto unprecedented CSS3 capabilities paired with HTML5 - these are CSS Grid Layout ( on Habr ), flexbox ( on Habr ), wonderful selectors (sister, child, generalized (sorry there is no parent yet)) and much more. Of course, not everything works, and not in all browsers, but Graceful Degradation was invented in this case.

WTF?

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

Now, one more paragraph, and I’ll get to the point.

If you observe the design on the web, you can see a certain template. Yes, not so much to see, but much is the norm. Be sure to header (header) and basement (footer). In printing, they are called headers and footers. Navigation. There are one or two sidebars. And, of course, the content. With the advent of frameworks, in particular Bootstrap, sidebars as such were abandoned, in the form that they were. Now they are not side, but top or footer bars :-)

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

To make it clear - I'll show you an example:

90% of site wireframes look something like this on HTML5

…

    
Название/лого
Контент

...

I would especially like to note that HTML5 gave us these wonderful tags. Now you don’t have to write class = ”header” .

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

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;
}

The same for jsfiddle.

If you need to add another sidebar, you can use a pseudo-class like: nth-child or its "brothers". Given that the element may or may not be. Buttons and inputs, for example, can be configured using the input [type = ”button”] attributes .

Thus, having folded the page once and pulling it onto the engine, we can only change skins. At what they should turn out universal for all engines and static sites. Well, or with minimal changes. And isn’t CSS originally striving for this and are CSS3 innovations striving?

Of course, classes cannot be completely abandoned. But I worked in this direction and made layouts with at least classes.

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

Cons:
- excess CSS, as in all frameworks;
- there will be no cross-browser compatibility, although there is Graceful Degradation
for it - something else.

Of course, you won’t please everyone and everyone, but the available solutions are not suitable for everyone.

In terms of developing and supporting such a miracle, nothing new came to mind. The same modularity and compilation as with all frameworks. Those. such as this andsuch combined. Only, I repeat, on one HTML framework.

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 n’t noticed like-minded fools on the horizon . Therefore, I will be grateful for any material on this topic.

PSS Let there be a holivar: “You burn author and you don’t understand anything in the sausage scraps in the frameworks and my favorite Bootstrap.”

UPDATE

I’ll try to say it again, otherwise many people look the other way in the comments.

I suggest thinking about why not create a universal modular HTML framework for which to write your many templates in pure CSS.

Take for example any CMS. Create a universal theme UniTheme (layout).
And then for her, layout designers just do their CSS. Of course, taking as a basis what generated breadboard grid.
If in the admin panel, let's turn on or off the sidebar / widgets - this does not affect the layout in any way. Of course, if some 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 interference in layout.

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

UPDATE 2

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