Styling in Riot.js

Ray Viljoen
A free video tutorial from Ray Viljoen
Practical Courses Designed for Learning Efficiency.
4.7 instructor rating • 7 courses • 57,299 students

Lecture description

Style Riot components with modular, scoped CSS.

Learn more from the full course

Master Riot v3: Learn Riot.js from Scratch

Go from zero to Master with the React-inspired, Riot.js library. A powerful, yet flexible, javascript view layer.

03:15:03 of on-demand video • Updated

  • Create customised Riot implementations specific to the project they are working on.
  • Understand, in depth, each individual aspect of the Riot API.
  • Have the know-how to implement Riot in practical ways to build rich, real-world web applications.
  • Know how to use Riot both client-side & server-side.
  • Implement dynamic HTML5 routing, using the built-in Riot router.
  • Write more logical & modular Javascript via simple Riot design principles.
English [Auto] In the previous lessons we applied some styles to our tags using the main style sheet. And whilst this is perfectly fine we might find that to maintain the modularity of a riot components. It's better to bundle components styles into individual tags fragmenting styles might seem strange at first but Boulding front end components this way means they become truly reusable and much easier to maintain. We'll continue with the code from that previous video by moving our global styles into the relevant tag files open style Dotsie SS and cut that admen use a class styles save So a page reverts. Add this to a style task inside of our use of group tag. We could have added this to the user tag as well but seeing as the use of group tag dictates the class being styled it makes a bit more sense having it inside this tag. Now save this tag file and the styles return pretty straightforward but what I wanted to demonstrate here is the fact that Riot's styles are scoped to the tags in which they are declared. For example inside this user group tag we have an H-1. We also happen to have an H-1 in our index not a DML file so I'll create a CSSA Lechter of H-1 meaning all H-1 tags of course make that bold and italic safe and the only H-1 tag that has those styles applied is the one inside of our tag. So that's what scoped CSX refers to ryot basically allows us to not only keep our ICSA is completely modular but also removes the need to think about global styles when adding CSSA to tags. Now generally the first concern with patching styles into tag files like this is duplication and fragmentation of our success which can negatively affect performance. Well riot again is clever with this to demonstrate. I'll add another bit of random styling to the user tag give the strong tag a left margin save that and inspect the page source or more specifically the head element and in we see riot is automatically taken on our tag styles and bundled them into a single style tag in the header. So no issues there. The final bit of right styling functionality that I want to show is targeting where this VSS gets generated. For example let's say you want the supplied as the very first hearsays in the head. You can do the following. Inside the head tag. Create a style tag way you want. This ryot generated styling to be placed and give it a type of ryot save that inspect again. And this time our textiles gets added in the exact location so allowing us to control exactly where we want these ryot textiles to be placed.