After much research and inspecting the code from various CSS frameworks, including so-called "class-less", I have come to some conclusions – that are meaningful to me. MIght be meaningful to some others and that's the purpose of documenting this.
There is no shortage of CSS frameworks and of all types. Throughout most of the history of the internet, Cascading Style Sheets (CSS for short) has been the underlying basis for website and web app designs. Without CSS, websites and web applications look bland. CSS gives us some organization with div's, tables, ordered and unordered lists, headings, paragraphs, basic form elements with a few containers (like fieldsets) and basic ways of presenting photos and graphics.
We also have some extreme opinions on how CSS should present. That starts with the browsers that do their own interpretation. The worst of the worst has always been Internet Explorer (IE). It's not restricted to IE though. ALL browsers do it: Firefox, LibreWolf, Chrome, MS Edge, Opera, etc. etc. IE just gets the brunt of the hate because Microsoft tried to force their view of "standardization" through IE ... even if that standardization was not inline with the rest of the world.
And boy, did Microsoft bear the brunt of that hate. Today, IE is no more - replaced with Microsoft Edge and using someone else's engine (Chromium, the core of Chrome).
CSS goes hand-in-hand with HTML. HTML is the code elements that form web pages. CSS is the formatting (or appearance) of those code elements.
For many years, a few smart developers have created tools to standardize the appearance on websites as they appear in various browsers and various operating systems. Operating systems have their own "opinions" on what fonts are defaults on their system ... and every browser relies on those fonts to display pages. To website developers, this is a bit of a problem: websites appear differently depending on which fonts are supported.
To standardize, two different directions: reset, and normalize. I don't want to get into the debate of which is best, that's up to you. I just want to document how I believe each works. Reset does what it says: it resets everything in HTML (via CSS) to null and then goes about the process of rebuilding each element. Normalize (and by the way, sanitize is the same thing: each developer has the same approach, slight differences in implementation) goes about the process of identifying differences in browsers and fonts and goes about the process of standardizing each of those differences.
I personally prefer the "normalize" approach. To me, it's smaller and less obtrusive. The main packages for normalizing are:
- Normalize.css is authored and maintained by Nicholas Gallagher. He has a great history on his blog.
- Modern-Normalize.css is authored and maintained by Sindre Sorhus. The author claims smaller code, a more modern approach, better approach to default fonts.
- Sanitize.css is authored and maintained by csstools. Note there are three parts to sanitize.css ... a core module, a typography module, and a forms module. The authors claim sanitize.css is developed alongside normalize.css and includes everything in normalize.css.
I've used all three of these. I've personally settled on using only sanitize.css ... I have downloaded all three modules and combined them into one "sanitize-all.css" file and minified the result. I use that regularly and find it as close to ideal as possible.
And, to make it clear, I am not knocking the reset method. If you use reset and rebuild each element, good for you. I'm glad it works for you. I'm just pointing out that it doesn't work (for me).
CSS Frameworks run the gamut of basic class-less approach, utility-first approach where all types of possible web page elements are created and provided for you, to full-blown kitchen-sink approach where everything is done for you (and even free themes and templates and given to you, packed as "starter" kits).
The marketing of these CSS Frameworks is comical, by the way. There's one that is growing (a bit) in popularity based on the claim that it is smaller than the market leader, more intuitive class names, and faster. The market leader is Bootstrap with well over 70% market share. The "contender" has about 1% market share. Here's what is comical: it's not smaller, it's more than double the size; it's not more intuitive overall, you need a babel dictionary to have it make sense; and it's definitely not faster, it's impossible at more than twice the size (means twice the bandwidth).
The more complex the package, the more frustrations when you encounter circumstances where you need to take over and add a bit of code on your own ... you add your code and break something else at the same time. You fix that and break other things. Add your own HTML and to get it to display properly you have to add your own "styles" and attributes. Sort of defeats the purpose of the CSS Framework in the first place, doesn't it.
After reviewing the internals of quite a few CSS Frameworks, I've come to appreciate a minimalistic approach. That is the "semantic HTML" and class-less CSS Framework. Reason I think this is the best approach: we have to build the websites using the same HTML Why re-invent what that HTML does ... why not just focus on embelishing that HTML?
Now, I'm not endorsing this package, but the only one that comes close to this is simple.css. The author, Kev Quick, appears to have a similar philosophy on development and created this package. It's only 10Kb and is an excellent building block you should have in your developer tool bag. It's akin to a "reset" process where each of the main HTML elements are "standardized", including default fonts, even colors.
Simple.css has the right concept. I actually used it to create a new CSS Framework for a fully responsive framework of my own ... what I was trying to do was avoid a roll-you-own development. For the purpose of a learning experience, I am going to start on a roll-your-own framework. I'll do something similar to simple.css ... but break down the process into modules, starting with a "normalize" core, and a mini-template next. The modules will be quite similar to how I structured the fully responsive framework I already built. I however, plan on a more curated process. For example, I will create a new Flexbox based grid system with more intuitive class names.
<div class="columns is-multiline" style="margin:0;" >
<div class="column is-3-widescreen is-6-tablet">
What I plan:
<div class="row m-0>
<div class="three-widescreen six-tablet">
How long will this take? I haven't got a clue. I have other projects I work on regularly. This will be more of a hobby or part-time project. I will update the progress through my posts.
As far as my recommendations at this point: Bootstrap has the market cornered on all-inclusive CSS Frameworks. There are a considerable number of templates available, free and paid (paid helps ensure a more unique look). Bootstrap includes the javascript code needed to make its features function as expected. It's created and supported by a large community of open-source coders. For small to medium sized websites where you are reasonably well versed in CSS, get a copy of Simple.CSS Framework. It's well designed. The work you will put in for customizing to your needs is about equivalent to the work you will put in to fix issues with the "all-inclusive" frameworks.