Those sentiments are perhaps, a bit sensational, but I have some thoughts on this.
Consider the differences between HTML and CSS. HTML is barely changed and provides pretty good fallback and browsers handle problems pretty well. Itâs really easy to learn and any basic webpage can be structured using a dozen tags maybe. Itâs just not hard to look at and figure out where stuff goes, itâs pretty easy actually.
That said, I really donât understand this maddening drive to make HTML as pure and simple as possible. E gads a container element! An extra span!
These things donât make HTML any harder to reason about, and if they are classed properly, they make it easy to change things too.
Now consider CSS. This is incredibly complex and getting worse by the day. Consider the overriding nature of the cascade, deep level selectors, child, descender, sibling, etc. Consider that it not only styles things, but can animate and transform them too. There is even 3-dimensional abilities! Then you add media queries (more cascade issues), state selectors (hover, active), pseudo elements (before, after), pseudo classes (last-child, nth-of-type, etc). Even functions like calc().
There is a glorious amount of complexity and a huge number of problems that come from too much CSS, too complicated CSS, unmanged CSS etc. Who hasnât fought for hours trying to figure out why some styles donât work, or a selector is off, or positioning went bad, or cascade has problems, specificity preventing new styles, throwing out !important in frustration, one simple change entirely breaks a different part of the site.
And yet with all the complexities of CSS, people still cry and whine about simple stupid easy-to-read HTML being a little more ugly!!
Do people not realize how incredible easy it is to work with styles by just having a bunch of direct classes that do what is needed, then spending all our time trying to write minimalistic HTML linked to incredible hard and hard to read and hard to reason about CSS? Nobody is impressed any more that you can write #mypage .coolthing .someblock:hover > .top p:first-child:not(.special) span.
That right there will give you nightmares. But hey, at least you didnât have to put an âextraâ class on the span and just style it directly! Super clean HTML yo!
And this whole idea of not putting how things âlookâ in the name of a CSS class. Well yes and no on that one. CSS is for deciding how things look, aaaaaaand CSS classes are for linking to those âlooksâ. So why is the class .thebigone a bad thing? Cause it âdescribesâ that something is a big one? This is bad for some reason?
Are we in the business of making sure our classnames purposefully DONâT tell us what they might do, or the effect they might have? BecauseâŚHTML or something?
On the other hand, I completely disagree using a class like .red and writing CSS .red { color: red; }. This is obviously bad because if the client some day wants red to be orange, you have to change all the HTML references as well as the CSS. Or worse, donât change HTML and now you are stuck with .red { color: orange; }! At least use a classname more like âbrandcolorâ or âbrandaltâ or something.
Here is what Iâd say. Donât spend too much time worrying about your HTML being slightly thick with extra containers, it is literally zero effort to still find where the content goes. It doesnât take someone long to search for the p tag or an h2. But if you trade complexity in HTML for complexity in CSS, you are asking for a world of pain!
Itâs like, hey look, I only have one single div surrounding all my content yeah! Ok but that one div now containers a crap ton of styling and is very rigid. If your container has margin on the sides, what if you want a background color behind the margins? If youâve built a long complicated selector, what if you want to insert a new element that breaks the chain? What if you want to reuse styles but canât because that one class is clogged with too many specific styles? You have to start duplicating styles and creating wet CSS (as opposed to DRY).
Rather the way to look at it is, create reusable styles on containers and donât over populate the container with too much styling.
I typically have a wrapper div, it goes edge to edge, top to bottom, no padding, no margin. This is a good place for full size background images or colors etc. Another inner container may have some margin or padding on the top and bottom to separate from other containers, but none on the left and right. Then another container inside that which might set the alignment and max width of the block depending on what content is needed in it. Then another one in there to set up inner content backgrounds or borders. And another for inner content paddings or grid. And another for grid blocks or floats. And another to wrap the actual content elements, etc etc. And each block has a class, and each class has just a few basic layout properties.
OMG, such complex! many unreadable!
Actually, what it does is create a whole bunch of layout options that can be reused. Do I need a full width container or a limited width one? A container with a background or one with extra padding? Do I need a grid?
This is all very easy by going more complex in HTML (still baby easy to read), and super less complex in CSS, a handful of single classes, no specificity issues, no cascade, no complex selector patterns.
And then somewhere within those containers Iâll slap an additional class to define that specific block, perhaps an ID which can later be used for in page linking for example. Or a unique class to provide additional options on those various layout boxes (such as what the background image or color actually is).
Iâm all in favor of having a bunch of classes and structure in HTML, with super easy CSS behind it. This doesnât mean I like Bootstrap. Iâm actually more of a Foundation guy. But those grid systems especially are very handy. Foundationâs XY grid is flex based using modern stuff, you can even change the order of blocks (finally) on various screens. It makes much fewer decisions about how things look than Bootstrap does. It has some base styles for typography and forms but otherwise you have to do most of the styling. Foundation classes are for grids and utilities and such.
My advice; stop worrying about complex HTML, which literally nobody has trouble dealing with. And instead worry about clean and simple CSS, single level classes, simple selectors, reduce cascade and specificity fights. Module based class naming. Use SASS if possible. Organize files.
I work on complicated sites all the time. A complicated HTML template might grow to 200 or 300 lines of code, but the complicated CSS that goes with it can be over 10,000 lines of code. No joke.
Letâs stop worrying about HTML and separation of concerns in class naming, and focus on better CSS and modularity!
Heck this very forum page has about 460 lines of HTML, snore. But the CSS expands to about 14,600 lines. Is it more important that HTML is as simple as possible? Or that CSS is as simple as possible? The CSS for this page was so big my browser dev tools couldnât even open it.
Worry about your CSS my friends. We donât live in an age of sites built with HTML, we live in an age where sites are built with CSS. There are no more browny points for getting the leanest, most class-free, container-free HTML any more. IMO
