Nested Syntax: `>

In the development practice of the Stylus CSS preprocessor, "nesting" is a core feature that significantly enhances code readability and maintainability. It allows us to define styles for child elements directly within the selector of the parent element, thereby simulating the hierarchical structure similar to an HTML document. However, Stylus' nesting mechanism is not merely a simple text stacking; its underlying logic strictly depends on CSS3 selector syntax specifications, particularly the "descendant selector" and the "child combinator".

The key to understanding this concept lies in distinguishing > from other combination symbols. In Stylus, when writing child styles under a parent selector, the compiler automatically converts it to CSS3 descendant selector mode by default (i.e., using space separation), meaning any descendant relationship will match. However, if you wish to precisely control the hierarchy or express the strict constraint that "it must be a direct child element," you must explicitly use the > symbol as the combinator. This mechanism not only enhances the semantic clarity of the code but also avoids issues caused by overly nested CSS selector chains becoming too long.
The nesting syntax rules in Stylus follow these core principles: items within a parent style block are treated as descendant matches by default, but introducing > can force the specification of a direct parent-child relationship. When writing code, you simply insert this symbol where hierarchy constraints are needed. This writing style maintains the concise nature of Stylus while ensuring the generated CSS complies with modern browser standards.

Here are examples of common nesting scenarios:

Default Descendant Matching (No need to explicitly write >)
```
.container
  p.text-bold { color: red } // Generates: .container > p.text-bold (Actual logic is descendant)
```
Note: In newer versions of Stylus, the default nesting behavior may have been optimized to automatically add direct child element selectors to match CSS3 specifications, depending on compiler configuration. However, when understanding the principle, it is clear that > has a forcing effect.

.container > p.text-bold { color: red } // Explicitly specified: must be a direct child of .container

Multi-level Nesting and Combinator Stacking
```
body
  header.main-header
    nav.primary-nav
      a.link-item { font-weight: bold; }
```
The above code generates CSS containing body > .main-header > .primary-nav > .link-item, ensuring each level is a direct parent-child relationship.

Practical Application Scenarios and Best Practices

In actual project refactoring, the reasonable use of nesting syntax can significantly reduce maintenance costs. The following scenarios are typical representatives of applying this feature:

Style Isolation in Component-based Development
When building large Single Page Applications (SPAs), using Stylus' modular features combined with > selectors ensures that styles of child components do not accidentally pollute the global scope or other sibling components. For example, defining icon colors within a button component can avoid affecting other button types in the same parent container through direct child element constraints.
Optimization of Complex Form Layouts
In web development, nested tags (such as <label>, <input>, <span>) are common. Using > allows for clear distinction between "required field markers" and "input fields themselves," making CSS rules more intuitive without relying on complex class name combinations to locate elements.
Precise Control of Responsive Breakpoints
When nesting inside media queries, > can help developers define layout structures under specific devices more precisely, preventing style override errors caused by selector priority confusion.

Precautions and Performance Considerations

Although nesting syntax brings many conveniences, the following technical details must be noted when using it in large-scale projects:

Browser Compatibility Differences
The CSS3 > child element selector is perfectly supported in all modern browsers. However, the final CSS generated by the Stylus compiler must ensure compatibility with the target environment. If the project needs to maintain legacy systems (such as IE10), verify whether the Stylus version and build toolchain have been adapted or downgraded for old features.
Selector Priority Management
Nesting implicitly increases selector weight, as each level contributes additional matching conditions. When using >, be sure not to rely on it excessively to replace class-based selectivity, so that when overriding default styles, it becomes difficult to correct specific issues via IDs or pseudo-elements.
Code Depth Limitation
CSS3 specifications suggest an upper limit for selector chain length (usually not exceeding 4-5 levels). Although browsers actually support deeper levels, excessively deep nesting leads to decreased parsing performance and debugging difficulties. It is recommended to maintain reasonable indentation and structure in Stylus and avoid unnecessary deep stacking of >.

By mastering the above syntax logic and application strategies, developers can build a beautiful and efficient styling system when writing Stylus CSS, truly realizing the development vision of "code as documentation."