loading...
Cover image for 10 reasons why you should stop writing CSS

10 reasons why you should stop writing CSS

workflo30292556 profile image Workflow ・Updated on ・3 min read

In this brief article a want to give you some reasons why you should stop writing CSS and start writing SASS.

At the end the output is the same a cool and well minified .css file.

The order of the list isn't important!

Video version?

10 ~ Syntax

When you write SASS code you will see the difference instantly when you see that the code is a lot cleaner without brackets and semicolons, that matters here are tabs.

Syntax of css compared with sass

When you write nested selectors you will have an easier time watch this 😁️

Clean parent to selector sass compared to css

9 ~ Variables

That thing was really needed in CSS... the use of variables that will help you a lot to manage your code and even for future refactoring.

For example you can create a palette.sass file and store all your colors and then call that variable inside your buttons or divs...

The most beautiful thing in my opinion is that just changing one line of code (where you have defined the color variable) you can change the color of your entire application.

Take a look here πŸ‘‡
Variables in sass compared to css

8 ~ Mixins

Really cool stuff, mixins help you to define reusable portions of code, you can think of them like functions, you can pass a parameter and get back you block dynamically written

Mixins in sass

7 ~ Functions

mmm.. yes mixins and functions are really similar... but, but with functions you can return something with mixins you have only a predefined block of code

6 ~ Imports

Instead of having a super big main.css file with 200000 lines of code split by strange ### signs with titles or worst stuff you could import and export you sass files.

It is not the same thing as the link rel thing cause when you do that you are making an HTTP request :D

You will have a beautiful structure of your code for example with

  • header.sass
  • menu.sass
    • profile_image.sass
  • footer.sass

You can even import CSS files!!

The use of imports in sass

5 ~ Maths

With sass you can do pretty any operation you want, that was a big limitation with only css, now no more!

Math operations with css

4 ~ Logic

Another thing missing in CSS is the logic, with SASS you have the possibility to use if statements, for while.

That will help you to write less code with more ease.

Example of is statement with sass

3 ~ Clean and easy to read code

Maybe i have said it a lot of times but really, with SASS you will see a beautiful code.

Using the combination of mixins imports variables no way that is like css, you code will be really clear to understand.

The only fact that you have different files that contains different parts of you code it will help you when you want to change something in the future.

For example image that you want to change the main color with css... or the font family

2 ~ Faster development

Clean code means fast development, one of the things that IMHO slowed me a lot was semicolons, and another thing... semicolons, i really hated semicolons...

You can use mixins without having to repeat over and over parts of code respecting the dry principle.

1 ~ Production ready

You will get as output a clean css file the way that you want, if you want multiple css files is up to you.

You CSS will be minimized and ready to be imported...

That's it

I hope that you enjoyed this article, it is my first article, i hope that that stuff my help someone and thanks for reading...

Let me know if you want to know how to install sass with a youtube video or things like that...

Thank you for your time, have a good day

We make a things about Computer Science we really enjoy that Check out our channel

Discussion

pic
Editor guide
Collapse
shadowtime2000 profile image
shadowtime2000

CSS has variables though.

Collapse
gsarig profile image
Giorgos Sarigiannidis

Actually, I believe that CSS variables are better than SASS's, for two main reasons:

  1. They can be modified from within media queries. For example, you write some css which use a specific value stored in a variable and then, on the media query, you don't need to repeat the same code if all you need is a few calculations based on a different value. You can just declare the variable again, with the new value.
  2. They can be manipulated with JavaScript, which is a big thing.

Personally, I like SASS and I use it all the time, but I've started using native variables for the aforementioned reason.

Here is a small pen that demonstrates how those two can work together and how easy it is to manipulate them with JS (and a more detailed explanation here).

Collapse
shadowtime2000 profile image
shadowtime2000

Yeah, I agree they are better than SASS variables. I am also pretty sure that some CSS frameworks are using CSS variables to allow you to customize the theme colors which is a bonus when you don't want to style stuff but you want to dynamically change the theme colors.

Collapse
workflo30292556 profile image
Workflow Author

