Global Styles
Relevant source files
The following files were used as context for generating this wiki page:
The global styling system in this Next.js application provides a foundational layer of CSS that ensures visual consistency across all components and pages. By leveraging the Next.js Custom App pattern, the project injects base typography, layout resets, and rendering optimizations into the entire application lifecycle.
This system is built upon a hierarchy where global rules are defined in a central stylesheet and propagated through the _app.js entry point. It establishes the base environment for more granular styling implementations such as CSS Modules, ensuring that common elements like body text and typography inherit properties from a unified source.
Style Architecture and Injection
The application uses a centralized injection method for global styles. The pages/_app.js file serves as the root component, importing the global CSS file which then applies to every page rendered by the Next.js framework.
The Style Pipeline
The following diagram illustrates how global styles are integrated into the React component tree:
The styles are processed from the top-level _app.js and inherited by specific page implementations like index.js.
Sources: pages/_app.js:1-5, pages/index.js:4-6
Base Typography and Body Rules
The core of the global styling is defined in the global.css file, which targets the body element to establish application-wide defaults. These settings focus on legibility, font rendering, and layout resets.
| Property | Value | Purpose |
|---|---|---|
font-family | SF Pro Text, SF Pro Icons, Helvetica Neue, Arial, sans-serif | Establishes a system-centric sans-serif typeface hierarchy. |
font-size | 16px | Sets the base document scale. |
line-height | 1.65 | Ensures vertical rhythm and readability. |
text-rendering | optimizeLegibility | Enhances the appearance of text at different sizes. |
-webkit-font-smoothing | antialiased | Improves font rendering on macOS/iOS devices. |
Sources: global.css:1-14
CSS Implementation
The body selector implements a margin reset and word-breaking logic to prevent layout shifts:
body {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
'Arial', sans-serif;
margin: 0 auto;
font-size: 16px;
line-height: 1.65;
word-break: break-word;
-webkit-font-smoothing: antialiased;
}
Sources: global.css:1-14
Layout and Container Styling
Beyond the global body styles, the application uses CSS Modules to manage layout constraints. This approach prevents naming collisions while maintaining the structural integrity established by the global stylesheet.
Main Content Container
The primary content area in pages/index.js utilizes styles from styles/home.module.css. This module enforces a maximum width and centers the content, complementing the global margin: 0 auto directive found in the body style.
| Selector | Properties | Description |
|---|---|---|
.main | padding: 20px 20px 60px, max-width: 680px, margin: 0 auto | Defines the central column for page content. |
.hr | border: none, border-bottom: 1px solid #efefef, margin: 3em auto | Creates custom thematic breaks between sections. |
Sources: styles/home.module.css:1-11, pages/index.js:33-35
Component-Specific Styling Relationships
Global styles are inherited by components, but specific behaviors are overridden or extended in local CSS Modules. For example, the Button component inherits the global font-family via the inherit keyword but defines its own interactive states.
Styling Inheritance Flow
Button Styling Details
The button utilizes a blue primary color (#0076ff) with custom focus and hover states to provide user feedback, as seen in components/Button.module.css. It specifically utilizes font-family: inherit to maintain the typography defined in the global body selector.
Sources: components/Button.module.css:12-28, global.css:2-3
Summary
The Global Styles system in this project serves as a robust baseline for the Next.js environment. By configuring the body element in global.css and distributing those rules via _app.js, the application achieves high-quality text rendering and a consistent typographic foundation. This global layer is seamlessly extended by CSS Modules in home.module.css and Button.module.css to handle specific layout constraints and component interactions without breaking the overall design language.