CSS Preprocessors vs Frameworks

Personally, I prefer using Vanilla CSS, aka just plain jane CSS. It's not too heavy with files, and allows me the full control to customize a design with ease. 

The downside of that control, is that everything on screen is from my mind only which essentially means it will take almost 1000 times longer than using the assistance of a framework. I know it all too well. For example, my portfolio site. I spent almost 9 months to complete because probably the first 7 months I kept getting new ideas, changing the design & layout, scratching everything & starting all over. Consumed I was with the idea, that it would be "cheating" to design using a template as a starting point. 

Eventually I gave in, found a nice template, broke it down, and heavily customized from there. If I weren't working a full time job and going to school full time, I might have finished in about 3 weeks, but in the end it took about 2 months. 

The purpose of this is to make a point that by using CSS design tools is just plain faster. It's always a good idea to work smarter, not harder. So why take more time, when you could use the time you have to design more efficiently? Using that mindset brings the help of CSS Preprocessors & Frameworks. But what is the difference?

The Difference

A CSS Preprocessor is a program that allows generation of CSS from the preprocessor's own unique syntax with the addition of features such as mixins, nesting selectors, variables, functions and more. A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language.

Examples of popular preprocessors are Sass, LESS, & Stylus. Examples of popular frameworks are Bootstrap, Foundation, & Tailwind.

The Purpose

Frameworks & Preprocessors are used by UI developers to make their job easier by developing in less time. They give developers the tools to quickly spin-up user interfaces that can be tweaked and iterated on throughout a project instead of spending time starting from a blank document.

The Downfall

Using a framework also has its downsides. The main one that I can think of is that so many websites are starting to look the same. Bootstrap, for example, is incredibly popular. It's easy & free to use. However, just by looking at available templates on Colorlib, almost every option has the same layout. Google's Materialize has been a pleasure to use while learning to develop React Native apps, but quickly you'll see that the end result looks like it could be a Google application. 

Conclusion

Having that pure CSS knowledge can help to solve problems when there are render issues on screen. It takes more time, but provides the flexibility to have a more custom result. Using Preprocessors may be heavy, but delivers more organized code & ability to avoid writing the same lines of code for different selectors. Overall, using a framework is a great starting point so you're not spending too much time on the layout for essentials like a nav bar & footer. They also are great for a responsive web design which is crucial as people are viewing more each day on mobile devices. 

Thanks for Reading,

Shanell A. Spann

Connect with me on:

 

My Site – https://htmlbyshanell.com/

GitHub – https://github.com/HTMLbyShanell

YouTube - https://www.youtube.com/channel/UC3EaLC-43IlJYMcykUBnkog/videos

LinkedIn – https://www.linkedin.com/in/shanellspann/