Made withSvelteClip

Svelte Tutorial for Beginners #10 - CSS & Conditional Styles

N

Net Ninja

Creator on the Svelte channel

Watch on YouTube ↗

36K viewsApr 8, 20209:45 runtime

Explore the fundamentals of styling Svelte applications by learning the two primary methods for applying CSS. This tutorial covers how to use a single global stylesheet for app-wide styles and how Svelte's component-scoped styling works to prevent CSS conflicts by creating…

Chapters

#svelte#clip#frontend

Styling in Svelte

Svelte offers two primary ways to apply CSS to your application: globally and locally (scoped to a component).

Global Styles

Location: A central stylesheet, typically public/global.css, is created with new Svelte projects.
Scope: Styles defined here apply to all components across the entire application.
Implementation: The global stylesheet is linked directly in the main public/index.html file, which is the entry point served to the browser.

/* public/global.css */
body {
  background: #eee;
  color: #777;
}
h4 {
  color: orangered;
}

Component-Scoped Styles

Location: CSS is written inside a <style> tag within a .svelte file.
Scope: These styles only apply to the elements within that specific component.

Important
Svelte prevents CSS conflicts by adding a unique, randomly-generated class to styled elements during compilation. This means a main selector in App.svelte will not affect a main element in Modal.svelte.

How It Works: Svelte processes all component styles and bundles them into a single public/build/bundle.css file, but with the unique scoping classes applied to each rule.

<!-- Modal.svelte -->
<style>
  .modal {
    padding: 10px;
    border-radius: 10px;
    background: white;
  }
</style>

Conditional Styling

Svelte provides a clean directive for dynamically applying a class based on a JavaScript expression.

Syntax: class:className={condition}
Functionality: The className is added to the element only if the condition evaluates to true.

Tip
This is extremely useful for creating component variations, such as different color themes, sizes, or states (e.g., active, disabled, promotional).

Example: A Promotional Modal

We can create a different style for a modal by conditionally applying a promo class to a parent element.

Define a state variable in the component's script.
```
let isPromo = true;
```

Apply the conditional class directive in the HTML.

<div class="backdrop" class:promo={isPromo}>
  <div class="modal">
    <!-- Modal content -->
  </div>
</div>

Add CSS to target the new class.

.promo .modal {
  background: crimson;
  color: white;
}

Now, when isPromo is true, the modal will have a crimson background and white text. When it's false, the conditional styling is not applied, and it reverts to its default style.

Global vs. Component-Scoped CSS

Okay then. When it comes to styling our project, there's a couple of different ways that we can add CSS. The first way is to add CSS to a global stylesheet, and that's a stylesheet that will apply styles to all of the different components, no matter how many different components we use. Now, that global stylesheet is created for us when we create a new Svelte project, as we did, inside the public folder right here. We can see global.css. And when we create a new Svelte project, it automatically populates this with some basic styles for us right here. You can keep those or you can delete them. I'm going to keep them, but the important thing is that these styles are global and they're going to apply across the board to any different components that we use. For example, if we have a paragraph style in here and say text-color: red or something like that, that is going to apply to every paragraph we have in different components. It doesn't matter where it is, it's global.

Okay, so let's create some global styles and then we can move on to the second way, which is local styles.

Implementing Global Styles

But first of all, let's have some extra styles down here. And by the way, this global.css file, that is loaded in from the index file over here. Right here, remember this index.html file is the thing that we serve to the browser right here, and then our components are dynamically injected, right? But this ultimately is the HTML page that we serve to the browser, and that links to the global stylesheet. You could create more inside the public folder if you wanted to. For now, we don't really need that, so I'll just keep it in here.

Okay then, so let's target the body tag, and I could add these to the body selector up here and everything, but I just want to keep everything extra in one place so it's easy to keep track of for us. So I'm going to say the color is going to be #777, kind of like a mid-tone gray. And then the background of the body is going to be #eee. And make sure you spell background correctly. And then also the padding is going to be zero and the margin is going to be zero as well, just in case there is any of that, we're stripping it back.

Let's also style the h4. Remember the h4s at the minute are these things right here, the names. So let's come over here and we'll say that the color of these is going to be orangered like so. And then finally, let's style buttons. Remember we have our buttons over here. Let's style those, and I'm just going to say the background is going to be white. Okay, so save that and come over here. Let's take a look what it looks like. And that looks a little bit better, I guess. Still not going to win any design awards, but that's not the point. I just wanted to show you that if we add styles here, it's going to target anything inside our application. So anything from the modal component at the minute, or anything from the app component. Okay.

