 Good evening everyone. So, my name is Satish Kumar Thakarajan. The topic that I am going to cover is rapid CSS development. So, I am not a CSS developer actually. In fact, I am new to Singapore. This is my first meetup presentation. Thanks for the opportunity. So, I speak about Java Elasticsearch Web Development CACD around Chennai. So, I organized for official Elasticsearch meetup for Chennai and Java and all those two. So, yeah, to get started. So, my relationship with CSS is not like a CSS developer as such. I work with UI teams where we need to come up with UI much quickly and effectively. That is what we do. So, for us, tools is very important so that we can get things done quickly. Basically, we belong to service industry. You know how it works. The earlier that we solve the problem, it is better we get the projects. So, this is what I feel when we do a web development. So, if you consider a HTML, which is a raw content and it is very clear it has a better clarity and JavaScript is more powerful. But when it comes to CSS, CSS is always kind of confusing. So, CSS is kind of, it has its own specific place. The reason being, one, CSS is very simple and that is the complexity that CSS brings. The problem is JavaScript, we develop JavaScript only through JavaScript developers. Not other people touch as JavaScript because they know it will fail. But CSS, everybody touches. B, A, designers, developers, everybody touches it. So, because of that, what is happening is there can be possibilities where you can get started with CSS easily and you can corrupt your project easily with CSS. So, it is very important that we go with proper safeguards before we work with CSS. So, whatever I show you now, this is not because we learn a lot with CSS at least what I felt is. It is not about you learning a lot, but rather you practice a lot. You can understand CSS only by practicing it. That is what I felt. So, these are all the challenges that people face. It is applicable to both HTML as well as JavaScript tools, but specific to CSS. So, these are all the two challenges that we need to address. You need to have a right mix of tools. That is, we should know which tool to be used and what is the purpose to be used. Many of the times, we use all the latest tools, but we place them in a different way and that is what corrupting our project. So, then interoperability. These tools are developed, tested separately as a separate unit. When you combine them together, they don't operate that well and because of that, either you need to take that root or this root and that is the place where the problem starts. So, now let me start with IDEs. I use Visual Studio, but you can use any IDEs, but these are all the basic tools that we expect out of an IDE. So, for example, let us consider, we use Visual Studio code. So, what is the purpose of ID? Before I get into that, so if you consider JavaScript, Java or any programming languages and before we do that, we should understand why we develop CSS now. We don't use CSS as a development tool earlier, but nowadays people call CSS as a development platform because we write a lot of CSS and CSS does a lot of things where we had limitation with CSS earlier, which was done by JavaScript, but now even that part, CSS started to own it. So, it's important that we make a proper CSS. And with IDE, for any, like any other languages, the basic things that you expect is, you need code completions, you need code navigations and then there's a tool called MET, which we will see and surprisingly many people doesn't understand, use that, and then snippets. And then the red color, we'll come to that later, but let us see the first basic ones. So, now, if it is Visual Studio, so these are all the tools that I used. There are a lot of tools. So, first thing is, there is IntelliSense for CSS classes. So, I enable that. So, what it does is, now it will give you the code completion. Say for example, now in my case, I used, say, Bootstrap and then I go to my index.html. It's nothing new. So, you get all the code completion. So, there is no way that you give a different class name that doesn't exist. So, that's the idea. And then there is CSS peak that I use it for navigation. So, now, once you enable it, okay. Now, I can navigate. That's the purpose of CSS peak. Did I enable it? Okay. CSS peak, enabled it. Okay. I need to restart. Go to definition. Okay. So, I can navigate it. And then Emmet. Emmet is a tool that not many people use it surprisingly. But the purpose of Emmet is, Emmet is a tool which is accessible in all the IDEs. The purpose of Emmet is, as a web developer, we have a specific way of thinking. For example, let us think of writing an LI, UL, LI with five elements. So, we say UL and inside that LI, and then you need five LIs. And then you have A inside. So, this is kind of CSS, but this will make your typing much, much easier. Apart from typing, it has a lot of other tools also, but that is, we will have a separate thing for that. So, Emmet is cool for typing. So, it will make your typing much, much faster. And then snippets. I'll come to the snippet a little bit later. Snippet, as it suggests, reusable set of code that you want to say, okay, you want to say, for example, in my case, I created a snippet. A custom snippet, if I say, in my HTML, if I type ULL, this is what I want to create. So, you can say ULL. So, like this, you can write custom snippets. Okay. Now, the problem starts. So, people use IDEs for formatting, limiting, and auto-prefixing. I think it is not a good practice. The reason being, the formatting, limiting, and auto-prefixing, they need to happen independent of your ID. It might happen in your build tool also, like Jenkins CI pipeline also it should happen. So, for that reason, it's always better to use your build tool, like NPM script, webpack, and all those stuff. That's always better. And now SAS. SAS is often either people love it or people hate it. It has its own reasons to be used. It has its own reasons not to be used. So, there are situations where you should use it. There are situations that you should actually avoid it. Okay. Now, let us see what is SAS. As you all know, it's a preprocessor where CSS has such a language. It has its own limitations. It can't give you any other programming language and all those stuff. It's like TypeScript for your JavaScript, Puck for HTML, a CSS is for your CSS. But then, these kind of language for languages always comes with these limitations. Some people complain that I need to get deeper. So, I will use the language as it is. Why should I use another decorated language? Is it like just a sugar coating? That's the thing. But actually, if you dig deeper, it has its own space. Particularly, when CSS3 came, many developers still think that, okay, CSS3 is there. CSS3 supports variables. And we don't need SAS. No. SAS is not just about variables. So, SAS is about, say, if you are, if you are, if you are, if you want to team your system, teaming is still, it is better to be managed with SAS. Because if you look at Bootstrap, Material.css, take any CSS libraries, their teaming is supported with SAS. The reason being, it supports custom functions. A custom functions, you can have functions in, you have functions in CSS, but you can't create your own functions, reusable functions. And custom builds. Custom builds is very, very important when you are building a design system. What do we mean by a custom build? So, consider you are including Bootstrap in your system. Now, in my case, I use SAS. So, this is my CSS. And finally, I have my, I have my NPM scripts running. So, it keeps watching. So, that's your workflow. And now I have my CSS. Now, I want to generate my CSS out of SAS. So, now, if you say, okay, I included Bootstrap. So, now you see Bootstrap is, Bootstrap is part of my SAS, CSS. Now, in Bootstrap, you have two options. It's there in official documentation also, but the purpose is this. Now, you can make custom builds. Consider you are just making a very simple site. That is just a website. So, mostly you are going to deal with layouts. You are going to deal with typographies. You are going to deal with some animations and all those stuff. And you don't need components like farms and all those stuff. You can very well select what you want. Only those items will be bundled in your final CSS, which means the, of course, the file size is smaller, but then you can make one way of looking at this. Yes, the file size is smaller. Okay, it is going to be performance benefit. It is not just a performance benefit. Consider you are making a design system in a product company where you have a lot of, it's like a hierarchical tailgate you are preparing. You have your own tailgate. And below that, you have product specific tailgates. And you want to make sure that this product is safeguarded from the other project. And if you want to create that kind of custom builds, it is always better to have this kind of module systems. For module systems, it's still CSS. That's a better job compared to the CSS modules and all those stuff. But the word of caution is one, if you are working, traditionally, there is something called node SAS. That is what is being used in older Angular projects and all those stuff. So you might have faced this problem. If your organization is kind of restricted, your build systems will not allow to be, allow to download these kind of systems. The reason being, node SAS is not a JavaScript implementation. It's a binary implementation which will be restricted in your firewall. So slowly, NPM is giving native things. For SAS, there is something called Dart CSS. Dart SAS, which is written in Dart, but it compiles in JavaScript, which means it will download without any issues. So if you're starting a new project, always use Dart CSS over node CSS. And then nesting. Yes, SAS is powerful. That's how I started. So the complexity with these tools is, we should know where to stop. So beyond the point, if you go nesting to more than an allowed items, it might complicate your project more than simplifying it, actually. So be cautious about nesting. And one good thing is, there's a concept called immutable CSS, where it's always better. You write one CSS class with one CSS property, and that is not specified in other things, just to avoid side effects. So that's one thing that we can consider. And then stalelint. Stalelint is a linting. So wherever, say for example, now let us consider a case where you have your variables, and then you don't define anything. It doesn't. Now, this is for your kind of static code analysis where if you make a problem, it's always better. For stalelint, you can install it here also. It's better, IDE also notifies its two-way checks. Put that check in your visual studio also, as well as put it in your build tool. It's always better, just to have an earlier feedback. Now, coming to an interesting part, actually. This post-CSS, when people talk about post-CSS, OK, post-CSS is there. We are going to use post-CSS. Post-CSS is not a single tool. Rather, post-CSS is a tool chain that makes a lot of very useful CSS tools work together. For example, we will be using auto-prefixer. Let us consider what is auto-prefixer. Auto-prefixer means let us take, OK, I have included post-CSS already. So let us consider, now this is the app-CSS. Just for simplicity, I am removing all the other stuff. So now let us look at app-CSS. Our CSS is clean now. Now, what is the purpose of post-CSS? Now, let us consider auto-prefixer. So if you make this kind of statements where it is supposed to be converted specific to your browser. So you need to have some prefixes specific to your browsers. So that will be taken care of automatically. Now, coming to the second part of the complexity. In the earliest slides, I told about these tools. They are developed with the different different teams. It's not mandatory that they work together, actually. So now let us take a classic case. Now what I am trying to do is this post-CSS also provides another tool where it says preset. It's like Babel for CSS where you can write future CSS today. And it's kind of a transpiler. It converts your CSS into the browser acceptable form. If you put something like this, it is going to make it this way. That's the idea. Now the problem is you take your SAS, and then you put it here. It will not allow you. The problem is because SAS considers that this is not a valid syntax. Now, we can't make this file and this one works together. But instead, there is another way. The other way is SAS provides you the flexibility to import CSS without an extension. It will be considered as just a plain CSS include. Now with this, the thing is now I have an extra CSS. So here, consider I keep it. And you see it still says it is not allowed. The reason being, so I need to enable post-CSS support. Now it will go. Now the way that we make these two things work is we need to tweak our. So now if you look at it, I'll explain the logic, but you can see the code. So the way that I did this, I put a different tool chain for CSS as well as SAS, where if you change a CSS, it compiles a CSS because CSS is accepting this syntax. And it will put it in my disk with the post-CSS processed. Now this is post-CSS processed CSS. And then that I include in my SAS. And that's how I am able to get that finally into my final CSS. So this kind of tweaking is always needed. But it comes by trial and error actually. So now this is all the things that I learned over the period of time. It's always better we keep developers away from CSS. Is it really possible? Yes, if we go with strict rules, it's still possible. The way that we can achieve that is make your design system as a root and then allow all your CSS toolset to that project. And make your development projects minus CSS tools so that the CSS is not at all available to the developers. And the second thing is snippets. Snippets is a great way of abstracting it. By writing custom CSS, you can make sure that you have a predefined markup. Make sure the developers doesn't use different markup for a same-looking UI. So that you can abstract. And then keep CSS in CSS as CSS. Even though SAS supports all the features, don't write a lot of your CSS in a SAS way. Try to stick to CSS and keep it in CSS. It's always better. And CSS as a design tool. This is one thing that people always take it in a different way, but actually it works. So if you are familiar with this terminology, this terminology was there a few years before, but nowadays people don't use it. There was a moment called no PSD movement. What it says is rather you design your system with a Photoshop sketch or these kind of property tools that actually provides PSDs or JPGs. And then that converts it into another tools. And then finally, it gets into HTML. You do your design inside HTML and CSS itself. So it's an interesting concept. At that point in time, the tools were not that much available. But now, luckily, we have tools like Bootstaff Studio, Webflow, Wix.com, and all those stuff where you can design your websites. And the output of that is CSS and HTML itself. So whenever we see in online, this is the advantage that they put. What you see is what you get is the output. But actually, practically when we use it, there is a hidden advantage that I felt rapid descent. So I did it with two different developers. One is a qualified, certified usability analyst. He has around 15, 16 years of experience. And he has expertise in Photoshop and all these design tools. When I told him this idea of designing with CSS, he was adamant not accepting it. But it took only a year with a lot of projects. And now, when I see it, he's able to develop it relatively faster. And I tried with relatively fresh graduates two, three years And then he was able to. He started with CSS as a design tool. And he can come up with a design much, much earlier. So it has advantage. But you should know the right tools. And you should always make sure you are on top of better practices. And that's how you can use CSS as a design tool. But if it is possible, it really makes a lot of sense. And use tools with basic settings. Be cautious, even though these are all attractive tools. In fact, in post-CSS, there are 200 plus tools, actually. And I felt some of the tools, if you use it, it makes your life way more complicated. It's better to stay away from that. So before you use a tool, start with a smaller team, practice the tool. Once you are confirmed that, OK, this tool actually makes sense for your project, in fact, some of the tools are very specific to your project, and then roll out to the rest of the teams. That's always better. So thank you. Another applause for this very informative talk. Thank you very much.