Before I was a developer, I was an English major. I cared about how sentences flowed, how meaning was layered and could sometimes be buried and lost.
Turns out, writing clean code taps right into those same instincts.

🧼 What Clean Code Means to Me

My brain can easily be thrown into a state of chaos, and poorly written code can be very chaotic. For me, clean means:

  • Semantic at very least
  • Modularized if possible - chunks of code broken in into reusable pieces
  • Coherent - const items means very little but const blogPosts has clear meaning.

🍜 Eating Div Soup: Semantic HTML

Have you ever opened a page file only to find hundreds and hundreds of lines of divs — a styled banner, a row of buttons, some images, a form —

after
after div-estating
?

Worse still, there are no comments, so it's just an abyss of HTML with no real visual landmarks. My brain looks for structure to latch onto. It finds none.

When I was learning to code at Turing, they called this Div Soup — IYKYK — and they were right.

:style="{
            fontSize: '32px',
            fontWeight: 'bold'
          }"
        >
          Welcome
        
      
    
    
      
        
          
            :style="{
              backgroundColor: 'blue',
              color: 'white',
              padding: '10px'
            }"
          >
            Click Me
          
          
            :style="{
              backgroundColor: 'green',
              color: 'white',
              padding: '10px'
            }"
          >
            Or Me
          
        
      
    
    
      
        
          
            
              
                type="text"
                placeholder="Your Name"
                :style="{
                  border: '1px solid gray',
                  padding: '8px'
                }"
              />
            
            
              
                type="email"
                placeholder="Your Email"
                :style="{
                  border: '1px solid gray',
                  padding: '8px'
                }"
              />
            
            
              
                type="submit"
                :style="{
                  backgroundColor: 'purple',
                  color: 'white'
                }"
              >
                Submit
              
            
          
        
      
    
    
      
        
          
            
              
                src="banner1.jpg"
                alt="Banner Image 1"
                :style="{
                  width: '100%',
                  height: 'auto'
                }"
              />
              
                src="banner2.jpg"
                alt="Banner Image 2"
                :style="{
                  width: '100%',
                  height: 'auto'
                }"
              />
              
                src="banner3.jpg"
                alt="Banner Image 3"
                :style="{
                  width: '100%',
                  height: 'auto'
                }"
              />

🌟 Clean, Neat, Semantic Version:

Let's strip out some of that

soup and replace it with some semantic HTML elements!
class="page-container">
     class="page-header">
      Welcome
    

     class="button-group">
       class="primary-button">Click Me
       class="secondary-button">Or Me
    

     class="form-section">
      
         class="form-group">
           for="name">Name
           id="name" type="text" placeholder="Your Name" />
        

         class="form-group">
           for="email">Email
           id="email" type="email" placeholder="Your Email" />
        

         type="submit" class="submit-button">Submit
      
    

     class="banner-gallery">
       src="banner1.jpg" alt="Banner Image 1" />
       src="banner2.jpg" alt="Banner Image 2" />
       src="banner3.jpg" alt="Banner Image 3" />

Ahh, that's nice isn't it? It's much easier to tell what elements are making up this page. It utilizes

elements showing how the page is organized. The elements now have a .

We can go further though.

🧹 Modularized, Neatly Organized Version

What if we put the page header code into it's own component file? We could use it on any page!

📄 PageHeader.vue

class="page-header">
    Welcome

Oh, and the buttons, well, heck let's just refactor each piece into a component.

📄 ButtonGroup.vue

class="button-group">
     class="primary-button">Click Me
     class="secondary-button">Or Me

📄 FormSection.vue

class="form-section">
    
       class="form-group">
         for="name">Name
         id="name" type="text" placeholder="Your Name" />
      

       class="form-group">
         for="email">Email
         id="email" type="email" placeholder="Your Email" />
      

       type="submit" class="submit-button">Submit

📄 BannerGallery.vue

class="banner-gallery">
     src="banner1.jpg" alt="Banner Image 1" />
     src="banner2.jpg" alt="Banner Image 2" />
     src="banner3.jpg" alt="Banner Image 3" />

Now, let's see how the page template would look.

<span class="na">setup>
// Import your modular components
import PageHeader from "@/components/PageHeader.vue";
import ButtonGroup from "@/components/ButtonGroup.vue";
import FormSection from "@/components/FormSection.vue";
import BannerGallery from "@/components/BannerGallery.vue";



   class="page-container">
     />
     />
     />
     />

Is it easier or more difficult to tell what the page is made of? Pretty darn clear, right? We look at the template and tell a quick tale of what makes up the page, at a glance:

  • First there's a page header
  • Next there's a button group
  • Then comes the big bad form section
  • And then the banner gallery rallied at the end
  • And the page lived happily ever after...

🏗️ Where Most Pages Land

Of course, it doesn't always make sense to create a new component file for every tiny section, especially if it's only used once on a single page.
In reality, most page templates land somewhere between Example 2 (neatly organized semantic HTML) and Example 3 (full modularization).

And that's okay.

🛠️ In the Real World

As a developer, you’re guaranteed to encounter a little (or a lot of) Div Soup chaos at some point.
And most of the time, you won’t be asked to refactor a mess into a clean, modular masterpiece — you’ll be tasked with patching, fixing, and building on top of what's already there.

But — whenever you have the chance to make things a little clearer, a little more structured, or a little more readable for the next person (even if that person is future-you) — it’s worth doing.

Clean code isn't about being perfect.
It's about being thoughtful.

And thoughtful code tells a clearer story — one that's easier to read, easier to build on, and a whole lot nicer to live inside. 🧹📚✨