My friend's website has this bloated mess:
<body id="collection-5a987f3071c10b34a3d7460a" class="tweak-social-icons-style-regular tweak-social-icons-shape-square tweak-site-width-option-full-width tweak-icon-weight-medium tweak-site-border-show tweak-site-ajax-loading-enable tweak-site-ajax-loading-bar-show ancillary-header-top-left-layout-horizontal ancillary-header-top-center-layout-horizontal ancillary-header-top-right-layout-horizontal ancillary-header-bottom-left-layout-horizontal ancillary-header-bottom-center-layout-horizontal ancillary-header-bottom-right-layout-horizontal ancillary-header-branding-position-top-center ancillary-header-tagline-position-hide ancillary-header-primary-nav-position-top-left ancillary-header-secondary-nav-position-top-right ancillary-header-social-position-hide ancillary-header-search-position-hide ancillary-header-cart-position-hide ancillary-header-account-position-hide tweak-header-primary-nav-hover-style-active tweak-header-primary-nav-button-style-solid tweak-header-primary-nav-button-shape-square tweak-header-secondary-nav-inherit-styles tweak-header-secondary-nav-hover-style-spotlight tweak-header-secondary-nav-button-style-solid tweak-header-secondary-nav-button-shape-square tweak-header-search-style-underlined tweak-header-search-placeholder-show tweak-header-cart-style-text tweak-header-account-style-text tweak-overlay-parallax-new-math tweak-index-nav-style-none tweak-index-nav-position-right tweak-index-page-fullscreen-all-pages tweak-index-page-scroll-indicator-none tweak-index-page-scroll-indicator-icon-arrow tweak-index-page-scroll-indicator-icon-weight-heavy tweak-index-gallery-layout-split tweak-index-gallery-spacing-sides-show tweak-index-gallery-spacing-top-bottom-show tweak-index-gallery-fixed-height tweak-index-gallery-apply-bottom-spacing tweak-index-gallery-hover-style-fade tweak-index-gallery-controls-small-arrows tweak-index-gallery-controls-icon-weight-hairline tweak-index-gallery-indicators-lines tweak-index-gallery-autoplay-enable tweak-index-gallery-transition-fade tweak-index-gallery-content-position-bottom-left tweak-index-gallery-content-text-alignment-left tweak-footer-show tweak-footer-layout-columns tweak-footer-layout-columns-auto tweak-footer-stacked-alignment-center tweak-mobile-bar-top-fixed ancillary-mobile-bar-branding-position-top-center ancillary-mobile-bar-menu-icon-position-top-right tweak-mobile-bar-menu-icon-two-lines ancillary-mobile-bar-search-icon-position-hide ancillary-mobile-bar-cart-position-top-left tweak-mobile-bar-cart-style-text ancillary-mobile-bar-account-position-hide tweak-mobile-bar-account-style-text tweak-mobile-overlay-slide-origin-left tweak-mobile-overlay-close-show tweak-mobile-overlay-menu-primary-button-style-solid tweak-mobile-overlay-menu-primary-button-shape-square tweak-mobile-overlay-menu-secondary-inherit tweak-mobile-overlay-menu-secondary-button-style-solid tweak-mobile-overlay-menu-secondary-button-shape-square tweak-quote-block-alignment-center hide-album-share-link tweak-blog-meta-primary-date tweak-blog-meta-secondary-author tweak-blog-list-style-grid tweak-blog-list-separator-show tweak-blog-list-alignment-center tweak-blog-list-item-image-show tweak-blog-list-item-image-aspect-ratio-grid-11-square tweak-blog-list-item-image-aspect-ratio-stacked-11-square tweak-blog-list-item-title-show tweak-blog-list-item-excerpt-show tweak-blog-list-item-body-show tweak-blog-list-item-readmore-below-excerpt tweak-blog-list-item-meta-position-below-content tweak-blog-list-pagination-link-label-show tweak-blog-list-pagination-link-icon-weight-light tweak-blog-item-alignment-left tweak-blog-item-meta-position-above-title tweak-blog-item-share-position-below-content tweak-blog-item-pagination-link-icon-show tweak-blog-item-pagination-link-label-show tweak-blog-item-pagination-link-title-show tweak-blog-item-pagination-link-meta-hide tweak-blog-item-pagination-link-icon-weight-heavy event-thumbnails event-thumbnail-size-32-standard event-date-label event-list-show-cats event-list-date event-list-time event-list-address event-excerpts event-item-back-link gallery-design-slideshow aspect-ratio-auto lightbox-style-dark gallery-navigation-bullets gallery-info-overlay-show-on-hover gallery-aspect-ratio-32-standard gallery-arrow-style-no-background gallery-transitions-fade gallery-show-arrows gallery-auto-crop tweak-product-list-image-aspect-ratio-11-square tweak-product-list-item-hover-behavior-show-alternate-image tweak-product-list-meta-position-under tweak-product-list-mobile-meta-position-under tweak-product-list-meta-alignment-under-left tweak-product-list-meta-alignment-overlay-bottom-left tweak-product-list-show-title tweak-product-list-show-price tweak-product-list-filter-display-top tweak-product-list-filter-alignment-left tweak-product-item-nav-show-breadcrumb-and-pagination tweak-product-item-nav-pagination-style-previousnext tweak-product-item-nav-breadcrumb-alignment-left tweak-product-item-nav-pagination-alignment-split tweak-product-item-gallery-position-left tweak-product-item-gallery-design-stacked tweak-product-item-gallery-aspect-ratio-11-square tweak-product-item-gallery-thumbnail-alignment-left tweak-product-item-details-alignment-left tweak-product-item-details-show-title tweak-product-item-details-show-price tweak-product-item-details-show-excerpt tweak-product-item-details-excerpt-position-below-price tweak-product-item-details-show-variants tweak-product-item-details-show-quantity tweak-product-item-details-options-style-rounded tweak-product-item-details-show-add-to-cart-button tweak-product-item-details-add-to-cart-button-style-outline tweak-product-item-details-add-to-cart-button-shape-rounded tweak-product-item-details-add-to-cart-button-padding-large tweak-product-item-image-zoom-enabled tweak-product-item-image-zoom-behavior-click tweak-product-item-lightbox-enabled tweak-product-badge-style-square tweak-product-badge-position-top-right tweak-product-badge-inset-flush newsletter-style-custom hide-opentable-icons opentable-style-dark small-button-style-outline small-button-shape-rounded medium-button-style-outline medium-button-shape-rounded large-button-style-outline large-button-shape-rounded image-block-poster-text-alignment-center image-block-card-dynamic-font-sizing image-block-card-content-position-center image-block-card-text-alignment-left image-block-overlap-dynamic-font-sizing image-block-overlap-content-position-center image-block-overlap-text-alignment-left image-block-collage-dynamic-font-sizing image-block-collage-content-position-top image-block-collage-text-alignment-left image-block-stack-dynamic-font-sizing image-block-stack-text-alignment-left button-style-outline button-corner-style-rounded tweak-product-quick-view-button-style-floating tweak-product-quick-view-button-position-center tweak-product-quick-view-lightbox-excerpt-display-truncate tweak-product-quick-view-lightbox-show-arrows tweak-product-quick-view-lightbox-show-close-button tweak-product-quick-view-lightbox-controls-weight-light tweak-share-buttons-style-outline tweak-share-buttons-icons-show tweak-share-buttons-labels-show tweak-share-buttons-counts-show tweak-share-buttons-standard-icon-color tweak-share-buttons-standard-background-color native-currency-code-usd collection-5a987f3071c10b34a3d7460a collection-type-blog collection-layout-default view-list mobile-style-available sqs-has-custom-cart has-logo-image has-tagline has-social enable-load-effects has-primary-nav has-secondary-nav has-footer-nav" data-controller="HashManager, SiteLoader, MobileClassname">
This is just the <body> tag! And sure enough, it is something a visual website builder generated. We all know that it is a bloated mess, but I am wondering why practically all visual website builders out there generate something similar to this. Is there a technical reason why it has to be this way with visual website builders? Are there some technical constraints that render clean and concise code impossible to achieve through visual builder's code generation process? If so, how? Does someone have any insights on technical explanations why visual builders can't help spitting out bloated code?
For example, I am guessing that maybe it is because they have to use JavaScript to manipulate DOMs, there is no way of tweaking a CSS on the fly, and the only way to achieve the same CSS-tweaking effect is to keep adding classes. Could that be one of the reasons?
I was reminded that I should explain things in a more structured manner:
<body id="collection-5a987f3071c10b34a3d7460a"
To me this is a classic collision concept that is happening.
how can we get a deterministic (reproducable) result for dynamic content? without collisions of IDs in the same namespace?
element-id = md5(json_serialize(attribute-list))
is a classic solution to get a reproducable clear id. most likely with a version_id increment so the method remains monoton.
Why would we want to do that? Because every saved document can be transported over multiply layers in the internet. And even setting the correct cache-invalidation headers sometime will get stripped by company proxies.
So it's a manual form of cache busting.
<body class="a b c d e f"
This is a CSS composition model. The composition model has it's advantage over a OOP like model like BEM by letting you compose attributes. What is the problem with a composition model? it's the question of 1:n or n:1 do i have n small attributes that change 1 thing or do I have 1 attribute that changes n things.
To an automated code generator who cannot know your intend the composition approach seems more reasonable, since he doesn't have to know where you current element is.
Also if you're using a code generator you don't care about elegance anyways, otherwise you would learn it.
The data tags I don't want to go into, because this was a common practice and we can argue here about the semantic model of it or the declarative parsing and where the state should be persisted or how things should be identified ....
To the point .... using hashes over document sums + functional css composition allows you to reason in a general manner. This is something Mark mentioned a good economic choice between result and work effort also it allows you to remove a lot of complexity out of the generation process and to avoid other problems.
I guess you have some timestamps/hashes attached to all the css and js files to avoid proxy cache header problems .... etc.
No one in his right mind would write code like this on purpose by hand .... but no one writes the compiler output by hand as well ....
I would not use such a system .... but I wrote such systems .... more specialized so they were 'less ugly' - whatever that means .... but I know why they look that way.
Things that could happen to reduce the so called bloat, would be compiler optimization passes where certain classes, if used constantly, can be in-lined into specific collection classes by a classic NFA to a DFA transformation or something similar. Than you probably would need to hash them as well to avoid collisions, but it would reduce the code overhead.
The first problem with visual builders is they effectively remove the entire concept of semantic markup from the equation. You're just typing in words with zero concern for if something is grammatically a paragraph, a list, headings indicating the start of sections, where headings and horizontal rules (whether you're showing them in the visual layout or not) belong to create logical document structure and alternative navigation, and a host of other problems.
Lacking that semantics and logical document structure it's hard to leverage semantics to keep the -- as your example is riddled with -- "classes for everything" nonsense under control.
The second problem is that visual editors tend to think of the markup in terms of what it looks like -- something that has no business in your HTML in the first bloody place!!!
It's the same problem these garbage front-end frameworks have of using classes to say what things look like instead of what they are or why they might be receiving a style. They inherently work using concepts much akin to the tags and attributes removed in HTML 4 Strict, and why I often say if you're going to waste your time with WYSIWYG's or trash frameworks like Bootcrap or W3.css, you might as well go back to writing HTML 3.2 as if CSS never even existed.
Slopping classes like "w3-red" or "text-center" or "col-m-4" into the HTML is flawed for the simple fact that not all target devices will even be capable of showing columns, or alignment, or even colors; or at certain widths, or other alternative skins you might use different colours or alignments. AKA the reason CSS even exists in the first place!
... and yet to function that's exactly what a visual editor must do. It's what frameworks do. That's why the code produced by either is some of the most -- here come those words again -- ignorant and incompetent nonsense in all of development.
They are at best a "shortcut" (yes, those are air quotes Doctor Evil style implying sarcasm. "Laser") for those who don't know any better that deludes people into thinking they can build a website. At worst they are a scam predators use to sucker people into thinking they had a website built for them.
... and it's easy to peddle to the masses because most people cannot see any farther than the screen they're seated in front of. As I've been saying for over a decade and a half, HTML is about more than that. A lot more. Screen readers (software that reads the page aloud), braille readers, tty, search engines... there are dozens of perfectly valid non-visual UA's that well written HTML is there to address.
Search engines don't have eyeballs, they could give a flying purple fish about your layout other than the addition of checking for things like content cloaking, or that you at least attempted to be mobile friendly. They do not care about your colours, presentational graphics, goofy bandwidth wasting animations -- all they really care about is your content and the semantic markup around it.
This is why I still say that wasting time screwing around with what a website looks like before you've determined the content -- or at least made a reasonable facsimile of future content -- and already created a logical document structure that is marked up semantically, is utterly and completely back-assward. It amounts to nothing more than putting the cart before the horse, and it is why many of the people who call themselves "designers" when all they know how to do is push pixels around in Photoshop are at best deluded, at worst outright lying to people. Art unto itself is not design; design is engineering that incorporates art whilst paying attention to specifications, guidelines, accessibility, user experience, and a host of other things the typical PSD jockey calling themselves a "web designer" are utterly and completely ignorant of!
If you're using a WYSIWYG how is your semantic markup even being formed? If you're using a WYSIWYG how can you apply CSS based on the logical document structure. Half the time you end up slopping in DIV, SPAN, and endless hordes of classes before you've even used (or worse, if you even use) tags with semantic meanings!
... and that's why using a WYSIWYG, drag and drop, etc, etc, is such a broken mess. If you're starting at the wrong end, don't be surprised when the result ends up stuffed like it just downed a Spishak back-door dinner!
You cannot generate proper semantics if you don't know what the HTML tags mean. You sure as shine-ola cannot do it if you don't even know/assign what tags are even going to be used on things, or choose the tags based not on their meanings but on their default appearance.... as such if you start out playing around with appearance before you've written your base semantic markup, of course the markup, CSS, and overuse of classes results in broken bloated slow incompetently build garbage.
Gets even worse when so many of these WYSIWYGS are based on 20 year old practices because the number of people who embraced using HTML 4 Strict numbers in the dozens. Endless pointless DIV for nothing, presentational markup, presentational classes replacing presentational tags, what is for all intents and purposes HTML 3.2 that spent fifteen years wearing the HTML 4 Transitional disguise, and now gets the HTML 5 doctype slapped on it so everyone can congratulate themselves over how modern their bleeding edge of 1997 HTML practices are.
Again, transitional in this case literally meaning "in transition from 1997 to 1998 development practices.
The WYSIWYG / drag and drop mentality is rooted in the bad, backwards, nonsensical practice of starting out with the appearance instead of meaning. For all intents and purposes it is the old joke about placing a higher value upon flash over substance, and as always the "common" person is more easily suckered by the slick veneer than they are what lies beneath.
But of course, all the people who've been scammed by these systems don't want to hear that since they've invested time, effort, and money on what for all intents and purposes is a dead-end. It "upsets" them and how dare anyone come right out and call these systems out for what they are: Borderline scams that prey upon fear, apathy, and just plain wishful thinking.
Hurting matters only further is that most adults my age and older have forgotten fifth grade grammar class, and most people younger more than a decade younger than me aren't exposed to the concepts at all, since apparently what I learned in fifth grade about headings, rules, paragraphs, lists, and plates back in the '70's is now third year of college for English majors.
Said writing and structural norms being those you're supposed to use writing whitepapers, documentation, engineering and scientific papers, term papers, business letters, etc, etc. Aka, the writing norms upon which HTML was originally created and why the HTML tags even have meanings and semantics!
Hence the saying:
If you choose any of your semantic markup because of what the tags look like, you're choosing all the wrong tags for all the wrong reasons.
P means a grammatical paragraph, it is not "oh this is some text" -- it sure as shine-ola doesn't mean "I want a double break after this". A lone image by itself is not a grammatical paragraph. An INPUT and its LABEL -- assuming the coder even knows what a LABEL is, most don't seem to -- is not a grammatical paragraph.
OL/UL are for short grammatical bullet points / selections. That's bullet point in terms of a short detailed brief, not "It has a dot before it".
H1 is the heading (singular) that everything on every page of the site is a subsection of. H2 is the start of a major subsection of the page, with the first H2 (or HR) indicating the start of the main content. H3 means the start of a subsection of the H2 preceding it. H4 means the start of a subsection of the H3 before it. Care to guess what depth 5 and 6 headings mean? HR means a change in topic/section where heading text is unwanted or unwarranted.
They do not mean "fonts in different weights and sizes" or "draw a line across the screen"
That they indicate the start (and therefor the ends) of sections, and the first H2 or HR is the start of the main content, is why HTML 5's new allegedly "structural' tags are as stupid as the trash that was added in HTML 3.2. ARTICLE, ASIDE, HEADER, FOOTER, NAV, MAIN? Pointless code bloat that exists just to pat the people who used endless pointless DIV for nothing on the back and give them an excuse to keep on keepin' on.
TABLE is for tabular data where there is a defined structure of relationships between headings, rows, and columns. It does not mean "I want columns". Hence why there are tags that go into tables like CAPTION, THEAD, TFOOT, TBODY, TH and attributes like SCOPE, AXIS, and FOR. You know, all those elements 90%+ of the people out there who've been writing HTML for 20+ years seem to still be unaware even exist?!?
Even tags that sound like they should be presentational aren't. Take B and I... B is for when it would be bold for grammatical reasons such as a entity in a legal document. The Italic tag is for when it would be italic for grammatical reasons such as a book title when it isn't being CITEd. They do not mean "show this text as bold or italic". Just as EM means "with emphasis" and STRONG means "with more emphasis".
Concepts no WYSIWYG editor or rubbish site builder is going to expose people to much less be able to keep straight!
It didn't help one iota that HTML 3.2 and 4 Tranny slopped presentational tags into the specification, and the war between Nyetscape and Exploder resulted in even more "bling" being tossed into the mix with zero concern for good practices. A lot of garbage was heaped onto the specification -- CENTER, ALIGN, BORDER, BGCOLOR, FONT -- that served zero grammatical purpose and were there just for appearance, something that was never supposed to be part of HTML's job and why they were all deprecated in HTML 4 Strict!
... and again why using something like class="text-center" completely misses the point! We got rid of the ALIGN attribute for a reason!
The whole idea of visual site development is incomplete, backwards, and skirts around the most basic and simple of site building concepts -- and for what? People complaining they might be expected to type, or simply refusing to take the time to learn something as idiotically simple as HTML using concepts that were -- again -- little more than what a standard level fifth grade English class taught nearly four decades ago?
Colour me unimpressed.
Mark
I think it's just economics. They have very little incentive to make the code look clean.
Most people don't look at or edit the generated code, and the people who use those tools certainly won't.
In fact, if people did that, it might just create more support issues for the builder tool company.