How Scoped Styles Work in Svelte

So that's the first way of creating styles globally using a global style sheet. The second way is to add component-specific styles because remember, each component can have a style tag down here. And automatically, we have these styles plus a couple more, which I deleted earlier, when we create a Svelte app inside the App.svelte component.

So these styles right here are just going to style what's in this component HTML. So we have a main tag here, it would style that. But if we go over to Modal and I added a main tag somewhere and then some content inside that, then the styles over here are not going to style these things right here. These are component-specific. It's only going to style what's in this component.

Now, Svelte does this by creating unique classes for the elements that we style in each component. And it does this when it compiles all of our code, and then it bundles all of the component styles together from different components in a single bundle file. And we can find that inside the public/build folder over here: bundle.css. And you're going to notice all of these special characters or rather random strings attached to classes. That's making them component-specific so they don't clash with one another. Because if we have some kind of selector targeting mains here, and one also over here targeting main tags, then if they were just bundled together as a main selector in the bundled CSS, then they would clash with each other. Svelte, when it compiles our CSS, adds on these unique little strings next to them so that each selector from each component is specific. Okay, so that's how it works.

Now we know that, let us style up this modal inside the Modal component. So first of all, I want to style up this backdrop. So let me select that backdrop. And inside here, I'm going to say the width will be 100%, so it goes across the whole screen. The height is also going to be 100%. The position will be fixed, so it's going to take up the whole screen. Oops, let me do this correctly. That should be percent and semicolon. And then we also want to give this a background, and the background is going to be RGBA so that we have an alpha channel. That's what this A is, an alpha channel to determine how transparent this background is. And it's going to be 0, 0, 0, that's black, but then we're going to apply an opacity of 0.8, so it's semi-transparent. And if I save this at the minute and come over here, we can see now we have this kind of semi-transparent background. And this is going to be the background of the modal so that it fades out the rest of the website and the modal kind of sticks out a little bit and we can see it better. So that's the backdrop styled.

Now let's move to the modal itself, so .modal. And inside here, I'm going to say the padding is 10 pixels, and the border-radius is going to be 10 pixels as well. That's to make the edges or the corners softer. The max-width of this modal is going to be about 400 pixels, so it doesn't go too wide. The margin is going to be 10% top and bottom, so it comes away from the top a little bit, and auto left and right. That will position it in the center because it's going to automatically apply margin to the left and right and take up the available room. The text-align is going to be center, so all the text inside it will be centrally aligned. And then finally, the background of the modal itself will be white. So if we save that and come over here, we can now see this modal is looking a lot better.

Okay, so that's how it looks at the minute. And remember, this only shows if showModal is true. If it's false, and we're going to learn how to toggle this later, then it doesn't show. Okay, so let's change that back to true because I want to show you one more thing when it comes to CSS.

Conditional Styling with Svelte Classes

And that is how we can use conditional classes. So if we want to apply a class to something based on a certain condition, right? So for example, imagine we have an option for our modal whereby it could be a special type of modal that is a promotional modal, it's got some kind of promo message on it, and we want to style that differently. We want to apply a specific class to that. So what we could do is come to the backdrop and we could say class:promo is equal to some condition.

Now, this condition is either going to evaluate to true or false. Let me create a variable called isPromo up here. I will explain this in a second. Set that to true. And then we'll pass that in here: isPromo. So what is this going to do? Well, it's going to apply a class of promo—this is the class name we want it to be or we want it to have—if whatever is inside here evaluates to true. So if this evaluates to true, which currently it is, then this div right here will get an additional class of promo. If I change this to hello, it would get the class of hello. So this is the class you want it to conditionally have right here. I want it to conditionally have the promo class, but it will only get that if isPromo is true.

So if I save this, check this out. If I right-click and inspect, we can see over here we have this promo class right here. Okay, so that's because isPromo is true. If we change this to false and save it, come over here, we no longer have that promo class. Okay, so that's how we can conditionally apply a class to an element. Okay, so we're going to set this to true again, like so. At the minute, this is going to be a promotional modal. And then down here, let's style this. So I'm going to say .promo .modal, so the modal inside the promo class. The background is going to be crimson, so like a ready color. And then the color of the text is going to be white. All right, then. So now we can see this modal looks different if it has that class. If we change this back to false, save it, we can see that now it's the standard white modal.

So again, we're going to learn how to pass in these values or toggle them later on to make the functionality of this modal correct. But for now, we're just worrying about styling it. So now we have our modal styled. Next, we're going to look at how to pass data into the components using props.