My Personal Cheatsheet for Writing Clean HTML & CSS

Hey there! I’m Yasfa Yasmin, and let me just say—I love writing HTML and CSS. It’s my jam. But when I first started, oh boy… I wrote the messiest code ever. Like, open-a-div-and-never-close-it type messy. But as I grew and kept learning, I started creating my own little rules—a personal cheatsheet if you will—that I stick to religiously. And today, I’m sharing it with you.

This isn’t just some recycled info you find on every blog out there. Nope. This is based on my personal experience, late-night coding fails, “why won’t this margin work” meltdowns, and all the tiny lessons that helped me level up my skills.

So let’s jump into this deep (and super chill) dive into clean, crispy HTML & CSS writing.

1. Start With a Real Structure: Don’t Just Throw Tags Around

Okay, let’s start with something basic but very underrated: structure.

When I first began, I used to throw <div>s and <span>s all over like confetti. My pages worked, but they were a nightmare to maintain.

Now, before I even write a single tag, I ask myself: “What am I building here?”

If it’s a blog post? I map it out:

• Header with navigation
• Main content area
• Sidebar (if needed)
• Footer

Then I mentally sketch how that layout will look in HTML. This saves a TON of time and helps you stay focused.

Pro tip from me: Avoid using <div>s for everything. HTML5 gave us semantic tags like <header>, <main>, <section>, <article>, <footer>, and more. Use them. Your future self will thank you.

Table: Semantic Tags and When I Use Them

2. Indentation and Nesting—Your Future Sanity Depends On It

Imagine opening a file 6 months later and seeing this:

<div><div><p>Hi</p></div></div>

Yikes. This is how past me coded. But then I learned the magic of indentation.

Every time you nest a tag inside another, hit that tab key. It’s not just for looks—it shows you where you are in the structure.

Here’s how I write now:

<section>
  <article>
    <h2>Blog Title</h2>
    <p>Some awesome text here.</p>
  </article>
</section>

Looks neat, right? Feels like breathing fresh air.

3. Class Naming: BEM Changed My Life

Alright, let’s talk about naming things. CSS can be a jungle if your class names are all over the place. I used to do things like .box2, .blue-title, .main123… basically chaos.

Then I found BEM (Block Element Modifier). Sounds boring, but trust me—it’s a game changer.

Here’s how I name my classes now:

<div class="card card--featured">
  <h2 class="card__title">Hello World</h2>
</div>

Now, even without the CSS file, I can guess what’s going on. That’s the power of clean naming.

BEM helps you:

• Understand code instantly
• Avoid class name collisions
• Make CSS modular and maintainable

After I switched to BEM, debugging my CSS became 5x faster. Seriously.

4. CSS Reset or Normalize? Always Do One

So when you first start with CSS, your page looks different in every browser. Why? Because browsers have default styles.

I learned this the hard way when my buttons looked perfect in Chrome but wild in Firefox.

Now, I always start every project by adding a CSS reset or Normalize.css to make sure I start from a clean slate.

My go-to CSS reset snippet:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Clean, simple, and makes everything easier to style consistently.

5. Keep Your CSS DRY (Don’t Repeat Yourself)

One mistake I used to make? Writing the same styles over and over.

Example:

.btn-blue {
  background-color: blue;
  color: white;
}

.btn-green {
  background-color: green;
  color: white;
}

See how I repeated color: white;? That adds up quickly.

Now I create base utility classes or reusable styles:

.btn {
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

.btn--blue {
  background-color: blue;
}

.btn--green {
  background-color: green;
}

Cleaner. DRY. Way more scalable.

6. Media Queries: Mobile-First is the Way to Go

When I first tried responsive design, I built for desktop first and tried to squeeze it into a phone layout. It didn’t go well.

Now I design mobile-first:

.card {
  width: 100%;
}

@media (min-width: 768px) {
  .card {
    width: 50%;
  }
}

This way, you design for the smallest screen first and scale up. Trust me—it saves you so much tweaking later.

7. Comment Your Code (Yes, Even CSS)

Comments might feel like overkill when you’re working solo, but future you—or a teammate—will be thankful.

I drop comments like this:

/* ======= Header Styles ======= */
.header {
  background: #f8f8f8;
}

It gives context without opening HTML or scrolling endlessly.

8. Avoid Inline Styles Like the Plague

Inline styles = yuck. I used to write stuff like this:

<p style="color: red; font-size: 20px;">Alert!</p>

It works, sure, but it’s messy. Hard to maintain. You can’t reuse styles.

Instead, I now create utility classes like .text-red or .big-text.

9. Use Developer Tools Religiously

If you’re not right-clicking > Inspect Element on every page, you’re missing out.

Dev tools helped me:

• Find that one margin breaking everything
• Live edit CSS
• Debug layout issues

They’re basically your HTML & CSS X-ray vision.

10. Never Stop Refactoring

Even if your code works, it can probably be cleaner.

I revisit my old projects often. And almost always, I find something I could’ve done better.

That’s not failure—it’s growth. Every time you refactor, you level up.

Frequently Asked Questions

Q: Why does my margin or padding not work sometimes?
A: You might be fighting with another style or not using box-sizing: border-box. Also, inspect elements with dev tools to see what’s overriding it.

Q: Is BEM naming necessary?
A: Not “necessary” but extremely helpful for big projects. It’s clean, scalable, and easy to understand.

Q: Should I use frameworks like Bootstrap?
A: For quick mockups—yes. For learning and full control—write your own HTML/CSS first. You’ll learn way more.

Q: How do I organize my CSS files?
A: Start small: base.css, layout.css, components.css. As you grow, explore SCSS and component-based styling.

Wrapping Up: My Final Thoughts

So that’s it. My personal cheatsheet. Built on trial, error, and a lot of late-night Google searches. Clean HTML and CSS isn’t about being perfect—it’s about being thoughtful.

Now when I open my files, they feel like a breath of fresh air. And I want you to feel that too.

So whether you’re just starting or cleaning up your hundredth page, I hope my tips help you write cleaner, better, and more maintainable code.

With lots of HTML love,
Yasfa Yasmin
A girl who fell in love with angle brackets and curly braces <3