Thanks for sharing you knowledge Giorgos, I totally agree, I didn't know about the root thing... and thanks for the article :)

Collapse
denvercoder1 profile image
Jonah Lawrence

CSS has math too

height: calc(100vh - 50px);
Enter fullscreen mode Exit fullscreen mode
Collapse
workflo30292556 profile image
Workflow Author

Yes i knew that comment was coming hahha, but are not the same as SASS one

Collapse
codingcarter profile image
Coding Carter

Sass variables are definitely not the same as CSS variables. Sass is a pre-compiled language; therefore, you never run sass in the browser. Sass compiles your code into regular css. It doesn't use CSS Variables. Here is an example sass file:

$myColor: #fff;
html
  color: $myColor
Enter fullscreen mode Exit fullscreen mode

and the compiled file:

html {
  color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

As you can see, we don't have to use the CSS variables which aren't supported by all browsers.

Collapse
talentlessguy profile image
v 1 r t l

they work the same

Thread Thread
ucvdesh profile image
Daniel Silva

I believe that what he means is that CSS variable are not as clean as SASS ones...

Thread Thread
workflo30292556 profile image
Workflow Author

As far as i know the don't work in the same way, cause the Sass variable convert for example the color to the hex code... anyway calling $color1 is not like calling var(--color1)... at the end this is only my opinion :)

Thread Thread
talentlessguy profile image
v 1 r t l

"clean"?

idk, those look fine to me.

:root {
 --epic-var: #000
}

p {
  color: var(--epic-color);
}
Enter fullscreen mode Exit fullscreen mode

Enter fullscreen mode Exit fullscreen mode
Thread Thread
ucvdesh profile image
Daniel Silva

$color: #000

Is cleaner than

:root {
--epic-var: #000
}

To me at least

Thread Thread
shadowtime2000 profile image
shadowtime2000

There are tools to make it much "cleaner" for creating CSS variables. SwordCSS is an example.

Collapse
drazik profile image
Cyrille Perois

I don't think writing sass is not writing css. In the end you are using another syntax but all css problems are still here.

The syntax is a matter of taste. Nesting is a very bad idea as you have to mentally rebuild the full selector in your mind.

CSS has custom properties, that are way more powerful than sass static variables.

Math is possible via calc, which works with custom properties and in which you can mix units so it's also more powerful than sass maths functions.

Most of your points are not valid and are easily replaced with native CSS feature. Only logic and function are really useful, but should be used carefuly. Because you can have easy to read sass code that generates garbage css (for example nesting that encourages looooooong selectors that could actually have been a single class)

Collapse
workflo30292556 profile image
Workflow Author

The title was only a way to improve my "clickbait" skills πŸ˜…οΈ

Collapse
mmcshinsky profile image
Michael McShinsky

I prefer to have the brackets (curly braces). That to me is cleaner and easier to understand the scope and intent of a given block of css/scss/sass.

Collapse
codingcarter profile image
Coding Carter

Me too and the {} are called curly braces

Collapse
mmcshinsky profile image
Michael McShinsky

☝️

Collapse
workflo30292556 profile image
Workflow Author

I have used scss for a while but right now i find myself loving sass, i think the thing that i hated the most was without doubt semicolons πŸ˜‚οΈ

Collapse
piotrlewandowski profile image
Piotr Lewandowski

The thing with Sass syntax is that it's not a valid CSS, while SCSS syntax is a superset of CSS. You can copy and paste any CSS and it'll work immediately in SCSS, without any need of reformatting, removing curly braces, etc... And let's face it, SCSS syntax is more popular than SASS (just look at the most popular libraries using sass)

Thread Thread
workflo30292556 profile image
Workflow Author

Imho it's not about popularity, but about how the help me with my work, I've really enjoyed writing PUG code and then copy and pasting it in SASS and that helped me a lot!

Collapse
synapse709 profile image
Tim Titus

I prefer the SCSS version to SASS. I've noticed other devs prefer it, too. For some reason I find it easier to read. Also, mixins are overrated and hard to manage (the same reason Vue did away with them in js for Vue 3.0).

Collapse
nikhilmwarrier profile image
Nikhil M Warrier

I, a CSS purist, take this as a personal insult....
Just kidding. Awesome article, though CSS does have variables(custom properties) and calc()

Collapse
workflo30292556 profile image
Workflow Author

hahhaha yeah but i still prefer the $variable instead of var(--variable), in my opinion is much cleaner... Thanks for sharing

Collapse
nikhilmwarrier profile image
Nikhil M Warrier

Hey! I know...
A wild guess: you're a PHP dev? PHP variables also look like that...

Thread Thread
workflo30292556 profile image
Workflow Author

Nope More into Vanilla Js ExpressJs and company hahah you?

Thread Thread
nikhilmwarrier profile image
Nikhil M Warrier

Ook...

I have tried PHP. Ruby seemed stupid. And don't speak of NodeJS. The only time I was really frightened was when I saw NodeJS with a knife trying to steal Ruby Gems in one of my scariest nightmares...


[Beware: self plug]

I am working on a CSS library called FluidCSS
Feel free to check it out and please do contribute if you are interested...
It's in v0.5 currently....
Links:
nikhilmwarrier.github.io/fluidcss/
github.com/nikhilmwarrier/fluidcss

Thread Thread
workflo30292556 profile image
Workflow Author

Hahahaa

Really cool FluidCSS thanks for sharing :D

Collapse
promikecoder2020 profile image
ProMikeCoder2020

Lots of amazing reasons! But remember that CSS also has math which is more advanced since it can do calculations between different units. About variables: yes CSS does have variables that are much more powerfull with default values and dynamic characteristics. But this has a performance overhead unlike sass variables that are compiled into normal values at compile time

Collapse
joachimzeelmaekers profile image
Joachim Zeelmaekers

Very nice list! I’m a big fan of SASS. The only danger in SASS is that it can get pretty messy to refactor. If you don’t take on a certain structure like BEM it can be challenging in large codebases.
Nicely done! πŸ’ͺ

Collapse
ecyrbe profile image
ecyrbe

If you are using a component based framework, you should forget css preprocessors altogether.

Css in Js frameworks are the future. They allow you to use conditions, Js variables, composition, scoping, theming, etc.

If you do REACT take a look at JSS, styled components, emotion, etc.
They still generate css in the end.

Collapse
wattafot profile image
wattafot

what about tailwind?

Collapse
workflo30292556 profile image
Workflow Author

Personally i prefer to create or reuse my set of classes :)

