Introduction
Svelte is a free and open-source front-end compiler created by Rich Harris.
The first release was in November 2016. Version 3.0.0 is currently in use and was released in April 2019. That year, it grew in popularity among developers.
Svelte is used to create reactive web apps and interfaces, which means that changes are visible immediately, similar to react.js or vue.js. It is popular among developers due to its ease of use and high performance.
In Svelte, styling is found right inside the file component. We have three ways in which svelte is styled.
Global style
Component-specific style
Conditional or Advanced styling
Perquisites
Styling In Svelte
Styling in Svelte is different from styling in React, where we have the styling components' index.css or app.css files.
A single file component consists of the Script Tag, Html Tag, and Style Tag
<script>
</script>
<main>
</main>
<style>
</style>
3 ways to Style in svelte
Global style
This style sheet serves as a general set of styles for all the components in our project. It serves as a universal style sheet that is generated automatically as we build web applications created via the command line (CMD). The style sheet can be located in the public folder of our application.
The marked area shows global.css which is created by default
By default, these global styles come with already pre-made CSS.styles styles that were generated during the build-up of the Svelte application. It is your choice to keep the styles or delete them.
Pre-Made Css-Style
HTML {
position: relative;
width: 100%;
height: 100%;
}
body {
color: #333;
margin: 0;
padding: 8px;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
Component-specific styles
These styles are specific to individual components rather than being applied to all components in the application.
The picture above it shows the differences between the two style-sheet
The result from component-specific style
Conditional Style or Advanced style
This style sheet includes styles that are applied based on a particular condition. For example, a style may be applied if a certain value is either true or false.
For example, changing the background-color of the modal using conditional class
Initially set the modal background-color to true.
For it to gain the background-color purple we will give it a class called isModal and set it to false.
<script>
let modal = true;
let isModal = false;
</script>
{#if modal}
<div class="bg-cover" class:bg-modal={isModal}>
<div class="modal" >
<p>This is a modal!</p>
</div>
</div>
{/if}
<style>
.bg-cover{
width:100%;
height: 100%;
position: fixed;
background-color: cyan;
}
.modal {
padding: 10px;
border-radius: 10px;
max-width: 400px;
margin: 10% auto;
text-align: center;
background: purple;
color: white;
}
.bg-modal .modal {
background-color: orange;
color: white;
}
</style>
Result when set to false
To change the background-color of the modal to another background-color:
Set the class isModal to true
<script>
let modal = true;
let isModal = true;
</script>
{#if modal}
<div class="bg-cover" class:bg-modal={isModal}>
<div class="modal" >
<p>This is a modal!</p>
</div>
</div>
{/if}
<style>
.bg-cover{
width:100%;
height: 100%;
position: fixed;
background-color: cyan;
}
.modal {
padding: 10px;
border-radius: 10px;
max-width: 400px;
margin: 10% auto;
text-align: center;
background: purple;
color: white;
}
.bg-modal .modal {
background-color: orange;
color: white;
}
</style>
Result when set to true
Conclusion
Svelte offers three ways to manage CSS styles
Global style
Component-specific or Advanced style
Conditional style.
Resources
If you want to learn more about svelte or improve your understanding of it, these are some resources that can help.
To help manage your time best download this visual studio code extension Svelte for VS Code.
Thanks for reading