Do CSS developers write VanillaCSS today or do they all use pre-processors and frameworks?

Everyone I meet talks CSS pre-processors (Less, Sass, etc) and frameworks (Foundation, Bootstrap). Do people still write VanillaCSS from scratch?

Syed Fazle Rahman's photo

Yes, developers do write CSS from scratch without the help of LESS and Sass (in 2016). Sometimes going back to basics will help you save time and efforts.

When the project is small, I prefer writing VanillaCSS to save setup time. With bigger projects and applications, where the number of collaborators involved is more, using a pre-processor makes sense; as it helps the team write better modular code.

Mev-Rael's photo

What is happening with that world? For the first time I see someone says "vanilla" CSS.

And again why do you limit your question to only 2 options. Do you know there is also PostCSS?

You won't believe me: I am writing just a CSS, just in simple .css files and I just include them in HTML file, however, I am using PostCSS to combine all imports into single file because of perfomance reasons and I am using CSSNext which is like Babel for JS. I am writing CSS4 vars, "mixins" and other stuff which is transformed back to CSS2/3. CSSNext is a bundle of many plugins so you don't need to use autoprefixer, for example. It is already there.

But again, this IS plain CSS and my code works in Chrome/Firefox without CSSNext, same as my JS. Only when I need older browser support I am using simple tools to transform code and I never use complicated build configs, gulps, grunts, browserifies, whatever else.

Marco Alka's photo

Hi there, good question! Some year ago, I made a self-test with SCSS and frameworks, just to test and see the world from another perspective (after all, SCSS is also used a lot by Harry Roberts).

After working with it on one project, I returned to my all-time fav. combination: VanillaCSS + HTML5Boilerplate normalization. Yes, the frameworks do a lot of stuff which tried to make my life easier, but they disrupted how I work. I want to use BEMIT and ITCSS and at the same time deliver very small CSS. Something like that is not quite possible with these frameworks, so I stay with VanillaCSS.

Dennay Bedard's photo

Great question! I personally prefer to use Sass because I really like a lot of its features that make writing CSS easier. As far as frameworks, even though frameworks such as Bootstrap do have a place in some settings, say a large company with 200+ devs, I think they're overused. They can be good, but I think that the front end developers working with frameworks need to also know how to do everything the framework does so they don't always have to rely on that framework to be able to code responsive sites. I kind of think that might be why they're so overused. I prefer to code responsive sites without a framework so that I'm not tied down to its breakpoints, but at work, since I work for such a large company, it makes sense for them to take advantage of Bootstrap's grid system.

David's photo

There's no hard and fast rule for styling a project.

I always choose which way to style my projects based on what that project is. If its small scale, only me working on it and relatively static then I might in-line CSS. If its a large scale component based web application then I'll use SASS with some packaging & optimising tool. If I can use H2 server push I might keep everything separate and only serve it up as its needed.

I think the method you decide on depends on what that project is, who will be working on it, how its intended to be consumed and what level of performance you deem suitable.

As is becoming more and more obvious styling a project is about more than what tool you use, I think the developer needs to understand the aim of the product and how its intended to be consumed, mobile (poor 3g) / or desktop (high speed fibre), after understanding the target use case and the network restrictions that may apply then you should consider what way to go about styling your project.

Just my 2 cents :D

Theresa's photo

It depends on the project. It is actually really easier to work with vanilla than to have a huge iceberg in your 1-5 page app ending up using one page of CSS that you wrote yourself anyway. That said, there are things I learned from trying to implement a CSS framework or library that I would not have known if I did not try to use them. So I suppose it is a necessary 'evil'

Ben Buchanan (200ok)'s photo

I'd break this in two parts:

  1. the majority of devs I know do use a preprocessor, mostly SCSS (few use LESS, even fewer use PostCSS)
  2. many people don't use a framework off the shelf, preferring either bespoke CSS or a bespoke framework customised exactly to their needs.

People definitely still write plain CSS though; and I always recommend people learn CSS before a pre/post-processor as you need to know what's being sent down the pipe after compilation.

Thomas Williams (Asimov)'s photo

I have always use vanilla css, but just recently started using scss. I hate bootstrap witha a passion, but it is being forced on me unfortunately. It is a bloated piece of js and css, which I could easily do without.