Coding With David

  As Blazor continues to gain traction in the .NET ecosystem, one challenge that remains universal across web development is organizing CSS effectively. In this post, I'll share a structured approach to CSS organization in Blazor applications that promotes maintainability, reusability, and a clean separation of concerns. The Three-Tier CSS Architecture After working on numerous enterprise-scale Blazor applications, I've found that a "three-tier" CSS architecture works exceptionally well: Global CSS - Core design system elements Page-specific CSS - Layout and page-specific overrides Component-specific CSS - Isolated styles for reusable components Let's break down each tier and explore how they work together. Global CSS: Your Design System Foundation Your main CSS file should form the foundation of your application's design system, containing: A limited color palette (6 colors maximum) A controlled font selection (3 fonts maximum) Utility clas...

When developing Blazor applications, a common dilemma is deciding where to place your C# code: directly within the Razor file or in a separate code-behind file. This choice can impact the maintainability, readability, and scalability of your codebase. Both approaches have their advantages and disadvantages, so let's dive into each option to help you determine which one is best for your project. C# Code in the Razor File (Inline Code) Advantages of Inline Code Simplicity : For smaller components, embedding C# code directly in the .razor file allows you to see the markup and logic side by side, which can make development faster. This is ideal for straightforward components or quick prototypes. Quick Prototyping : If you're creating a simple component, inline code reduces the overhead of managing multiple files. It’s an efficient way to build quick demos or proof-of-concept components. Less Indirection : When your component’s logic is minimal, placing it directly in the Razor fil...