Having experience in mobile development, I am accustomed to using a shared stylesheet that sets the basic styles for the entire project. In Flutter, this would be translated into CSS as follows:
:root {
// Setting spacing values
sizeSm: 8px; // or rem/etc
sizeMed: 16px;
...
// Defining corner radius
cornerSmall: 8px
cornerBig: 32px;
// Additional properties like box shadow, strokes, animation durations, colors, etc.
}
When embarking on a larger project, it seems logical to establish this common styling to maintain consistency across all pages and components. However, upon further exploration, this practice seems less common than expected.
While there are approaches like class styling (such as Tailwind) and component libraries (like MaterialUI) that provide pre-built components, they address different needs and do not negate the necessity of a unified CSS style definition.
As a newcomer to web development, I wonder if my perspective is skewed. Although this question may not have a definitive answer, any insights on whether my approach is misguided would be greatly appreciated. I aim to lay the groundwork for our project, so best practices are encouraged!
PS: Our project utilizes NextJS in conjunction with CSS modules - (aimed at large-scale implementation)