Should a tab be 2 spaces or 4?

Why frontend projects favor 2 spaces.

When writing code, indentation helps make it more readable by visually separating blocks of logic. Developers typically achieve this using either tabs or spaces. Tabs are a single character that can represent varying widths depending on the developer's editor settings, while spaces are fixed-width characters—usually two or four—used repeatedly to create the desired indentation. While both methods aim to accomplish the same thing, the choice between tabs and spaces (and how many spaces) can influence collaboration, readability, and consistency across teams.

The Debate

The debate between 2 spaces vs 4 spaces has persisted for years, largely because each approach has different trade-offs. Supporters of 2 spaces argue that it keeps the code more compact and easier to scan, especially when working with deeply nested structures. Advocates for 4 spaces emphasize clarity, saying the extra space makes hierarchy and structure more obvious. These differences can affect team preferences, especially when readability and screen real estate come into play. Since there's no universal "correct" choice, teams often settle the debate by aligning with language or framework conventions.

Frontend Standard

For frontend development, 2 spaces are generally the better choice. HTML, CSS, and JavaScript can involve heavy nesting—think of React components within components or deeply structured markup. Using 4 spaces here can quickly bloat the code visually, making it harder to scan or work with on smaller screens. Tools like Prettier default to 2 spaces for frontend code for this reason. In contrast, backend code, which often has fewer levels of indentation and favors clarity over conciseness, benefits from the added whitespace of 4 spaces. Choosing 2 spaces for frontend helps maintain a cleaner, more focused codebase—especially when navigating large files or working collaboratively in modern UIs.