1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

All CSS in stylesheet as classes to save time?

Discussion in 'HTML & Website Design' started by Web_Dev_Chris, May 14, 2020.

  1. #1
    Hi,

    What are you toughts on have a single stylesheet that have most of the styles that get used as classes and reuse those classes to speed up design time?
    SEMrush
    For example - Style sheet
    /*Red CSS colours*/
    .lightsalmon{color:#FFA07A;}.salmon{color:#FA8072;}.darksalmon{color:#E9967A;}.lightcoral{color:#F08080;}.indianred{color:#CD5C5C;}.crimson{color:#DC143C;}.firebrick{color:#B22222;}.red{color:#FF0000;}.darkred{color:#8B0000;}   
    
    /*Red CSS background-colours*/
    .lightsalmonbg{background-color:#FFA07A;}.salmonbg{background-color:#FA8072;}.darksalmonbg{background-color:#E9967A;}.lightcoralbg{background-color:#F08080;}.indianredbg{background-color:#CD5C5C;}.crimsonbg{background-color:#DC143C;}.firebrickbg{background-color:#B22222;}.redbg{background-color:#FF0000;}.darkredbg{background-color:#8B0000;}
    Code (CSS):
    Example HTML:
    <header class="darkredbg">
           <h1 class="gold">Hello World!</h1>
    </header
    HTML:
    Than in future projects we just apply the class names to build our layout and design compared to adding a new stylesheet and adding all the styles again...
     
    Web_Dev_Chris, May 14, 2020 IP
    SEMrush
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,496
    Likes Received:
    377
    Best Answers:
    29
    Trophy Points:
    335
    #2
    That is backassward and upside down. Go back and reread the many posts from Jason, @deathshadow, which cover again and again why your suggested methodology is broken.

    What you suggest will tend strongly toward artificially increasing the complexity, thus the costs of debugging and maintenance. Always keep in mind the person who succeeds you may be a violent psychopath who knows where you live.

    gary

    addendum: Your stylesheets are already reusable. Don't make up nonexistent rationales for doing what you want. Have an actual issue to solve first. ~g
     
    Last edited: May 15, 2020
    kk5st, May 15, 2020 IP
    mmerlinn, JEET, sarahk and 1 other person like this.
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,340
    Likes Received:
    1,830
    Best Answers:
    244
    Trophy Points:
    515
    #3
    Gary is being polite about this; you have utterly and thoroughly failed to divine the PURPOSE of CSS, the intent of HTML, and how either is supposed to be used/work, or why they even exist in the first damned place.

    HTML is about MORE than just what it looks like on screen. It's about text only displays, print, non-visual UA's like braille readers, screen readers, and search engines. This is why HTML is for saying what thing are, structurally, gramatically, AND NOT WHAT YOU WANT THINGS TO LOOK LIKE!!! If you choose ANY of your markup to say what it looks like -- and that includes classes and ID's -- you might as well go back to writing HTML 3.2 with all the crap that was deprecated from it, and the outmoded outdated stupid hacks like tables for layout!

    It's called separation of presentation from content, and by using it you can do multiple appearances off of ONE markup. Take a recent thing we can do, the implementation of a "dark mode" toggle. What are you going to do, have a class="gold" that ends up black in dark mode? class="bgRed" that ends up green? Same for skinning software like forums. By dicking around with classes to say what things look like, you've just made multi-skinning (like on forums) by declaring presentation in the markup!

    Much less ever heard of DRY? Don't repeat yourself? This type of methodology does nothing BUT repeat itself all over the markup, when you could just say the value once in the CSS and then group like selectors.

    It's how you end up with mental huffing midgetry like bootcrap, w3fools "w3.css", tailwind, and all these other idiotic dumbass broken "frameworks" PISSING on usability, accessibility, and just plain common sense from so on-high you'd think the almighty just got back from a kegger and last minute had to show up to manage the Rockford Peaches.

    It is exactly his type of thinking that leads to trash like this:

    
    <div class="w3-bar w3-black">
      <a href="#" class="w3-bar-item w3-button">Home</a>
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>
    
    Code (markup):
    With markup made by people who go "semantics, what's that" and requiring some bloated dipshit moronic framework doing the job of:

    <ul id="mainMenu">
    	<li><a href="#">Home</a>
    	<li><a href="#">Home</a>
    	<li><a href="#">Home</a>
    	<li><a href="#">Home</a>
    </ul>
    Code (markup):
    Whilst yes, we'd need to actually write the custom CSS for that:

    #mainMenu {
    	list-style:none;
    	background:#000;
    }
    
    #mainMenu li {
    	display:inline;
    }
    
    #mainMenu a {
    	padding:0.25em 1em;
    	text-decoration:none;
    	color:#FFF;
    }
    
    #mainMenu a:focus,
    #mainMenu a:hover {
    	background:#CCC;
    	color:#000;
    }
    Code (markup):
    We aren't wasting time making a class for every damned element in the CSS. We can reskin the whole thing without having to even TOUCH the markup. We can run multiple skins / colour choices simultaneously by simply switching what stylesheet is loaded or even the state of something like a checkbox. But even more important?

    CSS can be CACHED, meaning that the moment we load more than one page sharing this same style, we've saved bandwidth because the markup is smaller!

    The laugh being the mouth-breathers who insist on presentational classes and bloated markup, typically are the same fools who go ape-shit with minification to save a couple bytes in the wrong places. MAYBE if people would stop wasting 200k of markup, 500k of CSS in a dozen files, and 2 megabytes of scripttardery spanning two dozen files to do the job of 24k of HTML, 48k of CSS in ONE file, and 96k of JavaScript in maybe two files, they wouldn't be diving for these broken, inaccessible techniques that defeat the entire mechanism by which HTML is supposed to work!

    [​IMG]

    Hell, just look at your own example with the <header> for nothing and classes for nothing... since there should only be one H1 on a page it doesn't even NEED a class.

    <h1>Hello World</h1>
    Code (markup):
    h1 { background:red; color:gold; }
    Code (markup):
    They DO NOT BELONG in the same damned FILE. This is why the <style> tag is equally broken BS that should have been removed in HTML 5. It in fact was on the chopping block (along with other redundancies like IMG) for the "real" HTML 5 until the WhatWG came along and took a dump on everything. Same for style="" which should only be used in the rarest of corner cases and why 99% of the time you see it used, you're looking at that pesky 3i of web development. Ignorance, incompetence, and ineptitude.

    Seriously, how the charlie sierra bravo does this approach make anything "easier" or "save time"?!?
     
    Last edited: May 15, 2020
    deathshadow, May 15, 2020 IP
    malky66, JEET and sarahk like this.
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,340
    Likes Received:
    1,830
    Best Answers:
    244
    Trophy Points:
    515
    #4
    Actually, I can explain this better with an actual example I'm coding right now for a tutorial I'm writing. It's 90% complete, just need to add a hamburger modal to it.

    https://cutcodedown.com/demos/dayNight/

    The usual stuff is in there. a .txt of the markup for the "view source" shy, print and screen stylesheets, a copy that doesn't load any style, etc, etc.

    How would a class like "darkredbg" work when completely changing the style WITHOUT changing the markup? Would it even apply if your print stylesheet isn't for color?

    Take the menu as another example, what I have coded is:

    
    		<ul id="mainMenu">
    			<li><a href="#">Home</a></li>
    			<li><a href="#">FAQ</a></li>
    			<li><a href="#">About</a></li>
    			<li><a href="#contact">Contact</a></li>
    		</ul>
    
    Code (markup):
    With this CSS:

    
    #mainMenu {
    	list-style:none;
    }
    
    #mainMenu li {
    	display:inline;
    }
    
    #mainMenu a {
    	display:inline-block;
    	padding:0.25em 1em;
    	text-decoration:none;
    	background:#EEE;
    	color:#000;
    	border-radius:0.5em;
    	border:1px solid #AAA;
    	box-shadow:0 0.25em 0.5em rgba(0,0,0,0.2);
    	transition:top 0.3s, box-shadow 0.3s;
    }
    
    #mainMenu a:focus,
    #mainMenu a:hover {
    	top:0.1em;
    	box-shadow:none;
    }
    Code (markup):

    Setting aside the UL and just focusing on the LI and anchors, are you really suggesting writing markup like this?

    	<li class="inline">
    		<a href="#" class="black bgVeryLightGrey paddingP25xP5 borderGrey blacklackShadowP2 noDecoration borderRadiusP5 transitionTopBoxShadow hoverNoShadow hoverTopDropP1">
    			Home
    		</a>
    	</li>
    	<li class="inline">
    		<a href="#" class="black bgVeryLightGrey paddingP25xP5 borderGrey blacklackShadowP2 noDecoration borderRadiusP5 transitionTopBoxShadow hoverNoShadow hoverTopDropP1">
    			FAQ
    		</a>
    	</li>
    	<li class="inline">
    		<a href="#" class="black bgVeryLightGrey paddingP25xP5 borderGrey blacklackShadowP2 noDecoration borderRadiusP5 transitionTopBoxShadow hoverNoShadow hoverTopDropP1">
    			About
    		</a>
    	</li>
    	<li class="inline">
    		<a href="#contact" class="black bgVeryLightGrey paddingP25xP5 borderGrey blacklackShadowP2 noDecoration borderRadiusP5 transitionTopBoxShadow hoverNoShadow hoverTopDropP1">
    			Contact
    		</a>
    	</li>
    
    Code (markup):
    Can you see where this whole notion of a "classes for everything" starts to go bits-up face-down? It's why all these frameworks -- bootstrap, tailwind, etc -- are utter garbage made by people not qualified to write a single damned line of HTML or CSS.

    Look no further than the very first example for bootstrap:

    https://getbootstrap.com/docs/4.5/examples/album/

    These assclowns can't even use numbered headings right! Seriously, when they have this train wreck of incompetence:

       <header>
      <div class="collapse bg-dark" id="navbarHeader">
        <div class="container">
          <div class="row">
            <div class="col-sm-8 col-md-7 py-4">
              <h4 class="text-white">About</h4>
              <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
            </div>
            <div class="col-sm-4 offset-md-1 py-4">
              <h4 class="text-white">Contact</h4>
              <ul class="list-unstyled">
                <li><a href="#" class="text-white">Follow on Twitter</a></li>
                <li><a href="#" class="text-white">Like on Facebook</a></li>
                <li><a href="#" class="text-white">Email me</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="navbar navbar-dark bg-dark shadow-sm">
        <div class="container d-flex justify-content-between">
          <a href="#" class="navbar-brand d-flex align-items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
            <strong>Album</strong>
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </div>
    </header>
    Code (markup):
    Doing the job of:

    <div id="top">
    	<input type="checkbox" id="toggle_navHeader" class="toggle" hidden>
    	<header>
    		<h1><a href="#">Album</a></h1>
    		<label for="toggle_navHeader"></label>
    	</header>
    	<div>
    		<section>
    			<h2>About</h2>
    			<p>
    				Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.
    			</p>
    		</section><section>
    			<h2>Contact</h2>
    			<ul>
    				<li><a href="#">Follow on Twitter</a></li>
    				<li><a href="#">Like on Facebook</a></li>
    				<li><a href="#">Email me</a></li>
    			</ul>
    		</section>
    	</div>
    <!-- #top --></div>
    Code (markup):
    I stand by the FACT that the folks who create, work on, and maintain these HTML/CSS frameworks are unqualified to even open their damned traps on the SUBJECT of writing HTML or CSS. NOR are they qualified to say what's "easier" or "simpler" and if they do use those words, they're either ignorant turds in desperate need of a quadruple helping of Sierra Tango Foxtrot Uniform, or they're just outright peddling a scam.

    [​IMG]

    The moment you see a h4 as the first content-bearing tag on a page, and a class that's "text-white", you're looking at <broken record>developer ignorance, incompetence, and ineptitude!</broken>

    Laugh is, I think because I'm saying uncomfortable truths that shatter his little echo-chamber bubble, the OP has posts from me set to ignore. Wah wah, somebody's using harsh language and saying that all the media darlings are wrong!!!
     
    Last edited: May 16, 2020
    deathshadow, May 16, 2020 IP
    malky66 likes this.
  5. Glen Wheeler

    Glen Wheeler Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Interesting write up @deathshadow, so what are your thoughts on TailWind CSS? I would be interested in your thoughts on that.
     
    Glen Wheeler, May 20, 2020 IP
  6. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,410
    Likes Received:
    1,369
    Best Answers:
    24
    Trophy Points:
    400
    #6
    [​IMG]
     
    qwikad.com, May 20, 2020 IP
    deathshadow likes this.
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,340
    Likes Received:
    1,830
    Best Answers:
    244
    Trophy Points:
    515
    #7
    JUST another monument to the three 'i' of self development: ignorance, incompetence, and ineptitude. Its creators and maintainers -- JUST like those who vomited up the train wreck of f****ardery that is bootcrap -- clearly never learned enough about HTML or CSS to write a single blasted line of either, much less have the unmitigated GALL to tell others how to do so!

    Take their form example:

    <div class="w-full max-w-xs">
      <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
        <div class="mb-4">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
            Username
          </label>
          <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
        </div>
        <div class="mb-6">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
            Password
          </label>
          <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
          <p class="text-red-500 text-xs italic">Please choose a password.</p>
        </div>
        <div class="flex items-center justify-between">
          <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
            Sign In
          </button>
          <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
            Forgot Password?
          </a>
        </div>
      </form>
      <p class="text-center text-gray-500 text-xs">
        &copy;2020 Acme Corp. All rights reserved.
      </p>
    </div>
    Code (markup):
    Endless pointless idiotic "classes for nothing", incomplete forms, pointless attributes, "placeholder is not a label" redundant dipshit bull, hidden paragraphs for scripttardery to do the "required" attribute's huffing job, all doing the job of:

    <form id="login">
    	<div>
    		<fieldset>
    			<label for="username">Username</label><br>
    			<input type="text" id="username" required><br>
    			<label for="password">Password</label><br>
    			<input type="password" id="password" required>
    		</fieldset>
    		<div>
    			<button>Sign In</button>
    			<a href="#">Forgot Password?</a>
    		</div>
    	</div>
    	<p>
    		&copy; 2020 Acme Corp, all rights reserved.
    	</p>
    </form>
    Code (markup):
    With every other blasted thing being done belonging NOWHERE in the markup nor requiring ANY JavaScript. They're blowing 1412 bytes of markup on doing 413 bytes job, and for what? To avoid writing around 1k of CSS? /FAIL/ hard.

    Much less that their padding and presentation isn't even ... even... the choice of grey on blue is below WCAG minimums... etc, etc.

    No joke, for all that nonsense if you already have a reset in place, the CSS would simply be:

    #login > div {
    	max-width:32em;
    	margin:0 auto;
    	padding:2em;
    	background:#FFF;
    	text-shadow:0 0.25em 0.75em rgba(0,0,0,0.2);
    }
    
    #login > p {
    	text-align:center;
    	font-size:0.875em;
    	font-color:#666;
    }
    
    #login label {
    	font-weight:bold
    }
    
    #login input {
    	box-sizing:border-box;
    	width:100%;
    	padding:0.5em 1em;
    	margin-bottom:0.5em;
    	border:1px solid #BBB;
    	border-radius:0.25em;
    }
    
    #login input:invalid {
    	border-color:#C00;
    }
    
    #login div div {
    	overflow:hidden;
    	text-align:right;
    	font-weight:bold;
    }
    
    #login div div button {
    	float:left;
    	padding:0.5em 1em;
    	background:#08F;
    	color:#FFF;
    	border:0;
    }
    
    #login div div button:focus,
    #login .submitsAndHiddens button:hover {
    	background:#06C;
    }
    
    #login div div a {
    	text-decoration:none;
    	color:#08F;
    }
    
    #login .submitsAndHiddens a:focus,
    #login .submitsAndHiddens a:hover {
    	color:#06C;
    }
    Code (markup):
    (pulling style out my ass, not a 1:1 match but represents code that could be)

    The laugh being that 901 bytes of CSS and 413 bytes of markup comes to only 1314 bytes... so it's even smaller than their examples markup all by itself.

    Don't even get me STARTED about their "inline form" example where they have this train wreck laundry list of how NOT to write HTML:

    <form class="w-full max-w-sm">
      <div class="md:flex md:items-center mb-6">
        <div class="md:w-1/3">
          <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name">
            Full Name
          </label>
        </div>
        <div class="md:w-2/3">
          <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" value="Jane Doe">
        </div>
      </div>
      <div class="md:flex md:items-center mb-6">
        <div class="md:w-1/3">
          <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-username">
            Password
          </label>
        </div>
        <div class="md:w-2/3">
          <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-username" type="password" placeholder="******************">
        </div>
      </div>
      <div class="md:flex md:items-center mb-6">
        <div class="md:w-1/3"></div>
        <label class="md:w-2/3 block text-gray-500 font-bold">
          <input class="mr-2 leading-tight" type="checkbox">
          <span class="text-sm">
            Send me your newsletter!
          </span>
        </label>
      </div>
      <div class="md:flex md:items-center">
        <div class="md:w-1/3"></div>
        <div class="md:w-2/3">
          <button class="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button">
            Sign Up
          </button>
        </div>
      </div>
    </form>
    Code (markup):
    Doing the job of:

    <form id="login">
    	<fieldset class="labelBefore">
    		<label for="login_name">Full Name</label>
    		<input type="text" id="login_name" placeholder="Jane Doe"><br>
    		<label for="login_pass">Password</label>
    		<input type="password" id="login_pass">
    	</fieldset>
    	<fieldset class="labelAround">
    		<label>
    			<input type="checkbox">
    			Send me your newsletter!
    		</label>
    	</fieldset>
    	<div>
    		<button>Sign Up</button>
    	</div>
    </form>
    Code (markup):
    and depending on the form and how much it would/should be frequently changed, I'd be tempted to ditch the two remaining classes.

    The sheer stupidity of these "front end frameworks" cannot be overstated, and web developers on the whole are all the dumber for having been sucked in by the BALD FACED LIES of their being somehow "easier" or "simpler" or "better for collaboration" or any of the other fabrications used to sucker in nubes and rubes alike.

    Particularly when crapping out the non-semantic markup pisses on usability, and vomiting up all that extra junk in the HTML takes a giant dump on caching models. Don't even get me STARTED on how these dipshit frameworks actually make back-end coders lives harder by handing them two to twenty times the markup to have to slice up into their template systems, or the corresponding server load ignorant fools claim "doesn't matter" even as their diving for equally derpy trash like wp-cache, varnish, etc.

    It's all band-aids on bullet wounds.

    Such utter huffing brilliance, let's let users not learn CSS or HTML properly, forcing them to write three times or more the markup needed, writing more code overall than needed, and the sell them the LIE that it's all somehow easier or better... whilst making 100% sure of removing anything remotely resembling accessibility, efficiency, simplicity, common sense, good practices, or why HTML even exists in the first huffing place!
     
    Last edited: May 20, 2020
    deathshadow, May 20, 2020 IP
    malky66 likes this.
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,340
    Likes Received:
    1,830
    Best Answers:
    244
    Trophy Points:
    515
    #8
    Just to give another example of what asshattery tailwind is.

    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
      <strong class="font-bold">Holy smokes!</strong>
      <span class="block sm:inline">Something seriously bad happened.</span>
      <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
        <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
      </span>
    </div>
    Code (markup):
    The SVG is the icing on the cake considering it's just making a cancellation X we can pull from utf-8... and the MADE UP aria role that no legitimate UA is going to have ANY clue what to do with.

    I mean FFS how stupid can you get when you have code that reads <strong class="font-bold">?!? That's as utterly ridiculous -- and ignorant -- as <form role="form">

    <div class="alert">
      <strong>Holy smokes!</strong>
      Something seriously bad happened.
      <span>&#x1F5D9;</span>
    </div>
    Code (markup):
    and this CSS:

    .alert {
    	position:relative;
    	max-width:20em;
    	padding:1em 3em 1em 1em;
    	background:#FDD;
    	color:#C00;
    	border:1px solid #C00;
    }
    
    .alert span {
    	position:absolute;
    	right:1em;
    	top:1em;
    }
    
    Code (markup):
    Again, just ballparking the values with placeholders and not sitting here figuring out the EXACT match, but it's a good representation.

    331 bytes in the rewrite for HTML and CSS combined, vs. the 691 bytes of their original. Even if we replace the SVG in their original with the utf-8 character, they still are at 318 bytes... and for what? to use a bloated framework that by itself unminfied is larger than an entire site's CSS should be? To make excuses for "wah wah, I dunz wunna lurns teh HTML and CSS pruperlee?" As some sort of way for know nothings I wouldn't trust to tie their own laces to sleaze out a website unfit to even wipe with? To utterly destroy any proper chance at caching and to make both servers and the back-end coders work harder?

    Hell, unfit to wipe with during the current TP shortage from hoarding whackjobs?

    Again, /FAIL/ at the most basic aspects of writing clean efficient accessible HTML with proper separation of concerns.

    ... and it gets worse when you realize they're mixing PX metric media queries with a willy-nilly mix of named, px, pt, and em sizes. Again, "accessibility, what's that mean?" and why Tailwind designs are utterly broken on every machine I own since not one of them is set to the 16px default font-size.

    The moment you see code like this:

    
    /* Small (sm) */
    @media (min-width: 640px) { /* ... */ }
    
    /* Medium (md) */
    @media (min-width: 768px) { /* ... */ }
    
    /* Large (lg) */
    @media (min-width: 1024px) { /* ... */ }
    
    /* Extra Large (xl) */
    @media (min-width: 1280px) { /* ... */ }
    
    Code (markup):
    Whoever is telling you that's how to write websites needs a quadruple helping of sierra tango foxtrot uniform and a good slap across the face with a wet trout.
     
    Last edited: May 20, 2020
    deathshadow, May 20, 2020 IP
    malky66 likes this.
  9. Glen Wheeler

    Glen Wheeler Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #9
    Glen Wheeler, May 21, 2020 IP
  10. LeylaKondakova

    LeylaKondakova Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #10
    Interesting discussion
     
    LeylaKondakova, Jul 3, 2020 IP