Why Script, markup, and style sections in Svelte? - Purpose & Use Cases

The Big Idea

Discover how keeping your code's parts neatly separated can make building web apps feel like a breeze!

The Scenario

Imagine building a web page where you write your JavaScript, HTML, and CSS all mixed together in one big file or scattered in separate files without clear organization.

Every time you want to change something, you have to hunt through the code to find where the logic, the structure, or the look is defined.

The Problem

This messy approach makes your code hard to read and maintain.

It's easy to accidentally break something because the parts are tangled.

Also, browsers don't understand this mix well, so you need extra tools to bundle and fix it.

The Solution

Svelte solves this by letting you write your script (logic), markup (HTML), and style (CSS) in clear separate sections inside one file.

This keeps your code neat, easy to understand, and ready to turn into fast web pages.

Before vs After

✗ Before

<script>function greet() { alert('Hi'); }</script><div onclick="greet()">Click me</div><style>div { color: red; }</style>

✓ After

<script>function greet() { alert('Hi'); }</script>
<div on:click={greet}>Click me</div>
<style>div { color: red; }</style>

What It Enables

It enables you to build interactive web components that are easy to write, style, and maintain all in one place.

Real Life Example

Think of a button on a website that changes color when clicked and shows a message. With Svelte's sections, you write the button's look, behavior, and style together clearly.

Key Takeaways

Separate script, markup, and style keep code organized.

Improves readability and maintenance.

Makes building interactive components simpler and faster.

Practice

1. Which section in a Svelte component is used to write JavaScript logic?

easy

A. <logic> section

B. <script> section

C. <markup> section

D. <style> section

Solution

1. Step 1: Identify the purpose of each section

   The <script> section is for JavaScript logic, <style> is for CSS, and markup is the HTML structure.

2. Step 2: Match the section to JavaScript logic

   Since logic means JavaScript code, it belongs in the <script> section.

3. Final Answer:

   <script> section -> Option B

4. Quick Check:

   Logic = <script> section [OK]

Hint: Logic always goes inside <script> tags in Svelte [OK]

Common Mistakes:

• Confusing <style> with <script>
• Thinking markup is for logic
• Assuming a <logic> tag exists

2. Which of the following is the correct way to add scoped styles inside a Svelte component?

easy

A. <style global> h1 { color: red; } </style>

B. <style scoped> h1 { color: red; } </style>

C. <style> h1 { color: red; } </style>

D. <css> h1 { color: red; } </css>

Solution

1. Step 1: Understand Svelte's style scoping

   Svelte automatically scopes styles inside the <style> tag to the component without needing extra attributes.

2. Step 2: Identify correct syntax

   The correct syntax is just <style> with CSS inside. Adding scoped or global changes behavior or is invalid.

3. Final Answer:

   <style> h1 { color: red; } </style> -> Option C

4. Quick Check:

   Default <style> is scoped in Svelte [OK]

Hint: Use plain <style> for scoped CSS in Svelte [OK]

Common Mistakes:

• Adding 'scoped' attribute which is unnecessary
• Using <css> tag instead of <style>
• Confusing global styles with scoped styles

3. What will be rendered by this Svelte component?

<script>
  let name = 'Anna';
</script>

<h1>Hello {name}!
</h1>

<style>
  h1 { color: blue; }
</style>

medium

A. Hello Anna! with default text color

B. Hello {name}! with default text color

C. Error because style is inside component

D. Hello Anna! with blue text

Solution

1. Step 1: Understand variable interpolation in markup

   The {name} inside markup inserts the value of the variable name, which is 'Anna'.

2. Step 2: Recognize scoped styles effect

   The <style> section styles the h1 with blue color scoped to this component.

3. Final Answer:

   <h1> Hello Anna! </h1> with blue text -> Option D

4. Quick Check:

   Variable interpolation + scoped style = blue 'Hello Anna!' [OK]

Hint: Variables in {} show their value; styles apply scoped [OK]

Common Mistakes:

• Thinking {name} prints literally
• Assuming styles don't apply inside component
• Confusing style scoping with errors

4. Identify the error in this Svelte component:

<script>
  let count = 0
</script>

<button on:click="count++">Click me</button>

<style>
  button { font-size: 1.2rem; }
</style>

medium

A. Incorrect event handler syntax with quotes

B. Missing semicolon after let count = 0

C. Style section must be before script

D. Button tag is not closed properly

Solution

1. Step 1: Check event handler syntax in markup

   In Svelte, event handlers use on:event={handler} without quotes around the handler expression.

2. Step 2: Identify the incorrect usage

   The code uses on:click="count++" with quotes, which is invalid syntax in Svelte.

3. Final Answer:

   Incorrect event handler syntax with quotes -> Option A

4. Quick Check:

   Event handlers need curly braces, no quotes [OK]

Hint: Use on:click={count++}, not quotes [OK]

Common Mistakes:

• Adding quotes around event handler
• Thinking semicolon is mandatory in script
• Believing style must come before script

5. You want to create a Svelte component that shows a message in red only if a variable error is true. Which combination of script, markup, and style is correct?

<script>
  let error = true;
</script>

<!-- markup here -->

<style>
  .error { color: red; }
</style>

hard

A. {#if error}<p class="error">Error occurred</p>{/if} shows red text only if error is true

B. <p>{error ? 'Error occurred' : ''}</p> but no red color applied

C. <p class="error">Error occurred</p> always shows red text

D. {#if error}<p style="color: red;">Error occurred</p>{/if} but style section is ignored

Solution

1. Step 1: Use conditional markup to show message only if error is true

   The {#if error} ... {/if} block conditionally renders content based on the variable.

2. Step 2: Apply CSS class for red color

   Using class="error" applies the scoped style .error { color: red; } correctly.

3. Final Answer:

   {#if error}<p class="error">Error occurred</p>{/if} -> Option A

4. Quick Check:

   Conditional + class with style = correct red message [OK]

Hint: Use {#if} for condition and class for styling [OK]

Common Mistakes:

• Showing message always without condition
• Not applying CSS class for color
• Using inline style ignoring style section