Code Organization & Optimization

1. Welcome and Icebreaker:

• Icebreaker: “Have you ever worked on a project where the code was hard to read or maintain? What made it difficult?”

2. Outline the Session:

• Agenda:
  • Code organization methodologies (like BEM)
  • Performance and maintainability tips
• Learning Outcomes:
  • Organize CSS for large projects
  • Optimize code for speed and clarity
• Structure:
  • Theory, live coding, and hands-on practice
  • Interactive Q&A

3. Concept Explanation:

Organizing code makes it easier to maintain and scale. BEM (Block Element Modifier) is a popular naming convention. Optimization includes minimizing CSS, using efficient selectors, and reducing redundancy.

4. Live Coding Demonstration:

Example of BEM and optimization:

<style>
.button {
  background: #4caf50;
  color: #fff;
  padding: 10px 20px;
}
.button--large {
  font-size: 1.5em;
}
</style>
<button class="button button--large">Click Me</button>

• Step-by-step:
  • Use BEM for class naming.
  • Minimize and organize CSS files.
• Best Practice: Keep code DRY (Don’t Repeat Yourself).
• Common Pitfall: Unclear class names or redundant code.

5. Tasks:

• Exercise:
  • Create a button using BEM naming.
  • Refactor a CSS file to remove redundancy.