Greetings people of the Dev Community! It has been a while since I last posted on this blog, and to be honest not much has changed.
I was working on a small project with my friend, that required a lot of styling to be done in CSS, and not all of it could be classless. Then I was met with a developers worst nightmare, a freakishly long CSS file that encased all sorts of .classes and #ids. Even though I had made all the class names, they were scattered throughout the file and there was no sense of organisation. Additionally, the CSS variables I had created were not organised either.
So, after living through that nightmare, I came across Sass. I had known about Sass for a while, but had been putting off learning it. I thought it would be something that is too similar to CSS, but with a couple of short YouTube tutorials and some help from w3 Schools, I was an expert. Okay, maybe not expert, but I can make my way around Sass.
Sass uses most of the same syntax as CSS and is therefore easy to learn if you have some experience with CSS. Sass is an extension for CSS, and it reduces the repetition caused by CSS, which is why many choose to use it. Stylesheets can sometimes get very long, and CSS does not have much to offer in terms of shortening them or making them easier to read through. Sass adds features like variables, nested rules, mixins, imports, inheritance and built-in functions, which are all things that CSS does not have.
Now, I'm not going to give you a whole tutorial here, but you can very easily learn the basics of Sass in just a couple of minutes. I'll leave some links for some quick learning down below.
Thanks for reading.
Top comments (7)
I like Sass - I think it provides useful features that can benefit most projects, even if they're not "CSS heavy". Also considering that it's relatively easy to pick up, is a superset of CSS, and that most popular development environments have good support for it - there's really no real harm in using it, especially over plain CSS.
Personally, Sass has a lot of features that I rarely or never really needed in real projects, but there are others that truly make styling a lot easier; nested rules, in particular, is a feature that's made my life so much easier.
(And, to be fair, JavaScript has a lot of niche features that I rarely or never really needed in real projects, too).
It's not the main topic of discussion, but while we're at it I'll add that I strongly recommend learning and using modules if you're using CSS or Sass. Like Sass, modules are easy to pick up, and boost the code's maintainability and clarity (whether CSS or Sass) in almost any project. By separating styles into modules, they're easier to track, work with, and optimize - just as is the case with JavaScript. Stacks that use Sass also often use modules, and vice versa, so if we're talking about the value of Sass - modules are a significant part of the picture.
Finally, it's been said here, but it should be stressed that Sass is by no means a replacement for CSS, and to make the best out of it you should have a strong grasp of CSS fundamentals. The same goes, by the way, for Tailwind, bootstrap, and any other web UI/styling related library you'll come across.
yes, but not before learning the fundamentals of vanilla CSS first.
yep, of course
If you are working on a large project sass would be very helpful
I found Tailwind more fun. You can stay in your HTML, and using the Tailwind docs, learn about the fundamentals of CSS while you work. That, and the "CSS that makes this HTML look the way it does" is with the HTML; there is no separate file to link your brain too, it's just right there, no need to hunt for classes. This will sometimes cause googling of how certain styles work, and you'll have learned enough that when you go back to SASS, you'll have a lot more understanding of why they do certain syntax.
However, SASS is extremely powerful and provides a more "programmer friendly" CSS, so definitely worth learning a little bit even if you don't plan on using on future projects.
This isn't aimed directly at you, I am trying to make the point of how dangerous your advice is.
Sass is a superset of CSS - like typescript for JS. It is essentially a pre build time compiler which most people who are proficient in CSS can benefit from very rapidly - it has shortcuts, mixins, and variables which are compiled into your stylesheet, rather than loaded into your doc at runtime to give just a few features.
Tailwind teaches you one, currently popular, method of applying classes. There is no manual styling involved and while you can make your own rules you still need to understand the fundamentals first, and know what their particular shorthand means. It is dangerous to say "there is no separate file to link your brain too" - I presume you are using a CDN, and aren't getting full use of the Tailwind "magic".
Tailwind is not the styling language of the internet. If you have a strong understanding of CSS (and I include post CSS as part of the CSS rabbithole) Tailwind is just bootstrap or any other library, with just in time purging and imports added to make a framework, it sounds like you aren't taking full advantage of these features.
There is a reason to learn html, then CSS, then JS, then frameworks, then libraries in that order. Each have benefits over others in specific usecases, but if you skip from HTML to a framework or a library then you will have to learn from the ground up when there is a new kid on the block.
I totally agree with the sentiment of your argument and in fact Tailwind is a sort domain specific language. We should probably be a bit selective with what we use daily. And yes if anything you’d want to really know the core underlying tech absolutely 👍🏽