Collapse
morewings profile image
Dima Vyshniakov

How about Less, Stylus, PostCSS or Styled Components? Should we also abandon them?

Collapse
workflo30292556 profile image
Workflow Author

I don't think so, i can't comment about those cause i neve used them only heard about them, but i could say in my opinion that it will be always better than writing clean css...

Collapse
morewings profile image
Dima Vyshniakov

So, you didn't use any pre- or postproccessor except SASS and decided to write an article, giving everybody opinionated advice regarding switching to SASS. I think you should invest more efforts into building prior knowledge before writing an article or tutorial. Otherwise, the value of the article is close to zero. Sorry.

Thread Thread
workflo30292556 profile image
Workflow Author

If you read carefully the title i didn't say the best pre-processor but it was about why people should switch from css to sass; I said that i haven't used them but that doesn't mean that i haven't read about them. Everyone do his research but that doesn't mean that you have to use 300 things before you talk about one in particular.

Collapse
george profile image
George Nance

Good article. I like your writing style but I disagree with the premise.

I wrote a reply to it

Collapse
workflo30292556 profile image
Workflow Author

Wow thanks George it's always a pleasure to learn :) I will absolutely read it

Collapse
manishfoodtechs profile image
manish srivastava

Nice article. The way you presented .... Wonderful.

Collapse
workflo30292556 profile image
Workflow Author

Thank you Manish :D

Collapse
isarisariver profile image
Marian Beck

Great article, thanks. Bookmarking this, since I've been planning to try SASS soon

Collapse
workflo30292556 profile image
Workflow Author

Wow thanks Marian :D