Does Anyone Use Vanilla CSS Anymore?

Topics

Introduction

• We recently published a TikTok video where a good debate came up about whether anyone still used vanilla CSS anymore
  - TikTok video can be viewed here
• This comment debate raised the question in my mind and led us to covering the topic in this episode

SASS

• SASS seems to be popular in the debate and also whenever you look up anything in the CSS world, so we’ll take a look at SASS to see if it’s really replacing CSS, what it does, etc.
  - “Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.”
  - Source: Sass: Syntactically Awesome Style Sheets (sass-lang.com)‍
• “Preprocessing CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass has features that don't exist in CSS yet like nesting, mixins, inheritance, and other nifty goodies that help you write robust, maintainable CSS. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website.”
  - Source: Sass: Sass Basics (sass-lang.com)

• If you notice they use the word “yet” and they don’t mention variables, probably because they’ve been added into CSS. When Mike and I first started learning CSS variables were only available from my memory, from SASS and so I didn’t use them in order to avoid leaving my vanilla learning zone
• “Fun fact Sass has two syntaxes! The SCSS syntax (.scss) is used most commonly. It's a superset of CSS, which means all valid CSS is also valid SCSS. The indented syntax (.sass) is more unusual: it uses indentation rather than curly braces to nest statements, and newlines instead of semicolons to separate them. All our examples are available in both syntaxes.”
  - Source: Sass: Sass Basics (sass-lang.com)

• The fact that SCSS is the most common SASS syntax, points out to me that people almost want to, or are just using vanilla CSS more as it’s matured
• I remember on a project one time, Mike mentioned to me that he was using jQuery and JS interchangeably (which you can do, but is sometimes frowned upon due to not being consistent) but he was doing that because he knew some of what he was coding up better in jQuery and other parts better in JS - with a fast deadline looming he just went with what he knew best to get the job done in time, then I assume refactored later as needed

Site Builders, No-Code, & WordPress

• Many site builders and no-code platforms will have a place for you to add custom code
• These sections are often for embedding third-party content, or making minute changes to the layout with CSS
• Often times these custom code areas do not support SASS, SCSS, LESS, etc. they are meant as simple ways to manipulate whatever functionality is already built-in to the platform and support (at least natively) only HTML/CSS/JS (yes some will support jQuery and other helpful tools, and you could probably get SCSS working in some others, but those are additional steps
• WordPress has several plugins that allow you to use your own files (ie JS and CSS) but there’s also the “Additional CSS” menu located under appearance > customize
  - Every website I’ve seen that uses this is always just straight vanilla CSS
  - Note: I did look up to see if anyone had gotten SCSS or anything else working here with a plugin, or vanilla, or anything like that and I only found people that were using SASS in their WordPress themes, so if you know anything more about this please reach out!
  - These changes that are added to “additional CSS” are typically designed, at least in my experience, to make small changes that cannot be accomplished in a given theme (ie a background color that just isn’t available to change in the settings) or something else small (and/or temporary)
  - This short form/temporary nature lends itself to vanilla CSS because it’s just a selector or two, so why would you need to have a pre-processor and all that set up?

Beginners: Your First Job

• Many beginners will learn HTML, CSS, and then JS in that order - with the lines blurred as you start making projects
• I would say that once you’re able to consistently make landing pages/mini projects (even with just HTML & CSS) you can start selling your skills and make a bit of money - not a lot of course as you’re still in training, but some people will just not have the time (or care enough) to make themselves a landing page on a no-code tool instead reaching out to cheaper developers (devs in training) to have them make up a quick site/landing page for them.
• Websites like this are still completely valid when made with vanilla technologies as the browser only understand them anyway
  - There’s no dev team that needs a standardized coding base, or needs a framework to keep organized and consistent
  - These small websites are often just a few pages at the most (maybe 1-5 pages)
  - Since they inexpensive, if the client outgrows the site they’ll just replace it with something more complex as their only presence needs to progress

Graphics & Drawing

• This is moreso a hobby than anything else, but it is a popular one among frontend developers and that is drawing graphics with CSS
• These graphics are often drawn with just vanilla CSS (although there are people that use pre-processors as well) but I find that many use just vanilla CSS to spin up some sort of logo, or image of some sort - often pushing CSS compatibility to the limit which means that some of their work only works in a compatible browser

Influencers

• There are several influencers out there that teach just straight up vanilla CSS which indicates that there is a market for learning just vanilla CSS, whether it be for beginners, or otherwise
• Kevin Powell, around 6 months before this recording did a multi-part series on building a website using HTML/CSS/JS with few “extras” including vite and maybe some post processing (as mentioned in the first part)
• In this video series he makes a full UI that looks modern and all that