How to Create Proper Layout, or What is So Bad About CSS Frameworks?

The advantages of a marvelous layout, semantic markup, and separation of content from design have been already described hundreds of times. Still, there are developers who do not follow the concept of working with HTML and CSS, so they write such terrible things in the code such as:

<span style="color:red">

when they want to make the text red and they sincerely believe that this is somehow is better than

<font color="red">

because HTML validator checks are all green.

In this article, I tried to orderly and briefly share my vision on this issue.  To identify the correct approach working with HTML and CSS we will need to look at the history of the development of these languages and analyze it.

Brief historical background

HTML was developed by academics to describe data (markup language). Initially, no one thought that it would be used for anything more than plain text. If you look at most of the modern books, you might understand how these people imagined the future of the Internet. In the beginning, there were forty tags. Only three of them were intended to change the appearance of the text, the rest was used to describe what this text means. As a result, it was impossible to display the text the way you wanted.

Netscape developers had a different vision of how the Internet should develop. They understood that sites should be attractive to make it appealing not only for academics but also for simple users. So Netscape introduced a lot of new tags to change the appearance of the text that did not carry any semantic logic. But HTML ideologists did not like this vector of development. In my opinion, the W3C behaved in a very old-fashioned and not far-sighted way. Meanwhile, Netscape was too carried away by coloring. So both companies could not reach consensus.

Here comes Microsoft. They have invested a lot of resources in W3C, deleted the HTML 3.0 specification, which was outdated even before the release. So they quickly released HTML 3.2 specification, which gave us CSS. Internet Explorer (IE) 3 and Netscape Navigator (NN) 4 were supporting the possibilities of styling on some scale. IE quickly dominated the market and replaced NN, but after this, they "fell asleep". Then NN came back, but as Firefox and managed to take away significant market share from IE. How? The browser that had better support of the standards was the leader. And now we have a situation close to what we have now.

But why we need to style everything in CSS, not in HTML?

The period of complex website design using only HTML is very important in history. Layouts of those years used a huge number of <font>, <b>, <i> tags, nested in each other to get the desired layout and this eventually led to code was very hard to maintain. Let’s see an example of these days:

<!-- Dress left -->
<table border="0" cellpadding="0" cellspacing="0">
<!-- Your variable left margin -->
<tr valign="top"><td width="15%" 
bgcolor="#ffffcc"> </td>
<td width="75%" bgcolor="#ffffcc" 
valign="top">
<!-- Your actual content -->

Now with modern capabilities, this site would look like this:

<div id="content">

Thanks to our savior - CSS. So what is the main principle of the HTML + CSS approach? In the HTML file, we describe only the logical part of the document and nothing of the design (yes, that's exactly what W3C dreamed about). And all styling is on side of CSS. What advantages does it give you?

1. HTML code is now not cluttered, but logical and easy to understand.
2. We do not repeat the description of the appearance every time an HTML element is encountered. For example, if we want to make the headline underlined and green, it’s enough to describe it once in the CSS, and there is no need to specify the appropriate parameters in every heading that you have. The “don't repeat yourself” principle has proven to be very effective not only in markup but also in programming.
3. The size of HTML files decreases significantly. But it increases file size of CSS? No worry, CSS files are cached by browsers and downloaded only once, which is why load speed is increased and server load is reduced.
4. The fact that all the design is in a CSS file allows you to easily change it if necessary. It is enough to correct the value in one place and the new style will be applied to all HTML pages that use it.
5. You can completely change the design of the site by connecting another CSS file on the server.
6. For devices with a small screen, we can plug in another stylesheet.

So why <span color = "red> is bad? The reason for not using this approach is all about the ideology of HTML. The content and design should not be mixed! Valid but terrible <span style = "color: red"> is a return to the state from which “A List Apart” was running away in fear 20 years ago. Every time when you apply design in HTML file or create the class name containing an epithet that at least somehow describes the appearance of the element - you are doing something wrong. Think about why you decided to do so. If you want to make text red, then it probably means this text is showing an error, and <span class = "error"> is more suitable for it. Even more, HTML5 has another series of relevant logical tags that might help to get rid of some classes.

So what should we do?

You must completely separate the content from the design. Think about what logical blocks you need on the page and put them in HTML. Do not describe how they should look like. Imagine that you will have two completely different designs based on the same HTML, but different CSS. Start with HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Publishing Platform</title>
</head>
<body>
    <header>
        <img src="logo.png" alt="Logo" />
        <ul>
            <li>Main</li>
            <li>Hot</li>
            <li>Favorites</li>
            <li>Messages</li>
            <li>Settings</li>
            <li>Log out</li>
        </ul>
    </header>
    <nav>
        <ul>
            <li><span>Posts</span></li>
            <li><a href="#">Q&A</a></li>
            <li><a href="#">Blogs</a></li>
            <li><a href="#">People</a></li>
            <li><a href="#">Companies</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <h1><a href="#">{Article.title}</a></h1>
            <div class="content">{Article.content}</div>
            <div class="tags">{Article.tags}</div>
            <div class="footer">{Article.footer}</div>
        </article>
    </section>
    <aside>
        <div class="top">
            <ul>
                <li>
                    <a href="#" class="blog">{Top.blogname}</a>
                    » <a href="#" class="article">{Top.article}</a>
                </li>
                <li>
                    <a href="#" class="blog">{Top.blogname}</a>
                    » <a href="#" class="article">{Top.article}</a>
                </li>
                <li>
                    <a href="#" class="blog">{Top.blogname}</a>
                    » <a href="#" class="article">{Top.article}</a>
                </li>
            </ul>
        </div>
        <!-- Other blocks -->
    </aside>
    <footer>
        © 2001–2020 «Online Publishing Platform»
    </footer>
</body>
</html>

Such HTML is appealing and easy to understand, easily maintained and so on. The next step is working on CSS, but try not to change HTML. Unfortunately, some layouts cannot be done without changing HTML, but try to avoid it.

CSS frameworks

Let’s take a look what HTML will look like using Blueprint framework:

<div class="container showgrid">
    <h1>Blueprint Tests: grid.css</h1>
    <div class="span-8">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="span-8">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="span-8 last">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="span-6 append-1">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="span-6 append-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>

The main problem is that most of the frameworks violate the basic principle of separation of content from the design. CSS frameworks in the current state is a step back in development.

What are the alternatives?

Keep HTML a markup language, and leave the design completely on the side of CSS, as it should be. But when you start working with large, complex sites, you might start to wonder if CSS could be better and more reusable. If you are having these thoughts, congratulations! Your SASS time has come.

Keep design and content separately. Do not mix them even if it seems that it will be faster and nothing bad will happen!