A better way to style your apps

I always had an interesting relationship with CSS coming from a back-end development background where I did most of my work in real programming languages like Java CSS seemed like this silly little language I could master in a weekend however when building products for real use cases you'll soon realize that UI and ux play a way bigger role in the success of a solution than you initially imagined as a consequence I started spending more time working with CSS it was interesting to discover that despite being fairly straightforward there is a lot of complexity in writing styling rules let me explain writing these rules with no structure and planning can only take you so far the real headaches start when you are attempting to write reusable components in a scalable and maintainable manner so in the past I did it all the bad methodology object-oriented CSS SAS and CSS modules for a long time the scoped CSS module approach was my Preferred Choice but then I discovered Tailwind after a slow start and a lot of concerns I was able to see the value in atomic CSS and utility classes don't worry this video is not about Tailwind but you can find the recommendation in the top right corner if you are interested in that today we look at UNO CSS a lightweight flexible and performant atomic CSS engine I already initialized the basic front-end project and for the next few minutes we look at to know CSS internals while building some UI components by the end of the video you should have a pretty good understanding of the tool and hopefully you'll find Value in adding anatomic CSS engine in your next project there are a couple of Core Concepts I'd like to clarify since these are the building blocks behind Uno CSS keep all this in mind since I believe there is a paradigm shift in the way we style our apps and these ideas will be very valuable moving forward by the way all this information is also laid out in detail in a blog post authored by the creator of Uno CSS concept number one Atomic CSS this is the idea of creating single purpose classes with the very few lines of CSS each class start getting a very specific visual effect let's look at an example to illustrate this in action say we have a button class which will apply the following styles to our Dom element a purple background a white text color and a border radius this works well and is straightforward but what happens with all the elements in your app which might have the same border radius well you'd probably Define a CSS variable and apply the same CSS rule over and over again for all the needed elements in atomic CSS we are going to split these rows in separate classes so we'll have a BG purple class for our background rule a text white class for the text color and around class for our border radius this looks like a bit more work but now any element that needs a border radius can simply use the round class of course this can be extrapolated to all CSS rules so instead of spending time writing the same CSS rules again and again you'll end up not touching any CSS and style your compound components directly via utility classes the real power of this approach is revealed when a tool such as Uno generates all those utility classes and styling rules for you this brings us to the second core concept behind Uno CSS on demand CSS generation again let's look at an example to understand this unified solutions to handle paddings and margins are common in any type of CSS Library Atomic CSS tools solve this very easily they have a default spacing scale which is iterated and Associated classes are generated in return however this will generate classes and spacing rules you will never use so a subsequent purging or cleaning step has to be performed to get rid of unnecessary rules Uno avoids all these extra steps by analyzing the e-news classes and only generating the necessary rules based on the input OK let's take a deeper look at the code I've been working on at the beginning of this video you've seen me adding the Uno preset in the vidconfig file presets at the heart of one of CSS they let you make your own custom framework in minutes there are a bunch of official presets and even more Community ones we'll get back to some of these in a second since they can really change and improve your Dev experience you'll see that the most classes I'm using are pretty self-explanatory since one of CSS is an engine it is able to identify custom classes I am using and generate the appropriate rules for me so while you would not find the margin 45 pixels or a BG light gray class in their documentation Uno is not enough to understand what I want in these specific situations now let's have a serious conversation if you are like me a few months back you are probably wondering why would you ever follow this approach I agree these HTML templates are starting to look like a mess however if you didn't close the video by now and you are still watching there might still be a chance I can convince you that utility classes and atomic CSS are worth your time one of CSS acknowledges that steep learning curve you have to go through in the first weeks and it provides both an online playground and an interactive documentation this allows you to search for any type of CSS Rule and find the associated utility classes I for one found this transition from the known CSS rules to utility classes names I had to guess the most frustrating step in working with Uno believe me though after a couple of days the guessing is not needed anymore and the class names will become familiar now for the messy templates you could either use an ID extension to improve the dev experience or in some cases identify repetitive class groups and Define shortcuts for them instead we'll get to preset in a second but first I want to showcase the flexibility behind shortcuts on one hand say you are not happy with the name of a utility class this becomes even more frustrating when you need to use this class all over your project but the solution simply create a utility Alias on the other hand we can create Dynamic shortcuts which will generate some pretty smart classes for us with one simple new entry in the shortcuts configuration we can easily enable classes and results such as these ones pretty impressive right well I'm not done with variant groups you can group together classes with common prefixes and make your templates more compact but what happens when we are sending all these HTML to the client surely the resulting HTML is way longer than it needs to be fear not by simply adding the compile class Transformer in the config file owner will be able to compile a group of classes into a single class so HTML looking like this will end up looking like this in most CSS projects there are two basic requirements you'll have to implement regardless of the spec first you'll need a quick way to force all browsers to render elements in a consistent manner normalize CSS is a fairly common solution and we can import this in our project via the Uno CSS reset package second of all most of the time you need a way to add some Global General CSS rules we can easily do this as a PreFlight in the configuration file ok now for the real fun part we look at UNO presets let's start with an easy one more stuff on the knot you'll use Google fonts in your projects in Uno we can set this up in just a few sec seconds I am importing the web font preset and then simply defining both default and custom fonts from the Google provider in return the engine will take care of all the Google Imports for us and will Define all the necessary classes as a result once the preset is configured I can simply start using my custom fonts icon support is another common requirement in most UI work the icons preset is extremely powerful and the chances are once you'll get used to it all Alternatives of working with icons will seem a waste of time Uno uses iconify as its data source for icons once you have the dependencies installed and the correct configuration in place you'll gain access to all the utility classes you should expect by now hey by the way if you are finding this type of content useful please consider liking this video and subscribing to the channel back to presets I mentioned multiple times the flexibility of one out to prove this let's take a look at the attributify mode for Uno CSS again we can easily install and set this up in the configuration file as there is result we can now use HTML attributes to style our components this option is controversial and some would argate goes against the utility classes approach however I find this option interesting and I can see how it might be appealing to better group together The Styling information in the same line the taggify preset allows you to take things one step further and use HTML tags to embed your CSS Styles if you decide to go on this route please take into consideration using a tag prefix since you might run into conflicts between Uno CSS tags and other custom components you might add further down the road let me know in the comments what your opinion is about this engine and if you see Ono CSS as a real alternative for writing CSS in your project until next time thank you for watching

Channel: Awesome

Views: 18,826

Keywords:

Id: kh3j1Jgja00

Length: 8min 44sec (524 seconds)

Published: Wed Feb 22 2023