Tag: Styling

29 Jul

Global vs. Local Styling In Next.js

by TBSCategories: News

I have had a great experience using Next.js to manage complex front-end projects. Next.js is opinionated about how to organize JavaScript code, but it doesn’t have built-in opinions about how to organize CSS.

After working within the framework, I have found a series of organizational patterns that I believe both conform to the guiding philosophies of Next.js and exercise best CSS practices. In this article, we’ll build a website (a tea shop!) together to demonstrate these patterns.

Note: You probably will not need prior Next.js experience, although it would be good to have a basic understanding of React and to be open to learning some new CSS techniques.

Writing “Old-Fashioned” CSS

When first looking into Next.js, we may be tempted to consider using some kind of CSS-in-JS library. Though there may be benefits depending on the project, CSS-in-JS introduces many technical considerations. It requires using a new external library, which adds to the bundle size. CSS-in-JS can also have a performance impact by causing additional renders and dependencies on the global state.

Recommended reading: “The Unseen Performance Costs Of Modern CSS-in-JS Libraries In React Apps)” by Aggelos Arvanitakis

Furthermore, the whole point of using a library like Next.js is to statically render assets whenever possible, so it doesn’t make so much sense to write JS that needs to be run in the browser to generate CSS.

There are a couple of questions we have to consider when organizing style within Next.js:

How can we fit within the conventions/best practices of the framework?

How can we balance “global” styling concerns (fonts, colors, main layouts, and so on) with “local” ones (styles regarding individual components)?

The answer I have come up with for the first question is to simply write good ol’ fashioned CSS. Not only does Next.js support doing so with no additional setup; it also yields results that are performant and static.

To solve the second problem, I take an approach that can be summarized in four pieces:

  1. Design tokens
  2. Global styles
  3. Utility classes
  4. Component styles

I’m indebted to Andy Bell’s idea of CUBE CSS (“Composition, Utility, Block, Exception”) here. If you haven’t heard of this organizational principle before, I recommended checking out its official site or feature on the Smashing Podcast. One of the principles we will take from CUBE CSS is the idea that we should embrace rather than fear the CSS cascade. Let’s learn these techniques by applying them to a website project.

Getting Started

We’ll be building a tea store because, well, tea is tasty. We’ll start by running yarn create next-app to make a new Next.js project. Then, we’ll remove everything in the styles/ directory (it’s all sample code).

Note: If you want to follow along with the finished project, you can check it out here.

Design Tokens

In pretty much any CSS setup, there’s a clear benefit to storing all globally shared values in variables. If a client asks for a color to change, implementing the change is a one-liner rather than a massive find-and-replace mess. Consequently, a key part of our Next.js CSS setup will be storing all site-wide values as design tokens.

We’ll use inbuilt CSS Custom Properties to store these tokens. (If you’re not familiar with this syntax, you can check out “A Strategy Guide To CSS Custom Properties”.) I should mention that (in some projects) I’ve opted to use SASS/SCSS variables for this purpose. I haven’t found any real advantage, so I usually only include SASS in a project if I find I need other SASS features (mix-ins, iteration, importing files, and so on). CSS custom properties, by contrast, also work with the cascade and can be changed over time rather than statically compiling. So, for today, let’s stick with plain CSS.

In our styles/ directory, let’s make a new design_tokens.css file:

:root {   --green: #3FE79E;   --dark: #0F0235;   --off-white: #F5F5F3;    --space-sm: 0.5rem;   --space-md: 1rem;   --space-lg: 1.5rem;    --font-size-sm: 0.5rem;   --font-size-md: 1rem;   --font-size-lg: 2rem; }

Of course, this list can and will grow over time. Once we add this file, we need to hop over to our pages/_app.jsx file, which is the main layout for all our pages, and add:

import '../styles/design_tokens.css'

I like to think of design tokens as the glue that maintains consistency across the project. We will reference these variables on a global scale, as well as within individual components, ensuring a unified design language.

Global Styles

Next up, let’s add a page to our website! Let’s hop into the pages/index.jsx file (this is our homepage). We’ll delete all the boilerplate and add something like:

export default function Home() {   return <main>     <h1>Soothing Teas</h1>      <p>Welcome to our wonderful tea shop.</p>      <p>We have been open since 1987 and serve customers with hand-picked oolong teas.</p>   </main> }

Unfortunately, it will look quite plain, so let’s set some global styles for basic elements, e.g. <h1> tags. (I like to think of these styles as “reasonable global defaults”.) We may override them in specific cases, but they’re a good guess as to what we will want if we don’t.

I’ll put this in the styles/globals.css file (which comes by default from Next.js):

*, *::before, *::after {   box-sizing: border-box; }  body {   color: var(--off-white);   background-color: var(--dark); }  h1 {   color: var(--green);   font-size: var(--font-size-lg); }  p {   font-size: var(--font-size-md); }  p, article, section {   line-height: 1.5; }  :focus {   outline: 0.15rem dashed var(--off-white);   outline-offset: 0.25rem; } main:focus {   outline: none; }  img {   max-width: 100%; }

Of course, this version is fairly basic, but my globals.css file doesn’t usually end up actually needing to get too large. Here, I style basic HTML elements (headings, body, links, and so on). There is no need to wrap these elements in React components or to constantly add classes just to provide basic style.

I also include any resets of default browser styles. Occasionally, I will have some site-wide layout style to provide a “sticky footer”, for example, but they only belong here if all pages share the same layout. Otherwise, it will need to be scoped inside individual components.

I always include some kind of :focus styling to clearly indicate interactive elements for keyboard users when focused. It’s best to make it an integral part of the site’s design DNA!

Now, our website is starting to shape up:

Utility Classes

One area where our homepage could certainly improve is that the text currently always extends to the sides of the screen, so let’s limit its width. We need this layout on this page, but I imagine that we might need it on other pages, too. This is a great use case for a utility class!

I try to use utility classes sparingly rather than as a replacement for just writing CSS. My personal criteria for when it makes sense to add one to a project are:

  1. I need it repeatedly;
  2. It does one thing well;
  3. It applies across a range of different components or pages.

I think this case meets all three criteria, so let’s make a new CSS file styles/utilities.css and add:

.lockup {   max-width: 90ch;   margin: 0 auto; }

Then let’s add import '../styles/utilities.css' to our pages/_app.jsx. Finally, let’s change the <main> tag in our pages/index.jsx to <main className="lockup">.

Now, our page is coming together even more. Because we used the max-width property, we don’t need any media queries to make our layout mobile responsive. And, because we used the ch measurement unit — which equates to about the width of one character — our sizing is dynamic to the user’s browser font size.

As our website grows, we can continue adding more utility classes. I take a fairly utilitarian approach here: If I’m working and find I need another class for a color or something, I add it. I don’t add every possible class under the sun — it would bloat the CSS file size and make my code confusing. Sometimes, in larger projects, I like to break things up into a styles/utilities/ directory with a few different files; it’s up to the needs of the project.

We can think of utility classes as our toolkit of common, repeated styling commands that are shared globally. They help prevent us from constantly rewriting the same CSS between different components.

Component Styles

We’ve finished our homepage for the moment, but we still need to build a piece of our website: the online store. Our goal here will be to display a card grid of all the teas we want to sell, so we’ll need to add some components to our site.

Let’s start off by adding a new page at pages/shop.jsx:

export default function Shop() {   return <main>     <div className="lockup">       <h1>Shop Our Teas</h1>     </div>    </main> }

Then, we’ll need some teas to display. We’ll include a name, description, and image (in the public/ directory) for each tea:

const teas = [   { name: "Oolong", description: "A partially fermented tea.", image: "/oolong.jpg" },   // ... ]

Note: This isn’t an article about data fetching, so we took the easy route and defined an array at the beginning of the file.

Next, we’ll need to define a component to display our teas. Let’s start by making a components/ directory (Next.js doesn’t make this by default). Then, let’s add a components/TeaList directory. For any component that ends up needing more than one file, I usually put all the related files inside a folder. Doing so prevents our components/ folder from getting unnavigable.

Now, let’s add our components/TeaList/TeaList.jsx file:

import TeaListItem from './TeaListItem'  const TeaList = (props) => {   const { teas } = props    return <ul role="list">     {teas.map(tea =>       <TeaListItem tea={tea} key={tea.name} />)}   </ul> }  export default TeaList

The purpose of this component is to iterate over our teas and to show a list item for each one, so now let’s define our components/TeaList/TeaListItem.jsx component:

import Image from 'next/image'  const TeaListItem = (props) => {   const { tea } = props    return <li>     <div>       <Image src={tea.image} alt="" objectFit="cover" objectPosition="center" layout="fill" />     </div>    <div>       <h2>{tea.name}</h2>       <p>{tea.description}</p>     </div>   </li> }  export default TeaListItem

Note that we’re using Next.js’s built-in image component. I set the alt attribute to an empty string because the images are purely decorative in this case; we want to avoid bogging screen reader users down with long image descriptions here.

Finally, let’s make a components/TeaList/index.js file, so that our components are easy to import externally:

import TeaList from './TeaList' import TeaListItem from './TeaListItem'  export { TeaListItem }  export default TeaList

And then, let’s plug it all together by adding import TeaList from ../components/TeaList and a <TeaList teas={teas} /> element to our Shop page. Now, our teas will show up in a list, but it won’t be so pretty.

Colocating Style With Components Through CSS Modules

Let’s start off by styling our cards (the TeaListLitem component). Now, for the first time in our project, we’re going to want to add style that is specific to just one component. Let’s create a new file components/TeaList/TeaListItem.module.css.

You may be wondering about the module in the file extension. This is a CSS Module. Next.js supports CSS modules and includes some good documentation on them. When we write a class name from a CSS module such as .TeaListItem, it will automatically get transformed into something more like . TeaListItem_TeaListItem__TFOk_ with a bunch of extra characters tacked on. Consequently, we can use any class name we want without being concerned that it will conflict with other class names elsewhere in our site.

Another advantage to CSS modules is performance. Next.js includes a dynamic import feature. next/dynamic lets us lazy load components so that their code only gets loaded when needed, rather than adding to the whole bundle size. If we import the necessary local styles into individual components, then users can also lazy load the CSS for dynamically imported components. For large projects, we may choose to lazy load significant chunks of our code and only to load the most necessary JS/CSS upfront. As a result, I usually end up making a new CSS Module file for every new component that needs local styling.

Let’s start by adding some initial styles to our file:

.TeaListItem {   display: flex;   flex-direction: column;   gap: var(--space-sm);   background-color: var(--color, var(--off-white));   color: var(--dark);   border-radius: 3px;   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }

Then, we can import style from ./TeaListItem.module.css in our TeaListitem component. The style variable comes in like a JavaScript object, so we can access this class-like style.TeaListItem.

Note: Our class name doesn’t need to be capitalized. I’ve found that a convention of capitalized class names inside of modules (and lowercase ones outside) differentiates local vs. global class names visually.

So, let’s take our new local class and assign it to the <li> in our TeaListItem component:

<li className={style.TeaListComponent}>

You may be wondering about the background color line (i.e. var(--color, var(--off-white));). What this snippet means is that by default the background will be our --off-white value. But, if we set a --color custom property on a card, it will override and choose that value instead.

At first, we’ll want all our cards to be --off-white, but we may want to change the value for individual cards later. This works very similarly to props in React. We can set a default value but create a slot where we can choose other values in specific circumstances. So, I encourage us to think of CSS custom properties like CSS’s version of props.

The style still won’t look great because we want to make sure that the images stay within their containers. Next.js’s Image component with the layout="fill" prop gets position: absolute; from the framework, so we can limit the size by putting in a container with position: relative;.

Let’s add a new class to our TeaListItem.module.css:

.ImageContainer {   position: relative;   width: 100%;   height: 10em;   overflow: hidden; }

And then let’s add className={styles.ImageContainer} on the <div> that contains our <Image>. I use relatively “simple” names such as ImageContainer because we’re inside a CSS module, so we don’t have to worry about conflicting with the outside style.

Finally, we want to add a bit of padding on the sides of the text, so let’s add one last class and rely on the spacing variables we set up as design tokens:

.Title {   padding-left: var(--space-sm);   padding-right: var(--space-sm); }

We can add this class to the <div> that contains our name and description. Now, our cards don’t look so bad:

Combining Global And Local Style

Next, we want to have our cards show in a grid layout. In this case, we’re just at the border between local and global styles. We could certainly code our layout directly on the TeaList component. But, I could also imagine that having a utility class that turns a list into a grid layout could be useful in several other places.

Let’s take the global approach here and add a new utility class in our styles/utilities.css:

.grid {   list-style: none;   display: grid;   grid-template-columns: repeat(auto-fill, minmax(var(--min-item-width, 30ch), 1fr));   gap: var(--space-md); }

Now, we can add the .grid class on any list, and we’ll get an automatically responsive grid layout. We can also change the --min-item-width custom property (by default 30ch) to change the minimum width of each element.

Note: Remember to think of custom properties like props! If this syntax looks unfamiliar, you can check out “Intrinsically Responsive CSS Grid With minmax() And min()” by Chris Coyier.

As we’ve written this style globally, it doesn’t require any fanciness to add className="grid" onto our TeaList component. But, let’s say we want to couple this global style with some additional local store. For example, we want to bring a bit more of the “tea aesthetic” in and to make every other card have a green background. All we’d need to do is make a new components/TeaList/TeaList.module.css file:

.TeaList > :nth-child(even) {   --color: var(--green); }

Remember how we made a --color custom property on our TeaListItem component? Well, now we can set it under specific circumstances. Note that we can still use child selectors within CSS modules, and it doesn’t matter that we’re selecting an element that is styled inside a different module. So, we can also use our local component styles to affect child components. This is a feature rather than a bug, as it allows us to take advantage of the CSS cascade! If we tried to replicate this effect some other way, we’d likely end up with some kind of JavaScript soup rather than three lines of CSS.

Then, how can we keep the global .grid class on our TeaList component while also adding the local .TeaList class? This is where the syntax can get a bit funky because we have to access our .TeaList class out of the CSS module by doing something like style.TeaList.

One option would be to use string interpolation to get something like:

<ul role="list" className={`$  {style.TeaList} grid`}>

In this small case, this might be good enough. If we’re mixing-and-matching more classes, I find that this syntax makes my brain explode a bit, so I will sometimes opt to use the classnames library. In this case, we end up with a more sensible-looking list:

<ul role="list" className={classnames(style.TeaList, "grid")}>

Now, we’ve finished up our Shop page, and we’ve made our TeaList component take advantage of both global and local styles.

A Balancing Act

We’ve now built our tea shop using only plain CSS to handle the styling. You may have noticed that we did not have to spend ages dealing with custom Webpack setups, installing external libraries, and so on. That’s because of the patterns that we’ve used work with Next.js out of the box. Furthermore, they encourage best CSS practices and fit naturally into the Next.js framework architecture.

Our CSS organization consisted of four key pieces:

  1. Design tokens,
  2. Global styles,
  3. Utility classes,
  4. Component styles.

As we continue building our site, our list of design tokens and utility classes will grow. Any styling that doesn’t make sense to add as a utility class, we can add into component styles using CSS modules. As a result, we can find a continuous balance between local and global styling concerns. We can also generate performant, intuitive CSS code that grows naturally alongside our Next.js site.

Articles on Smashing Magazine — For Web Designers And Developers

29 Jul

Global vs. Local Styling In Next.js

by TBSCategories: News

I have had a great experience using Next.js to manage complex front-end projects. Next.js is opinionated about how to organize JavaScript code, but it doesn’t have built-in opinions about how to organize CSS.

After working within the framework, I have found a series of organizational patterns that I believe both conform to the guiding philosophies of Next.js and exercise best CSS practices. In this article, we’ll build a website (a tea shop!) together to demonstrate these patterns.

Note: You probably will not need prior Next.js experience, although it would be good to have a basic understanding of React and to be open to learning some new CSS techniques.

Writing “Old-Fashioned” CSS

When first looking into Next.js, we may be tempted to consider using some kind of CSS-in-JS library. Though there may be benefits depending on the project, CSS-in-JS introduces many technical considerations. It requires using a new external library, which adds to the bundle size. CSS-in-JS can also have a performance impact by causing additional renders and dependencies on the global state.

Recommended reading: “The Unseen Performance Costs Of Modern CSS-in-JS Libraries In React Apps)” by Aggelos Arvanitakis

Furthermore, the whole point of using a library like Next.js is to statically render assets whenever possible, so it doesn’t make so much sense to write JS that needs to be run in the browser to generate CSS.

There are a couple of questions we have to consider when organizing style within Next.js:

How can we fit within the conventions/best practices of the framework?

How can we balance “global” styling concerns (fonts, colors, main layouts, and so on) with “local” ones (styles regarding individual components)?

The answer I have come up with for the first question is to simply write good ol’ fashioned CSS. Not only does Next.js support doing so with no additional setup; it also yields results that are performant and static.

To solve the second problem, I take an approach that can be summarized in four pieces:

  1. Design tokens
  2. Global styles
  3. Utility classes
  4. Component styles

I’m indebted to Andy Bell’s idea of CUBE CSS (“Composition, Utility, Block, Exception”) here. If you haven’t heard of this organizational principle before, I recommended checking out its official site or feature on the Smashing Podcast. One of the principles we will take from CUBE CSS is the idea that we should embrace rather than fear the CSS cascade. Let’s learn these techniques by applying them to a website project.

Getting Started

We’ll be building a tea store because, well, tea is tasty. We’ll start by running yarn create next-app to make a new Next.js project. Then, we’ll remove everything in the styles/ directory (it’s all sample code).

Note: If you want to follow along with the finished project, you can check it out here.

Design Tokens

In pretty much any CSS setup, there’s a clear benefit to storing all globally shared values in variables. If a client asks for a color to change, implementing the change is a one-liner rather than a massive find-and-replace mess. Consequently, a key part of our Next.js CSS setup will be storing all site-wide values as design tokens.

We’ll use inbuilt CSS Custom Properties to store these tokens. (If you’re not familiar with this syntax, you can check out “A Strategy Guide To CSS Custom Properties”.) I should mention that (in some projects) I’ve opted to use SASS/SCSS variables for this purpose. I haven’t found any real advantage, so I usually only include SASS in a project if I find I need other SASS features (mix-ins, iteration, importing files, and so on). CSS custom properties, by contrast, also work with the cascade and can be changed over time rather than statically compiling. So, for today, let’s stick with plain CSS.

In our styles/ directory, let’s make a new design_tokens.css file:

:root {   --green: #3FE79E;   --dark: #0F0235;   --off-white: #F5F5F3;    --space-sm: 0.5rem;   --space-md: 1rem;   --space-lg: 1.5rem;    --font-size-sm: 0.5rem;   --font-size-md: 1rem;   --font-size-lg: 2rem; }

Of course, this list can and will grow over time. Once we add this file, we need to hop over to our pages/_app.jsx file, which is the main layout for all our pages, and add:

import '../styles/design_tokens.css'

I like to think of design tokens as the glue that maintains consistency across the project. We will reference these variables on a global scale, as well as within individual components, ensuring a unified design language.

Global Styles

Next up, let’s add a page to our website! Let’s hop into the pages/index.jsx file (this is our homepage). We’ll delete all the boilerplate and add something like:

export default function Home() {   return <main>     <h1>Soothing Teas</h1>      <p>Welcome to our wonderful tea shop.</p>      <p>We have been open since 1987 and serve customers with hand-picked oolong teas.</p>   </main> }

Unfortunately, it will look quite plain, so let’s set some global styles for basic elements, e.g. <h1> tags. (I like to think of these styles as “reasonable global defaults”.) We may override them in specific cases, but they’re a good guess as to what we will want if we don’t.

I’ll put this in the styles/globals.css file (which comes by default from Next.js):

*, *::before, *::after {   box-sizing: border-box; }  body {   color: var(--off-white);   background-color: var(--dark); }  h1 {   color: var(--green);   font-size: var(--font-size-lg); }  p {   font-size: var(--font-size-md); }  p, article, section {   line-height: 1.5; }  :focus {   outline: 0.15rem dashed var(--off-white);   outline-offset: 0.25rem; } main:focus {   outline: none; }  img {   max-width: 100%; }

Of course, this version is fairly basic, but my globals.css file doesn’t usually end up actually needing to get too large. Here, I style basic HTML elements (headings, body, links, and so on). There is no need to wrap these elements in React components or to constantly add classes just to provide basic style.

I also include any resets of default browser styles. Occasionally, I will have some site-wide layout style to provide a “sticky footer”, for example, but they only belong here if all pages share the same layout. Otherwise, it will need to be scoped inside individual components.

I always include some kind of :focus styling to clearly indicate interactive elements for keyboard users when focused. It’s best to make it an integral part of the site’s design DNA!

Now, our website is starting to shape up:

Utility Classes

One area where our homepage could certainly improve is that the text currently always extends to the sides of the screen, so let’s limit its width. We need this layout on this page, but I imagine that we might need it on other pages, too. This is a great use case for a utility class!

I try to use utility classes sparingly rather than as a replacement for just writing CSS. My personal criteria for when it makes sense to add one to a project are:

  1. I need it repeatedly;
  2. It does one thing well;
  3. It applies across a range of different components or pages.

I think this case meets all three criteria, so let’s make a new CSS file styles/utilities.css and add:

.lockup {   max-width: 90ch;   margin: 0 auto; }

Then let’s add import '../styles/utilities.css' to our pages/_app.jsx. Finally, let’s change the <main> tag in our pages/index.jsx to <main className="lockup">.

Now, our page is coming together even more. Because we used the max-width property, we don’t need any media queries to make our layout mobile responsive. And, because we used the ch measurement unit — which equates to about the width of one character — our sizing is dynamic to the user’s browser font size.

As our website grows, we can continue adding more utility classes. I take a fairly utilitarian approach here: If I’m working and find I need another class for a color or something, I add it. I don’t add every possible class under the sun — it would bloat the CSS file size and make my code confusing. Sometimes, in larger projects, I like to break things up into a styles/utilities/ directory with a few different files; it’s up to the needs of the project.

We can think of utility classes as our toolkit of common, repeated styling commands that are shared globally. They help prevent us from constantly rewriting the same CSS between different components.

Component Styles

We’ve finished our homepage for the moment, but we still need to build a piece of our website: the online store. Our goal here will be to display a card grid of all the teas we want to sell, so we’ll need to add some components to our site.

Let’s start off by adding a new page at pages/shop.jsx:

export default function Shop() {   return <main>     <div className="lockup">       <h1>Shop Our Teas</h1>     </div>    </main> }

Then, we’ll need some teas to display. We’ll include a name, description, and image (in the public/ directory) for each tea:

const teas = [   { name: "Oolong", description: "A partially fermented tea.", image: "/oolong.jpg" },   // ... ]

Note: This isn’t an article about data fetching, so we took the easy route and defined an array at the beginning of the file.

Next, we’ll need to define a component to display our teas. Let’s start by making a components/ directory (Next.js doesn’t make this by default). Then, let’s add a components/TeaList directory. For any component that ends up needing more than one file, I usually put all the related files inside a folder. Doing so prevents our components/ folder from getting unnavigable.

Now, let’s add our components/TeaList/TeaList.jsx file:

import TeaListItem from './TeaListItem'  const TeaList = (props) => {   const { teas } = props    return <ul role="list">     {teas.map(tea =>       <TeaListItem tea={tea} key={tea.name} />)}   </ul> }  export default TeaList

The purpose of this component is to iterate over our teas and to show a list item for each one, so now let’s define our components/TeaList/TeaListItem.jsx component:

import Image from 'next/image'  const TeaListItem = (props) => {   const { tea } = props    return <li>     <div>       <Image src={tea.image} alt="" objectFit="cover" objectPosition="center" layout="fill" />     </div>    <div>       <h2>{tea.name}</h2>       <p>{tea.description}</p>     </div>   </li> }  export default TeaListItem

Note that we’re using Next.js’s built-in image component. I set the alt attribute to an empty string because the images are purely decorative in this case; we want to avoid bogging screen reader users down with long image descriptions here.

Finally, let’s make a components/TeaList/index.js file, so that our components are easy to import externally:

import TeaList from './TeaList' import TeaListItem from './TeaListItem'  export { TeaListItem }  export default TeaList

And then, let’s plug it all together by adding import TeaList from ../components/TeaList and a <TeaList teas={teas} /> element to our Shop page. Now, our teas will show up in a list, but it won’t be so pretty.

Colocating Style With Components Through CSS Modules

Let’s start off by styling our cards (the TeaListLitem component). Now, for the first time in our project, we’re going to want to add style that is specific to just one component. Let’s create a new file components/TeaList/TeaListItem.module.css.

You may be wondering about the module in the file extension. This is a CSS Module. Next.js supports CSS modules and includes some good documentation on them. When we write a class name from a CSS module such as .TeaListItem, it will automatically get transformed into something more like . TeaListItem_TeaListItem__TFOk_ with a bunch of extra characters tacked on. Consequently, we can use any class name we want without being concerned that it will conflict with other class names elsewhere in our site.

Another advantage to CSS modules is performance. Next.js includes a dynamic import feature. next/dynamic lets us lazy load components so that their code only gets loaded when needed, rather than adding to the whole bundle size. If we import the necessary local styles into individual components, then users can also lazy load the CSS for dynamically imported components. For large projects, we may choose to lazy load significant chunks of our code and only to load the most necessary JS/CSS upfront. As a result, I usually end up making a new CSS Module file for every new component that needs local styling.

Let’s start by adding some initial styles to our file:

.TeaListItem {   display: flex;   flex-direction: column;   gap: var(--space-sm);   background-color: var(--color, var(--off-white));   color: var(--dark);   border-radius: 3px;   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }

Then, we can import style from ./TeaListItem.module.css in our TeaListitem component. The style variable comes in like a JavaScript object, so we can access this class-like style.TeaListItem.

Note: Our class name doesn’t need to be capitalized. I’ve found that a convention of capitalized class names inside of modules (and lowercase ones outside) differentiates local vs. global class names visually.

So, let’s take our new local class and assign it to the <li> in our TeaListItem component:

<li className={style.TeaListComponent}>

You may be wondering about the background color line (i.e. var(--color, var(--off-white));). What this snippet means is that by default the background will be our --off-white value. But, if we set a --color custom property on a card, it will override and choose that value instead.

At first, we’ll want all our cards to be --off-white, but we may want to change the value for individual cards later. This works very similarly to props in React. We can set a default value but create a slot where we can choose other values in specific circumstances. So, I encourage us to think of CSS custom properties like CSS’s version of props.

The style still won’t look great because we want to make sure that the images stay within their containers. Next.js’s Image component with the layout="fill" prop gets position: absolute; from the framework, so we can limit the size by putting in a container with position: relative;.

Let’s add a new class to our TeaListItem.module.css:

.ImageContainer {   position: relative;   width: 100%;   height: 10em;   overflow: hidden; }

And then let’s add className={styles.ImageContainer} on the <div> that contains our <Image>. I use relatively “simple” names such as ImageContainer because we’re inside a CSS module, so we don’t have to worry about conflicting with the outside style.

Finally, we want to add a bit of padding on the sides of the text, so let’s add one last class and rely on the spacing variables we set up as design tokens:

.Title {   padding-left: var(--space-sm);   padding-right: var(--space-sm); }

We can add this class to the <div> that contains our name and description. Now, our cards don’t look so bad:

Combining Global And Local Style

Next, we want to have our cards show in a grid layout. In this case, we’re just at the border between local and global styles. We could certainly code our layout directly on the TeaList component. But, I could also imagine that having a utility class that turns a list into a grid layout could be useful in several other places.

Let’s take the global approach here and add a new utility class in our styles/utilities.css:

.grid {   list-style: none;   display: grid;   grid-template-columns: repeat(auto-fill, minmax(var(--min-item-width, 30ch), 1fr));   gap: var(--space-md); }

Now, we can add the .grid class on any list, and we’ll get an automatically responsive grid layout. We can also change the --min-item-width custom property (by default 30ch) to change the minimum width of each element.

Note: Remember to think of custom properties like props! If this syntax looks unfamiliar, you can check out “Intrinsically Responsive CSS Grid With minmax() And min()” by Chris Coyier.

As we’ve written this style globally, it doesn’t require any fanciness to add className="grid" onto our TeaList component. But, let’s say we want to couple this global style with some additional local store. For example, we want to bring a bit more of the “tea aesthetic” in and to make every other card have a green background. All we’d need to do is make a new components/TeaList/TeaList.module.css file:

.TeaList > :nth-child(even) {   --color: var(--green); }

Remember how we made a --color custom property on our TeaListItem component? Well, now we can set it under specific circumstances. Note that we can still use child selectors within CSS modules, and it doesn’t matter that we’re selecting an element that is styled inside a different module. So, we can also use our local component styles to affect child components. This is a feature rather than a bug, as it allows us to take advantage of the CSS cascade! If we tried to replicate this effect some other way, we’d likely end up with some kind of JavaScript soup rather than three lines of CSS.

Then, how can we keep the global .grid class on our TeaList component while also adding the local .TeaList class? This is where the syntax can get a bit funky because we have to access our .TeaList class out of the CSS module by doing something like style.TeaList.

One option would be to use string interpolation to get something like:

<ul role="list" className={`$  {style.TeaList} grid`}>

In this small case, this might be good enough. If we’re mixing-and-matching more classes, I find that this syntax makes my brain explode a bit, so I will sometimes opt to use the classnames library. In this case, we end up with a more sensible-looking list:

<ul role="list" className={classnames(style.TeaList, "grid")}>

Now, we’ve finished up our Shop page, and we’ve made our TeaList component take advantage of both global and local styles.

A Balancing Act

We’ve now built our tea shop using only plain CSS to handle the styling. You may have noticed that we did not have to spend ages dealing with custom Webpack setups, installing external libraries, and so on. That’s because of the patterns that we’ve used work with Next.js out of the box. Furthermore, they encourage best CSS practices and fit naturally into the Next.js framework architecture.

Our CSS organization consisted of four key pieces:

  1. Design tokens,
  2. Global styles,
  3. Utility classes,
  4. Component styles.

As we continue building our site, our list of design tokens and utility classes will grow. Any styling that doesn’t make sense to add as a utility class, we can add into component styles using CSS modules. As a result, we can find a continuous balance between local and global styling concerns. We can also generate performant, intuitive CSS code that grows naturally alongside our Next.js site.

Articles on Smashing Magazine — For Web Designers And Developers

28 Jul

Global vs. Local Styling In Next.js

by TBSCategories: News

I have had a great experience using Next.js to manage complex front-end projects. Next.js is opinionated about how to organize JavaScript code, but it doesn’t have built-in opinions about how to organize CSS.

After working within the framework, I have found a series of organizational patterns that I believe both conform to the guiding philosophies of Next.js and exercise best CSS practices. In this article, we’ll build a website (a tea shop!) together to demonstrate these patterns.

Note: You probably will not need prior Next.js experience, although it would be good to have a basic understanding of React and to be open to learning some new CSS techniques.

Writing “Old-Fashioned” CSS

When first looking into Next.js, we may be tempted to consider using some kind of CSS-in-JS library. Though there may be benefits depending on the project, CSS-in-JS introduces many technical considerations. It requires using a new external library, which adds to the bundle size. CSS-in-JS can also have a performance impact by causing additional renders and dependencies on the global state.

Recommended reading: “The Unseen Performance Costs Of Modern CSS-in-JS Libraries In React Apps)” by Aggelos Arvanitakis

Furthermore, the whole point of using a library like Next.js is to statically render assets whenever possible, so it doesn’t make so much sense to write JS that needs to be run in the browser to generate CSS.

There are a couple of questions we have to consider when organizing style within Next.js:

How can we fit within the conventions/best practices of the framework?

How can we balance “global” styling concerns (fonts, colors, main layouts, and so on) with “local” ones (styles regarding individual components)?

The answer I have come up with for the first question is to simply write good ol’ fashioned CSS. Not only does Next.js support doing so with no additional setup; it also yields results that are performant and static.

To solve the second problem, I take an approach that can be summarized in four pieces:

  1. Design tokens
  2. Global styles
  3. Utility classes
  4. Component styles

I’m indebted to Andy Bell’s idea of CUBE CSS (“Composition, Utility, Block, Exception”) here. If you haven’t heard of this organizational principle before, I recommended checking out its official site or feature on the Smashing Podcast. One of the principles we will take from CUBE CSS is the idea that we should embrace rather than fear the CSS cascade. Let’s learn these techniques by applying them to a website project.

Getting Started

We’ll be building a tea store because, well, tea is tasty. We’ll start by running yarn create next-app to make a new Next.js project. Then, we’ll remove everything in the styles/ directory (it’s all sample code).

Note: If you want to follow along with the finished project, you can check it out here.

Design Tokens

In pretty much any CSS setup, there’s a clear benefit to storing all globally shared values in variables. If a client asks for a color to change, implementing the change is a one-liner rather than a massive find-and-replace mess. Consequently, a key part of our Next.js CSS setup will be storing all site-wide values as design tokens.

We’ll use inbuilt CSS Custom Properties to store these tokens. (If you’re not familiar with this syntax, you can check out “A Strategy Guide To CSS Custom Properties”.) I should mention that (in some projects) I’ve opted to use SASS/SCSS variables for this purpose. I haven’t found any real advantage, so I usually only include SASS in a project if I find I need other SASS features (mix-ins, iteration, importing files, and so on). CSS custom properties, by contrast, also work with the cascade and can be changed over time rather than statically compiling. So, for today, let’s stick with plain CSS.

In our styles/ directory, let’s make a new design_tokens.css file:

:root {   --green: #3FE79E;   --dark: #0F0235;   --off-white: #F5F5F3;    --space-sm: 0.5rem;   --space-md: 1rem;   --space-lg: 1.5rem;    --font-size-sm: 0.5rem;   --font-size-md: 1rem;   --font-size-lg: 2rem; }

Of course, this list can and will grow over time. Once we add this file, we need to hop over to our pages/_app.jsx file, which is the main layout for all our pages, and add:

import '../styles/design_tokens.css'

I like to think of design tokens as the glue that maintains consistency across the project. We will reference these variables on a global scale, as well as within individual components, ensuring a unified design language.

Global Styles

Next up, let’s add a page to our website! Let’s hop into the pages/index.jsx file (this is our homepage). We’ll delete all the boilerplate and add something like:

export default function Home() {   return <main>     <h1>Soothing Teas</h1>      <p>Welcome to our wonderful tea shop.</p>      <p>We have been open since 1987 and serve customers with hand-picked oolong teas.</p>   </main> }

Unfortunately, it will look quite plain, so let’s set some global styles for basic elements, e.g. <h1> tags. (I like to think of these styles as “reasonable global defaults”.) We may override them in specific cases, but they’re a good guess as to what we will want if we don’t.

I’ll put this in the styles/globals.css file (which comes by default from Next.js):

*, *::before, *::after {   box-sizing: border-box; }  body {   color: var(--off-white);   background-color: var(--dark); }  h1 {   color: var(--green);   font-size: var(--font-size-lg); }  p {   font-size: var(--font-size-md); }  p, article, section {   line-height: 1.5; }  :focus {   outline: 0.15rem dashed var(--off-white);   outline-offset: 0.25rem; } main:focus {   outline: none; }  img {   max-width: 100%; }

Of course, this version is fairly basic, but my globals.css file doesn’t usually end up actually needing to get too large. Here, I style basic HTML elements (headings, body, links, and so on). There is no need to wrap these elements in React components or to constantly add classes just to provide basic style.

I also include any resets of default browser styles. Occasionally, I will have some site-wide layout style to provide a “sticky footer”, for example, but they only belong here if all pages share the same layout. Otherwise, it will need to be scoped inside individual components.

I always include some kind of :focus styling to clearly indicate interactive elements for keyboard users when focused. It’s best to make it an integral part of the site’s design DNA!

Now, our website is starting to shape up:

Utility Classes

One area where our homepage could certainly improve is that the text currently always extends to the sides of the screen, so let’s limit its width. We need this layout on this page, but I imagine that we might need it on other pages, too. This is a great use case for a utility class!

I try to use utility classes sparingly rather than as a replacement for just writing CSS. My personal criteria for when it makes sense to add one to a project are:

  1. I need it repeatedly;
  2. It does one thing well;
  3. It applies across a range of different components or pages.

I think this case meets all three criteria, so let’s make a new CSS file styles/utilities.css and add:

.lockup {   max-width: 90ch;   margin: 0 auto; }

Then let’s add import '../styles/utilities.css' to our pages/_app.jsx. Finally, let’s change the <main> tag in our pages/index.jsx to <main className="lockup">.

Now, our page is coming together even more. Because we used the max-width property, we don’t need any media queries to make our layout mobile responsive. And, because we used the ch measurement unit — which equates to about the width of one character — our sizing is dynamic to the user’s browser font size.

As our website grows, we can continue adding more utility classes. I take a fairly utilitarian approach here: If I’m working and find I need another class for a color or something, I add it. I don’t add every possible class under the sun — it would bloat the CSS file size and make my code confusing. Sometimes, in larger projects, I like to break things up into a styles/utilities/ directory with a few different files; it’s up to the needs of the project.

We can think of utility classes as our toolkit of common, repeated styling commands that are shared globally. They help prevent us from constantly rewriting the same CSS between different components.

Component Styles

We’ve finished our homepage for the moment, but we still need to build a piece of our website: the online store. Our goal here will be to display a card grid of all the teas we want to sell, so we’ll need to add some components to our site.

Let’s start off by adding a new page at pages/shop.jsx:

export default function Shop() {   return <main>     <div className="lockup">       <h1>Shop Our Teas</h1>     </div>    </main> }

Then, we’ll need some teas to display. We’ll include a name, description, and image (in the public/ directory) for each tea:

const teas = [   { name: "Oolong", description: "A partially fermented tea.", image: "/oolong.jpg" },   // ... ]

Note: This isn’t an article about data fetching, so we took the easy route and defined an array at the beginning of the file.

Next, we’ll need to define a component to display our teas. Let’s start by making a components/ directory (Next.js doesn’t make this by default). Then, let’s add a components/TeaList directory. For any component that ends up needing more than one file, I usually put all the related files inside a folder. Doing so prevents our components/ folder from getting unnavigable.

Now, let’s add our components/TeaList/TeaList.jsx file:

import TeaListItem from './TeaListItem'  const TeaList = (props) => {   const { teas } = props    return <ul role="list">     {teas.map(tea =>       <TeaListItem tea={tea} key={tea.name} />)}   </ul> }  export default TeaList

The purpose of this component is to iterate over our teas and to show a list item for each one, so now let’s define our components/TeaList/TeaListItem.jsx component:

import Image from 'next/image'  const TeaListItem = (props) => {   const { tea } = props    return <li>     <div>       <Image src={tea.image} alt="" objectFit="cover" objectPosition="center" layout="fill" />     </div>    <div>       <h2>{tea.name}</h2>       <p>{tea.description}</p>     </div>   </li> }  export default TeaListItem

Note that we’re using Next.js’s built-in image component. I set the alt attribute to an empty string because the images are purely decorative in this case; we want to avoid bogging screen reader users down with long image descriptions here.

Finally, let’s make a components/TeaList/index.js file, so that our components are easy to import externally:

import TeaList from './TeaList' import TeaListItem from './TeaListItem'  export { TeaListItem }  export default TeaList

And then, let’s plug it all together by adding import TeaList from ../components/TeaList and a <TeaList teas={teas} /> element to our Shop page. Now, our teas will show up in a list, but it won’t be so pretty.

Colocating Style With Components Through CSS Modules

Let’s start off by styling our cards (the TeaListLitem component). Now, for the first time in our project, we’re going to want to add style that is specific to just one component. Let’s create a new file components/TeaList/TeaListItem.module.css.

You may be wondering about the module in the file extension. This is a CSS Module. Next.js supports CSS modules and includes some good documentation on them. When we write a class name from a CSS module such as .TeaListItem, it will automatically get transformed into something more like . TeaListItem_TeaListItem__TFOk_ with a bunch of extra characters tacked on. Consequently, we can use any class name we want without being concerned that it will conflict with other class names elsewhere in our site.

Another advantage to CSS modules is performance. Next.js includes a dynamic import feature. next/dynamic lets us lazy load components so that their code only gets loaded when needed, rather than adding to the whole bundle size. If we import the necessary local styles into individual components, then users can also lazy load the CSS for dynamically imported components. For large projects, we may choose to lazy load significant chunks of our code and only to load the most necessary JS/CSS upfront. As a result, I usually end up making a new CSS Module file for every new component that needs local styling.

Let’s start by adding some initial styles to our file:

.TeaListItem {   display: flex;   flex-direction: column;   gap: var(--space-sm);   background-color: var(--color, var(--off-white));   color: var(--dark);   border-radius: 3px;   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }

Then, we can import style from ./TeaListItem.module.css in our TeaListitem component. The style variable comes in like a JavaScript object, so we can access this class-like style.TeaListItem.

Note: Our class name doesn’t need to be capitalized. I’ve found that a convention of capitalized class names inside of modules (and lowercase ones outside) differentiates local vs. global class names visually.

So, let’s take our new local class and assign it to the <li> in our TeaListItem component:

<li className={style.TeaListComponent}>

You may be wondering about the background color line (i.e. var(--color, var(--off-white));). What this snippet means is that by default the background will be our --off-white value. But, if we set a --color custom property on a card, it will override and choose that value instead.

At first, we’ll want all our cards to be --off-white, but we may want to change the value for individual cards later. This works very similarly to props in React. We can set a default value but create a slot where we can choose other values in specific circumstances. So, I encourage us to think of CSS custom properties like CSS’s version of props.

The style still won’t look great because we want to make sure that the images stay within their containers. Next.js’s Image component with the layout="fill" prop gets position: absolute; from the framework, so we can limit the size by putting in a container with position: relative;.

Let’s add a new class to our TeaListItem.module.css:

.ImageContainer {   position: relative;   width: 100%;   height: 10em;   overflow: hidden; }

And then let’s add className={styles.ImageContainer} on the <div> that contains our <Image>. I use relatively “simple” names such as ImageContainer because we’re inside a CSS module, so we don’t have to worry about conflicting with the outside style.

Finally, we want to add a bit of padding on the sides of the text, so let’s add one last class and rely on the spacing variables we set up as design tokens:

.Title {   padding-left: var(--space-sm);   padding-right: var(--space-sm); }

We can add this class to the <div> that contains our name and description. Now, our cards don’t look so bad:

Combining Global And Local Style

Next, we want to have our cards show in a grid layout. In this case, we’re just at the border between local and global styles. We could certainly code our layout directly on the TeaList component. But, I could also imagine that having a utility class that turns a list into a grid layout could be useful in several other places.

Let’s take the global approach here and add a new utility class in our styles/utilities.css:

.grid {   list-style: none;   display: grid;   grid-template-columns: repeat(auto-fill, minmax(var(--min-item-width, 30ch), 1fr));   gap: var(--space-md); }

Now, we can add the .grid class on any list, and we’ll get an automatically responsive grid layout. We can also change the --min-item-width custom property (by default 30ch) to change the minimum width of each element.

Note: Remember to think of custom properties like props! If this syntax looks unfamiliar, you can check out “Intrinsically Responsive CSS Grid With minmax() And min()” by Chris Coyier.

As we’ve written this style globally, it doesn’t require any fanciness to add className="grid" onto our TeaList component. But, let’s say we want to couple this global style with some additional local store. For example, we want to bring a bit more of the “tea aesthetic” in and to make every other card have a green background. All we’d need to do is make a new components/TeaList/TeaList.module.css file:

.TeaList > :nth-child(even) {   --color: var(--green); }

Remember how we made a --color custom property on our TeaListItem component? Well, now we can set it under specific circumstances. Note that we can still use child selectors within CSS modules, and it doesn’t matter that we’re selecting an element that is styled inside a different module. So, we can also use our local component styles to affect child components. This is a feature rather than a bug, as it allows us to take advantage of the CSS cascade! If we tried to replicate this effect some other way, we’d likely end up with some kind of JavaScript soup rather than three lines of CSS.

Then, how can we keep the global .grid class on our TeaList component while also adding the local .TeaList class? This is where the syntax can get a bit funky because we have to access our .TeaList class out of the CSS module by doing something like style.TeaList.

One option would be to use string interpolation to get something like:

<ul role="list" className={`$  {style.TeaList} grid`}>

In this small case, this might be good enough. If we’re mixing-and-matching more classes, I find that this syntax makes my brain explode a bit, so I will sometimes opt to use the classnames library. In this case, we end up with a more sensible-looking list:

<ul role="list" className={classnames(style.TeaList, "grid")}>

Now, we’ve finished up our Shop page, and we’ve made our TeaList component take advantage of both global and local styles.

A Balancing Act

We’ve now built our tea shop using only plain CSS to handle the styling. You may have noticed that we did not have to spend ages dealing with custom Webpack setups, installing external libraries, and so on. That’s because of the patterns that we’ve used work with Next.js out of the box. Furthermore, they encourage best CSS practices and fit naturally into the Next.js framework architecture.

Our CSS organization consisted of four key pieces:

  1. Design tokens,
  2. Global styles,
  3. Utility classes,
  4. Component styles.

As we continue building our site, our list of design tokens and utility classes will grow. Any styling that doesn’t make sense to add as a utility class, we can add into component styles using CSS modules. As a result, we can find a continuous balance between local and global styling concerns. We can also generate performant, intuitive CSS code that grows naturally alongside our Next.js site.

Articles on Smashing Magazine — For Web Designers And Developers

28 Jul

Global vs. Local Styling In Next.js

by TBSCategories: News

I have had a great experience using Next.js to manage complex front-end projects. Next.js is opinionated about how to organize JavaScript code, but it doesn’t have built-in opinions about how to organize CSS.

After working within the framework, I have found a series of organizational patterns that I believe both conform to the guiding philosophies of Next.js and exercise best CSS practices. In this article, we’ll build a website (a tea shop!) together to demonstrate these patterns.

Note: You probably will not need prior Next.js experience, although it would be good to have a basic understanding of React and to be open to learning some new CSS techniques.

Writing “Old-Fashioned” CSS

When first looking into Next.js, we may be tempted to consider using some kind of CSS-in-JS library. Though there may be benefits depending on the project, CSS-in-JS introduces many technical considerations. It requires using a new external library, which adds to the bundle size. CSS-in-JS can also have a performance impact by causing additional renders and dependencies on the global state.

Recommended reading: “The Unseen Performance Costs Of Modern CSS-in-JS Libraries In React Apps)” by Aggelos Arvanitakis

Furthermore, the whole point of using a library like Next.js is to statically render assets whenever possible, so it doesn’t make so much sense to write JS that needs to be run in the browser to generate CSS.

There are a couple of questions we have to consider when organizing style within Next.js:

How can we fit within the conventions/best practices of the framework?

How can we balance “global” styling concerns (fonts, colors, main layouts, and so on) with “local” ones (styles regarding individual components)?

The answer I have come up with for the first question is to simply write good ol’ fashioned CSS. Not only does Next.js support doing so with no additional setup; it also yields results that are performant and static.

To solve the second problem, I take an approach that can be summarized in four pieces:

  1. Design tokens
  2. Global styles
  3. Utility classes
  4. Component styles

I’m indebted to Andy Bell’s idea of CUBE CSS (“Composition, Utility, Block, Exception”) here. If you haven’t heard of this organizational principle before, I recommended checking out its official site or feature on the Smashing Podcast. One of the principles we will take from CUBE CSS is the idea that we should embrace rather than fear the CSS cascade. Let’s learn these techniques by applying them to a website project.

Getting Started

We’ll be building a tea store because, well, tea is tasty. We’ll start by running yarn create next-app to make a new Next.js project. Then, we’ll remove everything in the styles/ directory (it’s all sample code).

Note: If you want to follow along with the finished project, you can check it out here.

Design Tokens

In pretty much any CSS setup, there’s a clear benefit to storing all globally shared values in variables. If a client asks for a color to change, implementing the change is a one-liner rather than a massive find-and-replace mess. Consequently, a key part of our Next.js CSS setup will be storing all site-wide values as design tokens.

We’ll use inbuilt CSS Custom Properties to store these tokens. (If you’re not familiar with this syntax, you can check out “A Strategy Guide To CSS Custom Properties”.) I should mention that (in some projects) I’ve opted to use SASS/SCSS variables for this purpose. I haven’t found any real advantage, so I usually only include SASS in a project if I find I need other SASS features (mix-ins, iteration, importing files, and so on). CSS custom properties, by contrast, also work with the cascade and can be changed over time rather than statically compiling. So, for today, let’s stick with plain CSS.

In our styles/ directory, let’s make a new design_tokens.css file:

:root {   --green: #3FE79E;   --dark: #0F0235;   --off-white: #F5F5F3;    --space-sm: 0.5rem;   --space-md: 1rem;   --space-lg: 1.5rem;    --font-size-sm: 0.5rem;   --font-size-md: 1rem;   --font-size-lg: 2rem; }

Of course, this list can and will grow over time. Once we add this file, we need to hop over to our pages/_app.jsx file, which is the main layout for all our pages, and add:

import '../styles/design_tokens.css'

I like to think of design tokens as the glue that maintains consistency across the project. We will reference these variables on a global scale, as well as within individual components, ensuring a unified design language.

Global Styles

Next up, let’s add a page to our website! Let’s hop into the pages/index.jsx file (this is our homepage). We’ll delete all the boilerplate and add something like:

export default function Home() {   return <main>     <h1>Soothing Teas</h1>      <p>Welcome to our wonderful tea shop.</p>      <p>We have been open since 1987 and serve customers with hand-picked oolong teas.</p>   </main> }

Unfortunately, it will look quite plain, so let’s set some global styles for basic elements, e.g. <h1> tags. (I like to think of these styles as “reasonable global defaults”.) We may override them in specific cases, but they’re a good guess as to what we will want if we don’t.

I’ll put this in the styles/globals.css file (which comes by default from Next.js):

*, *::before, *::after {   box-sizing: border-box; }  body {   color: var(--off-white);   background-color: var(--dark); }  h1 {   color: var(--green);   font-size: var(--font-size-lg); }  p {   font-size: var(--font-size-md); }  p, article, section {   line-height: 1.5; }  :focus {   outline: 0.15rem dashed var(--off-white);   outline-offset: 0.25rem; } main:focus {   outline: none; }  img {   max-width: 100%; }

Of course, this version is fairly basic, but my globals.css file doesn’t usually end up actually needing to get too large. Here, I style basic HTML elements (headings, body, links, and so on). There is no need to wrap these elements in React components or to constantly add classes just to provide basic style.

I also include any resets of default browser styles. Occasionally, I will have some site-wide layout style to provide a “sticky footer”, for example, but they only belong here if all pages share the same layout. Otherwise, it will need to be scoped inside individual components.

I always include some kind of :focus styling to clearly indicate interactive elements for keyboard users when focused. It’s best to make it an integral part of the site’s design DNA!

Now, our website is starting to shape up:

Utility Classes

One area where our homepage could certainly improve is that the text currently always extends to the sides of the screen, so let’s limit its width. We need this layout on this page, but I imagine that we might need it on other pages, too. This is a great use case for a utility class!

I try to use utility classes sparingly rather than as a replacement for just writing CSS. My personal criteria for when it makes sense to add one to a project are:

  1. I need it repeatedly;
  2. It does one thing well;
  3. It applies across a range of different components or pages.

I think this case meets all three criteria, so let’s make a new CSS file styles/utilities.css and add:

.lockup {   max-width: 90ch;   margin: 0 auto; }

Then let’s add import '../styles/utilities.css' to our pages/_app.jsx. Finally, let’s change the <main> tag in our pages/index.jsx to <main className="lockup">.

Now, our page is coming together even more. Because we used the max-width property, we don’t need any media queries to make our layout mobile responsive. And, because we used the ch measurement unit — which equates to about the width of one character — our sizing is dynamic to the user’s browser font size.

As our website grows, we can continue adding more utility classes. I take a fairly utilitarian approach here: If I’m working and find I need another class for a color or something, I add it. I don’t add every possible class under the sun — it would bloat the CSS file size and make my code confusing. Sometimes, in larger projects, I like to break things up into a styles/utilities/ directory with a few different files; it’s up to the needs of the project.

We can think of utility classes as our toolkit of common, repeated styling commands that are shared globally. They help prevent us from constantly rewriting the same CSS between different components.

Component Styles

We’ve finished our homepage for the moment, but we still need to build a piece of our website: the online store. Our goal here will be to display a card grid of all the teas we want to sell, so we’ll need to add some components to our site.

Let’s start off by adding a new page at pages/shop.jsx:

export default function Shop() {   return <main>     <div className="lockup">       <h1>Shop Our Teas</h1>     </div>    </main> }

Then, we’ll need some teas to display. We’ll include a name, description, and image (in the public/ directory) for each tea:

const teas = [   { name: "Oolong", description: "A partially fermented tea.", image: "/oolong.jpg" },   // ... ]

Note: This isn’t an article about data fetching, so we took the easy route and defined an array at the beginning of the file.

Next, we’ll need to define a component to display our teas. Let’s start by making a components/ directory (Next.js doesn’t make this by default). Then, let’s add a components/TeaList directory. For any component that ends up needing more than one file, I usually put all the related files inside a folder. Doing so prevents our components/ folder from getting unnavigable.

Now, let’s add our components/TeaList/TeaList.jsx file:

import TeaListItem from './TeaListItem'  const TeaList = (props) => {   const { teas } = props    return <ul role="list">     {teas.map(tea =>       <TeaListItem tea={tea} key={tea.name} />)}   </ul> }  export default TeaList

The purpose of this component is to iterate over our teas and to show a list item for each one, so now let’s define our components/TeaList/TeaListItem.jsx component:

import Image from 'next/image'  const TeaListItem = (props) => {   const { tea } = props    return <li>     <div>       <Image src={tea.image} alt="" objectFit="cover" objectPosition="center" layout="fill" />     </div>    <div>       <h2>{tea.name}</h2>       <p>{tea.description}</p>     </div>   </li> }  export default TeaListItem

Note that we’re using Next.js’s built-in image component. I set the alt attribute to an empty string because the images are purely decorative in this case; we want to avoid bogging screen reader users down with long image descriptions here.

Finally, let’s make a components/TeaList/index.js file, so that our components are easy to import externally:

import TeaList from './TeaList' import TeaListItem from './TeaListItem'  export { TeaListItem }  export default TeaList

And then, let’s plug it all together by adding import TeaList from ../components/TeaList and a <TeaList teas={teas} /> element to our Shop page. Now, our teas will show up in a list, but it won’t be so pretty.

Colocating Style With Components Through CSS Modules

Let’s start off by styling our cards (the TeaListLitem component). Now, for the first time in our project, we’re going to want to add style that is specific to just one component. Let’s create a new file components/TeaList/TeaListItem.module.css.

You may be wondering about the module in the file extension. This is a CSS Module. Next.js supports CSS modules and includes some good documentation on them. When we write a class name from a CSS module such as .TeaListItem, it will automatically get transformed into something more like . TeaListItem_TeaListItem__TFOk_ with a bunch of extra characters tacked on. Consequently, we can use any class name we want without being concerned that it will conflict with other class names elsewhere in our site.

Another advantage to CSS modules is performance. Next.js includes a dynamic import feature. next/dynamic lets us lazy load components so that their code only gets loaded when needed, rather than adding to the whole bundle size. If we import the necessary local styles into individual components, then users can also lazy load the CSS for dynamically imported components. For large projects, we may choose to lazy load significant chunks of our code and only to load the most necessary JS/CSS upfront. As a result, I usually end up making a new CSS Module file for every new component that needs local styling.

Let’s start by adding some initial styles to our file:

.TeaListItem {   display: flex;   flex-direction: column;   gap: var(--space-sm);   background-color: var(--color, var(--off-white));   color: var(--dark);   border-radius: 3px;   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }

Then, we can import style from ./TeaListItem.module.css in our TeaListitem component. The style variable comes in like a JavaScript object, so we can access this class-like style.TeaListItem.

Note: Our class name doesn’t need to be capitalized. I’ve found that a convention of capitalized class names inside of modules (and lowercase ones outside) differentiates local vs. global class names visually.

So, let’s take our new local class and assign it to the <li> in our TeaListItem component:

<li className={style.TeaListComponent}>

You may be wondering about the background color line (i.e. var(--color, var(--off-white));). What this snippet means is that by default the background will be our --off-white value. But, if we set a --color custom property on a card, it will override and choose that value instead.

At first, we’ll want all our cards to be --off-white, but we may want to change the value for individual cards later. This works very similarly to props in React. We can set a default value but create a slot where we can choose other values in specific circumstances. So, I encourage us to think of CSS custom properties like CSS’s version of props.

The style still won’t look great because we want to make sure that the images stay within their containers. Next.js’s Image component with the layout="fill" prop gets position: absolute; from the framework, so we can limit the size by putting in a container with position: relative;.

Let’s add a new class to our TeaListItem.module.css:

.ImageContainer {   position: relative;   width: 100%;   height: 10em;   overflow: hidden; }

And then let’s add className={styles.ImageContainer} on the <div> that contains our <Image>. I use relatively “simple” names such as ImageContainer because we’re inside a CSS module, so we don’t have to worry about conflicting with the outside style.

Finally, we want to add a bit of padding on the sides of the text, so let’s add one last class and rely on the spacing variables we set up as design tokens:

.Title {   padding-left: var(--space-sm);   padding-right: var(--space-sm); }

We can add this class to the <div> that contains our name and description. Now, our cards don’t look so bad:

Combining Global And Local Style

Next, we want to have our cards show in a grid layout. In this case, we’re just at the border between local and global styles. We could certainly code our layout directly on the TeaList component. But, I could also imagine that having a utility class that turns a list into a grid layout could be useful in several other places.

Let’s take the global approach here and add a new utility class in our styles/utilities.css:

.grid {   list-style: none;   display: grid;   grid-template-columns: repeat(auto-fill, minmax(var(--min-item-width, 30ch), 1fr));   gap: var(--space-md); }

Now, we can add the .grid class on any list, and we’ll get an automatically responsive grid layout. We can also change the --min-item-width custom property (by default 30ch) to change the minimum width of each element.

Note: Remember to think of custom properties like props! If this syntax looks unfamiliar, you can check out “Intrinsically Responsive CSS Grid With minmax() And min()” by Chris Coyier.

As we’ve written this style globally, it doesn’t require any fanciness to add className="grid" onto our TeaList component. But, let’s say we want to couple this global style with some additional local store. For example, we want to bring a bit more of the “tea aesthetic” in and to make every other card have a green background. All we’d need to do is make a new components/TeaList/TeaList.module.css file:

.TeaList > :nth-child(even) {   --color: var(--green); }

Remember how we made a --color custom property on our TeaListItem component? Well, now we can set it under specific circumstances. Note that we can still use child selectors within CSS modules, and it doesn’t matter that we’re selecting an element that is styled inside a different module. So, we can also use our local component styles to affect child components. This is a feature rather than a bug, as it allows us to take advantage of the CSS cascade! If we tried to replicate this effect some other way, we’d likely end up with some kind of JavaScript soup rather than three lines of CSS.

Then, how can we keep the global .grid class on our TeaList component while also adding the local .TeaList class? This is where the syntax can get a bit funky because we have to access our .TeaList class out of the CSS module by doing something like style.TeaList.

One option would be to use string interpolation to get something like:

<ul role="list" className={`$  {style.TeaList} grid`}>

In this small case, this might be good enough. If we’re mixing-and-matching more classes, I find that this syntax makes my brain explode a bit, so I will sometimes opt to use the classnames library. In this case, we end up with a more sensible-looking list:

<ul role="list" className={classnames(style.TeaList, "grid")}>

Now, we’ve finished up our Shop page, and we’ve made our TeaList component take advantage of both global and local styles.

A Balancing Act

We’ve now built our tea shop using only plain CSS to handle the styling. You may have noticed that we did not have to spend ages dealing with custom Webpack setups, installing external libraries, and so on. That’s because of the patterns that we’ve used work with Next.js out of the box. Furthermore, they encourage best CSS practices and fit naturally into the Next.js framework architecture.

Our CSS organization consisted of four key pieces:

  1. Design tokens,
  2. Global styles,
  3. Utility classes,
  4. Component styles.

As we continue building our site, our list of design tokens and utility classes will grow. Any styling that doesn’t make sense to add as a utility class, we can add into component styles using CSS modules. As a result, we can find a continuous balance between local and global styling concerns. We can also generate performant, intuitive CSS code that grows naturally alongside our Next.js site.

Articles on Smashing Magazine — For Web Designers And Developers

28 Jul

Global vs. Local Styling In Next.js

by TBSCategories: News

I have had a great experience using Next.js to manage complex front-end projects. Next.js is opinionated about how to organize JavaScript code, but it doesn’t have built-in opinions about how to organize CSS.

After working within the framework, I have found a series of organizational patterns that I believe both conform to the guiding philosophies of Next.js and exercise best CSS practices. In this article, we’ll build a website (a tea shop!) together to demonstrate these patterns.

Note: You probably will not need prior Next.js experience, although it would be good to have a basic understanding of React and to be open to learning some new CSS techniques.

Writing “Old-Fashioned” CSS

When first looking into Next.js, we may be tempted to consider using some kind of CSS-in-JS library. Though there may be benefits depending on the project, CSS-in-JS introduces many technical considerations. It requires using a new external library, which adds to the bundle size. CSS-in-JS can also have a performance impact by causing additional renders and dependencies on the global state.

Recommended reading: “The Unseen Performance Costs Of Modern CSS-in-JS Libraries In React Apps)” by Aggelos Arvanitakis

Furthermore, the whole point of using a library like Next.js is to statically render assets whenever possible, so it doesn’t make so much sense to write JS that needs to be run in the browser to generate CSS.

There are a couple of questions we have to consider when organizing style within Next.js:

How can we fit within the conventions/best practices of the framework?

How can we balance “global” styling concerns (fonts, colors, main layouts, and so on) with “local” ones (styles regarding individual components)?

The answer I have come up with for the first question is to simply write good ol’ fashioned CSS. Not only does Next.js support doing so with no additional setup; it also yields results that are performant and static.

To solve the second problem, I take an approach that can be summarized in four pieces:

  1. Design tokens
  2. Global styles
  3. Utility classes
  4. Component styles

I’m indebted to Andy Bell’s idea of CUBE CSS (“Composition, Utility, Block, Exception”) here. If you haven’t heard of this organizational principle before, I recommended checking out its official site or feature on the Smashing Podcast. One of the principles we will take from CUBE CSS is the idea that we should embrace rather than fear the CSS cascade. Let’s learn these techniques by applying them to a website project.

Getting Started

We’ll be building a tea store because, well, tea is tasty. We’ll start by running yarn create next-app to make a new Next.js project. Then, we’ll remove everything in the styles/ directory (it’s all sample code).

Note: If you want to follow along with the finished project, you can check it out here.

Design Tokens

In pretty much any CSS setup, there’s a clear benefit to storing all globally shared values in variables. If a client asks for a color to change, implementing the change is a one-liner rather than a massive find-and-replace mess. Consequently, a key part of our Next.js CSS setup will be storing all site-wide values as design tokens.

We’ll use inbuilt CSS Custom Properties to store these tokens. (If you’re not familiar with this syntax, you can check out “A Strategy Guide To CSS Custom Properties”.) I should mention that (in some projects) I’ve opted to use SASS/SCSS variables for this purpose. I haven’t found any real advantage, so I usually only include SASS in a project if I find I need other SASS features (mix-ins, iteration, importing files, and so on). CSS custom properties, by contrast, also work with the cascade and can be changed over time rather than statically compiling. So, for today, let’s stick with plain CSS.

In our styles/ directory, let’s make a new design_tokens.css file:

:root {   --green: #3FE79E;   --dark: #0F0235;   --off-white: #F5F5F3;    --space-sm: 0.5rem;   --space-md: 1rem;   --space-lg: 1.5rem;    --font-size-sm: 0.5rem;   --font-size-md: 1rem;   --font-size-lg: 2rem; }

Of course, this list can and will grow over time. Once we add this file, we need to hop over to our pages/_app.jsx file, which is the main layout for all our pages, and add:

import '../styles/design_tokens.css'

I like to think of design tokens as the glue that maintains consistency across the project. We will reference these variables on a global scale, as well as within individual components, ensuring a unified design language.

Global Styles

Next up, let’s add a page to our website! Let’s hop into the pages/index.jsx file (this is our homepage). We’ll delete all the boilerplate and add something like:

export default function Home() {   return <main>     <h1>Soothing Teas</h1>      <p>Welcome to our wonderful tea shop.</p>      <p>We have been open since 1987 and serve customers with hand-picked oolong teas.</p>   </main> }

Unfortunately, it will look quite plain, so let’s set some global styles for basic elements, e.g. <h1> tags. (I like to think of these styles as “reasonable global defaults”.) We may override them in specific cases, but they’re a good guess as to what we will want if we don’t.

I’ll put this in the styles/globals.css file (which comes by default from Next.js):

*, *::before, *::after {   box-sizing: border-box; }  body {   color: var(--off-white);   background-color: var(--dark); }  h1 {   color: var(--green);   font-size: var(--font-size-lg); }  p {   font-size: var(--font-size-md); }  p, article, section {   line-height: 1.5; }  :focus {   outline: 0.15rem dashed var(--off-white);   outline-offset: 0.25rem; } main:focus {   outline: none; }  img {   max-width: 100%; }

Of course, this version is fairly basic, but my globals.css file doesn’t usually end up actually needing to get too large. Here, I style basic HTML elements (headings, body, links, and so on). There is no need to wrap these elements in React components or to constantly add classes just to provide basic style.

I also include any resets of default browser styles. Occasionally, I will have some site-wide layout style to provide a “sticky footer”, for example, but they only belong here if all pages share the same layout. Otherwise, it will need to be scoped inside individual components.

I always include some kind of :focus styling to clearly indicate interactive elements for keyboard users when focused. It’s best to make it an integral part of the site’s design DNA!

Now, our website is starting to shape up:

Utility Classes

One area where our homepage could certainly improve is that the text currently always extends to the sides of the screen, so let’s limit its width. We need this layout on this page, but I imagine that we might need it on other pages, too. This is a great use case for a utility class!

I try to use utility classes sparingly rather than as a replacement for just writing CSS. My personal criteria for when it makes sense to add one to a project are:

  1. I need it repeatedly;
  2. It does one thing well;
  3. It applies across a range of different components or pages.

I think this case meets all three criteria, so let’s make a new CSS file styles/utilities.css and add:

.lockup {   max-width: 90ch;   margin: 0 auto; }

Then let’s add import '../styles/utilities.css' to our pages/_app.jsx. Finally, let’s change the <main> tag in our pages/index.jsx to <main className="lockup">.

Now, our page is coming together even more. Because we used the max-width property, we don’t need any media queries to make our layout mobile responsive. And, because we used the ch measurement unit — which equates to about the width of one character — our sizing is dynamic to the user’s browser font size.

As our website grows, we can continue adding more utility classes. I take a fairly utilitarian approach here: If I’m working and find I need another class for a color or something, I add it. I don’t add every possible class under the sun — it would bloat the CSS file size and make my code confusing. Sometimes, in larger projects, I like to break things up into a styles/utilities/ directory with a few different files; it’s up to the needs of the project.

We can think of utility classes as our toolkit of common, repeated styling commands that are shared globally. They help prevent us from constantly rewriting the same CSS between different components.

Component Styles

We’ve finished our homepage for the moment, but we still need to build a piece of our website: the online store. Our goal here will be to display a card grid of all the teas we want to sell, so we’ll need to add some components to our site.

Let’s start off by adding a new page at pages/shop.jsx:

export default function Shop() {   return <main>     <div className="lockup">       <h1>Shop Our Teas</h1>     </div>    </main> }

Then, we’ll need some teas to display. We’ll include a name, description, and image (in the public/ directory) for each tea:

const teas = [   { name: "Oolong", description: "A partially fermented tea.", image: "/oolong.jpg" },   // ... ]

Note: This isn’t an article about data fetching, so we took the easy route and defined an array at the beginning of the file.

Next, we’ll need to define a component to display our teas. Let’s start by making a components/ directory (Next.js doesn’t make this by default). Then, let’s add a components/TeaList directory. For any component that ends up needing more than one file, I usually put all the related files inside a folder. Doing so prevents our components/ folder from getting unnavigable.

Now, let’s add our components/TeaList/TeaList.jsx file:

import TeaListItem from './TeaListItem'  const TeaList = (props) => {   const { teas } = props    return <ul role="list">     {teas.map(tea =>       <TeaListItem tea={tea} key={tea.name} />)}   </ul> }  export default TeaList

The purpose of this component is to iterate over our teas and to show a list item for each one, so now let’s define our components/TeaList/TeaListItem.jsx component:

import Image from 'next/image'  const TeaListItem = (props) => {   const { tea } = props    return <li>     <div>       <Image src={tea.image} alt="" objectFit="cover" objectPosition="center" layout="fill" />     </div>    <div>       <h2>{tea.name}</h2>       <p>{tea.description}</p>     </div>   </li> }  export default TeaListItem

Note that we’re using Next.js’s built-in image component. I set the alt attribute to an empty string because the images are purely decorative in this case; we want to avoid bogging screen reader users down with long image descriptions here.

Finally, let’s make a components/TeaList/index.js file, so that our components are easy to import externally:

import TeaList from './TeaList' import TeaListItem from './TeaListItem'  export { TeaListItem }  export default TeaList

And then, let’s plug it all together by adding import TeaList from ../components/TeaList and a <TeaList teas={teas} /> element to our Shop page. Now, our teas will show up in a list, but it won’t be so pretty.

Colocating Style With Components Through CSS Modules

Let’s start off by styling our cards (the TeaListLitem component). Now, for the first time in our project, we’re going to want to add style that is specific to just one component. Let’s create a new file components/TeaList/TeaListItem.module.css.

You may be wondering about the module in the file extension. This is a CSS Module. Next.js supports CSS modules and includes some good documentation on them. When we write a class name from a CSS module such as .TeaListItem, it will automatically get transformed into something more like . TeaListItem_TeaListItem__TFOk_ with a bunch of extra characters tacked on. Consequently, we can use any class name we want without being concerned that it will conflict with other class names elsewhere in our site.

Another advantage to CSS modules is performance. Next.js includes a dynamic import feature. next/dynamic lets us lazy load components so that their code only gets loaded when needed, rather than adding to the whole bundle size. If we import the necessary local styles into individual components, then users can also lazy load the CSS for dynamically imported components. For large projects, we may choose to lazy load significant chunks of our code and only to load the most necessary JS/CSS upfront. As a result, I usually end up making a new CSS Module file for every new component that needs local styling.

Let’s start by adding some initial styles to our file:

.TeaListItem {   display: flex;   flex-direction: column;   gap: var(--space-sm);   background-color: var(--color, var(--off-white));   color: var(--dark);   border-radius: 3px;   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }

Then, we can import style from ./TeaListItem.module.css in our TeaListitem component. The style variable comes in like a JavaScript object, so we can access this class-like style.TeaListItem.

Note: Our class name doesn’t need to be capitalized. I’ve found that a convention of capitalized class names inside of modules (and lowercase ones outside) differentiates local vs. global class names visually.

So, let’s take our new local class and assign it to the <li> in our TeaListItem component:

<li className={style.TeaListComponent}>

You may be wondering about the background color line (i.e. var(--color, var(--off-white));). What this snippet means is that by default the background will be our --off-white value. But, if we set a --color custom property on a card, it will override and choose that value instead.

At first, we’ll want all our cards to be --off-white, but we may want to change the value for individual cards later. This works very similarly to props in React. We can set a default value but create a slot where we can choose other values in specific circumstances. So, I encourage us to think of CSS custom properties like CSS’s version of props.

The style still won’t look great because we want to make sure that the images stay within their containers. Next.js’s Image component with the layout="fill" prop gets position: absolute; from the framework, so we can limit the size by putting in a container with position: relative;.

Let’s add a new class to our TeaListItem.module.css:

.ImageContainer {   position: relative;   width: 100%;   height: 10em;   overflow: hidden; }

And then let’s add className={styles.ImageContainer} on the <div> that contains our <Image>. I use relatively “simple” names such as ImageContainer because we’re inside a CSS module, so we don’t have to worry about conflicting with the outside style.

Finally, we want to add a bit of padding on the sides of the text, so let’s add one last class and rely on the spacing variables we set up as design tokens:

.Title {   padding-left: var(--space-sm);   padding-right: var(--space-sm); }

We can add this class to the <div> that contains our name and description. Now, our cards don’t look so bad:

Combining Global And Local Style

Next, we want to have our cards show in a grid layout. In this case, we’re just at the border between local and global styles. We could certainly code our layout directly on the TeaList component. But, I could also imagine that having a utility class that turns a list into a grid layout could be useful in several other places.

Let’s take the global approach here and add a new utility class in our styles/utilities.css:

.grid {   list-style: none;   display: grid;   grid-template-columns: repeat(auto-fill, minmax(var(--min-item-width, 30ch), 1fr));   gap: var(--space-md); }

Now, we can add the .grid class on any list, and we’ll get an automatically responsive grid layout. We can also change the --min-item-width custom property (by default 30ch) to change the minimum width of each element.

Note: Remember to think of custom properties like props! If this syntax looks unfamiliar, you can check out “Intrinsically Responsive CSS Grid With minmax() And min()” by Chris Coyier.

As we’ve written this style globally, it doesn’t require any fanciness to add className="grid" onto our TeaList component. But, let’s say we want to couple this global style with some additional local store. For example, we want to bring a bit more of the “tea aesthetic” in and to make every other card have a green background. All we’d need to do is make a new components/TeaList/TeaList.module.css file:

.TeaList > :nth-child(even) {   --color: var(--green); }

Remember how we made a --color custom property on our TeaListItem component? Well, now we can set it under specific circumstances. Note that we can still use child selectors within CSS modules, and it doesn’t matter that we’re selecting an element that is styled inside a different module. So, we can also use our local component styles to affect child components. This is a feature rather than a bug, as it allows us to take advantage of the CSS cascade! If we tried to replicate this effect some other way, we’d likely end up with some kind of JavaScript soup rather than three lines of CSS.

Then, how can we keep the global .grid class on our TeaList component while also adding the local .TeaList class? This is where the syntax can get a bit funky because we have to access our .TeaList class out of the CSS module by doing something like style.TeaList.

One option would be to use string interpolation to get something like:

<ul role="list" className={`$  {style.TeaList} grid`}>

In this small case, this might be good enough. If we’re mixing-and-matching more classes, I find that this syntax makes my brain explode a bit, so I will sometimes opt to use the classnames library. In this case, we end up with a more sensible-looking list:

<ul role="list" className={classnames(style.TeaList, "grid")}>

Now, we’ve finished up our Shop page, and we’ve made our TeaList component take advantage of both global and local styles.

A Balancing Act

We’ve now built our tea shop using only plain CSS to handle the styling. You may have noticed that we did not have to spend ages dealing with custom Webpack setups, installing external libraries, and so on. That’s because of the patterns that we’ve used work with Next.js out of the box. Furthermore, they encourage best CSS practices and fit naturally into the Next.js framework architecture.

Our CSS organization consisted of four key pieces:

  1. Design tokens,
  2. Global styles,
  3. Utility classes,
  4. Component styles.

As we continue building our site, our list of design tokens and utility classes will grow. Any styling that doesn’t make sense to add as a utility class, we can add into component styles using CSS modules. As a result, we can find a continuous balance between local and global styling concerns. We can also generate performant, intuitive CSS code that grows naturally alongside our Next.js site.

Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
03 Nov

Comparing Styling Methods In Next.js

by TBSCategories: News

As you might be aware, there are many differing perspectives on CSS-in-JS, and we all have an opinion of the topic in one way or the other that might be quite different from the opinions of framework authors.

Next.js is one of the recommended tool-chains when creating a new React app. Tools like Next have a simple goal of abstracting away commonly redundant tasks when writing a React app. This helps developers focus more on writing code than reinventing the wheel. While this is usually a good thing, it can also be a little tedious to get started with. For one, there’s a hurdle to cross by learning about the abstractions, and while there are a bevy of that in Next (Routing, Data Fetching…), one often overlooked is Styling.

To serve a wider audience, Next.js supports a myriad of ways to style your components. Whether you belong to the Utility first or CSS-in-JS party isn’t much of Next’s concern, its concern is how you inject your choice into its API.

The goal of this article is to help you understand how to set up styling in your Next app. We’ll be using different methods to handle the comparison. We’ll implement the different types of styling in a book application I have set up. The styling methods we’ll be looking at include:

  1. Global CSS,
  2. SASS/SCSS,
  3. Component-Level SASS/SCSS,
  4. Component-Level CSS (CSS Modules),
  5. Styled-Components,
  6. Styled JSX,
  7. Emotion.

Prerequisite

Before we begin our styling tour, there are some Next nuances you need to acquaint yourself with.

  1. _app.js
    This is a custom component that resides in the pages folder. Next.js uses this component to initialize pages.
  2. _document.js
    Like _app.js, _document.js is a custom component that Next.js uses to augment your applications <html> and <body> tags. This is necessary because Next.js pages skip the definition of the surrounding document’s markup.
  3. _.babelrc
    When present, Next.js uses this file as the single source of truth for some internal configuration and gives you permission to extend it.

Keep in mind that if you have your server running before adding the _app.js file, then you need to restart it.

Creating A Next App With create-next-app

Creating a Next app with create-next-app is as simple as following the steps below:

  • Install create-next-app globally.
yarn global add create-next-app // Installs create-next-app globally
  • Create a new Next app named styling-in-next.
create-next-app styling-in-next // Creates a new Next app named styling-in-next

  • Change directory into the new site.
cd styling-in-next // Switch directory into the new Next app
  • Run the site.
yarn dev -p 3000 // Instruct Next to run on port 3000

Refer to the documentation for more information on creating and running a Next app.

The app should now be running on http://localhost:3000.

Demo Repository

As we go along we’ll be building a contrived Bookshelf by applying different styling methods to each books. The end result will look like:

The image above shows 6 books; each book will have its own components, then we’ll apply a specific style type to each specific book, i.e. Book 1 will make use of a global style while Book 2 will make use of another. This way we’ll see how each of these styles work and how they can be used. This will help you in making a better decision on what option to choose.

To make things simple, I’ve scaffolded a GitHub repository for you to follow along. You can grab it here.

Some changes have also been made to the default starter generated by create-next-app. Folders like emotion, global, modules, styled-components etc. have been added to the styles folder — with their corresponding style files — as well as a components directory with multiple components.

The index.js file has been modified to import and render the needed components, and each of the components has a similar structure as shown in the image below.

If you cloned and ran the demo repository, here’s what your page should look like:

With all that out of the way, let’s get styling.

Global Style

One of the common things you’d normally do when you start a new web project is to reset or normalize your CSS so there’s a uniform starting position among browsers. This is a perfect example of using Global CSS without worrying about scoping.

/ styles/global/globals.css / html {   box-sizing: border-box;   font-size: 16px;   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } , :before, *:after {   box-sizing: inherit; } body, h1, h2, h3, h4, h5, h6, p, ol, ul {   margin: 0;   padding: 0;   font-weight: normal; } h1, h2, h3, h4, h5, h6 {   font-weight: bold; }  ol, ul {   list-style: none; }  img {   max-width: 100%;   height: auto; }  a {   color: inherit;   text-decoration: none; }

  • Import the CSS reset styles/global/globals.css in pages/_app.js.
// pages/_app.js import "../styles/global/globals.css";  function MyApp({Component, pageProps}) {   return <Component {...pageProps} />; }  export default MyApp;

Global styles can only be imported in the pages/_app.js. This is directly logical because these styles will apply to all pages and components in your application — regardless of where you import them — so it is better to have a single source of [import] truth to keep things straightforward, and/or if something goes wrong.

At this point, we do not have a lot of visual changes to our Bookshelf since we have only made normalization changes. One thing you might notice is the font and spacing changes.

SASS/SCSS

Next.js also allows styling with SASS with the .sass or .scss extension. Installing Sass is a requirement. Just like global styles, they can only be imported in pages/_app.js.

  • Install the Sass package.
yarn add sass
  • Update styles/scss/bookshelf.scss.
// styles/scss/bookshelf.scss .the-bookshelf {   width: 100vw;   height: 100vh;   background-color: #e3e3e3;   display: flex;   justify-content: center;   align-items: center;    .bookshelf-wrap {     > .bookshelf {       box-shadow: inset 0 -20px #7b5019;       padding-bottom: 20px;       display: flex;       align-items: flex-end;     }      [class*="book"] {       font-size: 32px;       letter-spacing: -0.045em;       display: flex;       transition: 0.2s;        &:hover {         transform: none;       }     }      .book-info {       text-transform: uppercase;       writing-mode: sideways-rl;       display: flex;       justify-content: space-around;       flex: 1;       align-items: center;       font-weight: bold;       padding: 16px 0;        .title {         font-weight: inherit;         font-size: 20px;       }        .author {         font-weight: inherit;         font-size: 15px;       }     }   } }
  • Also update styles/sass/bookone.sass and styles/sass/booktwo.sass like so:
// styles/sass/bookone.sass   .book-one     color: #f00     width: 78px     height: 350px     transform: rotate(-4deg)     margin-left: 16px     margin-right: 23px     background-color: black
// styles/sass/booktwo.sass .book-two   color: #781e0b   width: 38px   height: 448px   margin-right: 23px   background-color: #ffab44

SASS (.sass) is based on indentation. To make formatting easier, you can install this VSCode Extension for SASS files support (formatting, syntax highlighting…)

  • Import the three style files — styles/scss/bookshelf.scss , styles/sass/bookone.sass, and styles/sass/booktwo.sass — in pages/_app.js.
// pages/_app.js import "../styles/globals.css"; import "../styles/scss/bookshelf.scss"; import "../styles/sass/bookone.sass"; import "../styles/sass/booktwo.sass";  function MyApp({Component, pageProps}) {   return ; }  export default MyApp;

Our Bookshelf is beginning to take shape. With the styles applied, the first and second book should be styled and displayed as intended.

CSS Modules

CSS Modules is a component-level CSS, that comes built-in with Next and can be activated by naming the style files with the .module.css extension. It is also possible to use CSS Modules with SASS/SCSS with the .module.sass or .module.scss extension.

Let’s style the components/BookThree.js component with it.

  • Update styles/modules/BookThree.module.css.
 /* styles/modules/BookThree.module.css */ .book-three {   color: #df66c3;   width: 106px;   height: 448px;   margin-right: 23px;   background-color: #153086;   transform: rotate(-4deg); }
  • Import styles/modules/BookThree.module.css in components/BookThree.js, and apply the .book-three class.
// components/BookThree.js import BookThreeStyles from "../styles/modules/BookThree.module.css";  export default function BookThree() {   return (     <div className={BookThreeStyles["book-three"]}>       <div className="book-info">         <p className="title">the revolt of the public</p>         <p className="author">Martin Gurri</p>       </div>     </div>   ); }

Accessing class names in CSS Modules is similar to Property Accessors in JavaScript — with the dot or bracket notation. Here we import BookThreeStyles and then use the bracket notation to apply the style we have in styles/modules/BookThree.module.css file.

If the selector (in this case, class name) was properly accessed, the third book should be styled now.

Emotion

Emotion is a CSS-in-JS library and like any other CSS-in-JS, allows you to write CSS styles with JavaScript.

Let’s style the components/BookFour.js component with it.

  • Install the packages: @emotion/core, @emotion/styled, emotion, emotion-server.
yarn add @emotion/core @emotion/styled emotion emotion-server
  • Update styles/emotion/StyledBookFour.js.
// styles/emotion/StyledBookFour.js import styled from "@emotion/styled";  export const StyledBookFour = styled.div`   color: white;   width: 38px;   height: 400px;   margin-left: 20px;   margin-right: 10px;   background-color: #2faad2;   transform: rotate(4deg); `;

After importing styled from @emotion/styled, we export the StyledBookFour styled component — not to be confused with the other CSS-in-JS Styled Component — enhanced with the styled emotion method as in styled.div. Then we can use <StyledBookFour/> as in the next step below.

Learn more about emotion’s styled function.

  • Using <StyledBookFour/> is similar to how you’d use any other React component. Import styles/emotion/StyledBookFour.js in components/BookFour.js, and apply the StyledBookFour component.
// components/BookFour.js import {StyledBookFour} from "../styles/emotion/StyledBookFour";  export default function BookFour() {   return (     <StyledBookFour className="book-four">       <div className="book-info">         <p className="title">the man died</p>         <p className="author">wole soyinka</p>       </div>     </StyledBookFour>   ); }

With a sufficient dose of emotion, the fourth book should be thus styled.

Styled JSX

Like Global CSS and CSS-Modules, Styled-JSX works with Next.js without any extra setup required. If it helps, Styled-JSX is also Vercel’s offering of a component-based CSS, the same creators of Next.js.

Let’s style the components/BookFive.js component with it.

To keep things simple, we use the internal mode of styled-jsx here. By passing the jsx prop to the <style/> component, we are able to write as much CSS as we want like we did with .book-five, with the additional benefit of the style being localized to the <BookFive/> component.

// components/BookFive.js export default function BookFive() {   return (     <div className="book-five">       <div className="book-info">         <p className="title">there was a country</p>         <p className="author">Chinua Achebe</p>       </div>       <style jsx>{`         .book-five {           color: #fff;           width: 106px;           height: 448px;           margin-right: 23px;           background-color: #000;           transform: rotate(4deg);         }       `}</style>     </div>   ); }

And just like that, the fifth book takes its styling.

Styled Components

Styled-Component, just like Emotion, is also a CSS-in-JS library that allows you to write CSS styles with JavaScript. Getting it setup is a little bit involved.

  • First, install babel-plugin-styled-components and styled-components.
yarn add babel-plugin-styled-components styled-components
  • Create a .babelrc file at the root of your app, and a pages/_document.js file, as shown in the before (left) and after(right) image below.

  • Update the .babelrc file to include the next/babel preset and include the styled-components plugin, with server-side-rendering (ssr) enabled. 
// .babelrc {   "presets": ["next/babel"],   "plugins": [     [       "styled-components",       {         "ssr": true       }     ]   ] }
  • Update pages/_document.js by injecting the server-side rendered styles into the <head>.

Keep in mind, the snippet below (pages/_document.js) is a required logic for styled-components to work with Next.js. You almost have to do nothing but copy the logic as pointed out in the styled-components documentation.

// pages/_document.js import Document from "next/document"; import {ServerStyleSheet} from "styled-components";  export default class MyDocument extends Document {   static async getInitialProps(ctx) {     const sheet = new ServerStyleSheet();     const originalRenderPage = ctx.renderPage;      try {       ctx.renderPage = () =>         originalRenderPage({           enhanceApp: (App) => (props) =>             sheet.collectStyles(<App {...props} />),         });        const initialProps = await Document.getInitialProps(ctx);       return {         ...initialProps,         styles: (           <>             {initialProps.styles}             {sheet.getStyleElement()}           </>         ),       };     } finally {       sheet.seal();     }   } }

After the updates to .babelrc, and pages/_document.js, we can now begin to use styled-components.

  • Update styles/styled-components/StyledBookSix.js.

styled is an internal utility method that transforms the styling from JavaScript into actual CSS. <StyledBookSix/> is, and, can be used as any other React component.

// styles/StyledBookSix.js import styled from "styled-components";  const StyledBookSix = styled.div`   color: #fff;   width: 106px;   height: 448px;   margin-right: 23px;   background-color: rebeccapurple; `;  export default StyledBookSix;

Learn more about How To Use Styled-Components in React.

  • Import styles/styled-components/StyledBookSix.js in components/BookSix.js, using the imported styled-components <StyledBookSix/>.
// components/BookSix.js import StyledBookSix from "../styles/styled-components/StyledBookSix";  export default function BookSix() {   return (     <StyledBookSix className="book-six">       <div className="book-info">         <p className="title">purple hibiscus</p>         <p className="author">chimamanda ngozi adichie</p>       </div>     </StyledBookSix>   ); }

With the first to sixth step completed, the sixth should be styled, and the Bookshelf done:

That’s it.

If all went well, then you should have the complete Bookshelf with the books waiting to be read.

Conclusion

In my own usage with Next.js, Global styles and styled-components have often been sufficient. But there’s no doubt that all these methods have their pros and cons. And as you settle on what method to use, just keep in mind: in the end, it’s all CSS. At this point, I believe you can be able to figure out which pattern best serves you in your next project.

Resources

I find that for learning about setting up styling methods with Next.js, there’s no better place than its official documentation.

But there are also specific repositories for various styling methods. You can go through the various repository to learn more, or check for update, as things may change incognito.

  1. Tailwind CSS
  2. CSS Modules
  3. Less
  4. Stylus
  5. Tailwind CSS with Emotion
  6. Styletron
  7. Glamor
  8. CXS
  9. Aphrodite
  10. Fela
  11. Styled-JSX

Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
02 Nov

Comparing Styling Methods In Next.js

by TBSCategories: News

As you might be aware, there are many differing perspectives on CSS-in-JS, and we all have an opinion of the topic in one way or the other that might be quite different from the opinions of framework authors.

Next.js is one of the recommended tool-chains when creating a new React app. Tools like Next have a simple goal of abstracting away commonly redundant tasks when writing a React app. This helps developers focus more on writing code than reinventing the wheel. While this is usually a good thing, it can also be a little tedious to get started with. For one, there’s a hurdle to cross by learning about the abstractions, and while there are a bevy of that in Next (Routing, Data Fetching…), one often overlooked is Styling.

To serve a wider audience, Next.js supports a myriad of ways to style your components. Whether you belong to the Utility first or CSS-in-JS party isn’t much of Next’s concern, its concern is how you inject your choice into its API.

The goal of this article is to help you understand how to set up styling in your Next app. We’ll be using different methods to handle the comparison. We’ll implement the different types of styling in a book application I have set up. The styling methods we’ll be looking at include:

  1. Global CSS,
  2. SASS/SCSS,
  3. Component-Level SASS/SCSS,
  4. Component-Level CSS (CSS Modules),
  5. Styled-Components,
  6. Styled JSX,
  7. Emotion.

Prerequisite

Before we begin our styling tour, there are some Next nuances you need to acquaint yourself with.

  1. _app.js
    This is a custom component that resides in the pages folder. Next.js uses this component to initialize pages.
  2. _document.js
    Like _app.js, _document.js is a custom component that Next.js uses to augment your applications <html> and <body> tags. This is necessary because Next.js pages skip the definition of the surrounding document’s markup.
  3. _.babelrc
    When present, Next.js uses this file as the single source of truth for some internal configuration and gives you permission to extend it.

Keep in mind that if you have your server running before adding the _app.js file, then you need to restart it.

Creating A Next App With create-next-app

Creating a Next app with create-next-app is as simple as following the steps below:

  • Install create-next-app globally.
yarn global add create-next-app // Installs create-next-app globally
  • Create a new Next app named styling-in-next.
create-next-app styling-in-next // Creates a new Next app named styling-in-next

  • Change directory into the new site.
cd styling-in-next // Switch directory into the new Next app
  • Run the site.
yarn dev -p 3000 // Instruct Next to run on port 3000

Refer to the documentation for more information on creating and running a Next app.

The app should now be running on http://localhost:3000.

Demo Repository

As we go along we’ll be building a contrived Bookshelf by applying different styling methods to each books. The end result will look like:

The image above shows 6 books; each book will have its own components, then we’ll apply a specific style type to each specific book, i.e. Book 1 will make use of a global style while Book 2 will make use of another. This way we’ll see how each of these styles work and how they can be used. This will help you in making a better decision on what option to choose.

To make things simple, I’ve scaffolded a GitHub repository for you to follow along. You can grab it here.

Some changes have also been made to the default starter generated by create-next-app. Folders like emotion, global, modules, styled-components etc. have been added to the styles folder — with their corresponding style files — as well as a components directory with multiple components.

The index.js file has been modified to import and render the needed components, and each of the components has a similar structure as shown in the image below.

If you cloned and ran the demo repository, here’s what your page should look like:

With all that out of the way, let’s get styling.

Global Style

One of the common things you’d normally do when you start a new web project is to reset or normalize your CSS so there’s a uniform starting position among browsers. This is a perfect example of using Global CSS without worrying about scoping.

/ styles/global/globals.css / html {   box-sizing: border-box;   font-size: 16px;   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } , :before, *:after {   box-sizing: inherit; } body, h1, h2, h3, h4, h5, h6, p, ol, ul {   margin: 0;   padding: 0;   font-weight: normal; } h1, h2, h3, h4, h5, h6 {   font-weight: bold; }  ol, ul {   list-style: none; }  img {   max-width: 100%;   height: auto; }  a {   color: inherit;   text-decoration: none; }

  • Import the CSS reset styles/global/globals.css in pages/_app.js.
// pages/_app.js import "../styles/global/globals.css";  function MyApp({Component, pageProps}) {   return <Component {...pageProps} />; }  export default MyApp;

Global styles can only be imported in the pages/_app.js. This is directly logical because these styles will apply to all pages and components in your application — regardless of where you import them — so it is better to have a single source of [import] truth to keep things straightforward, and/or if something goes wrong.

At this point, we do not have a lot of visual changes to our Bookshelf since we have only made normalization changes. One thing you might notice is the font and spacing changes.

SASS/SCSS

Next.js also allows styling with SASS with the .sass or .scss extension. Installing Sass is a requirement. Just like global styles, they can only be imported in pages/_app.js.

  • Install the Sass package.
yarn add sass
  • Update styles/scss/bookshelf.scss.
// styles/scss/bookshelf.scss .the-bookshelf {   width: 100vw;   height: 100vh;   background-color: #e3e3e3;   display: flex;   justify-content: center;   align-items: center;    .bookshelf-wrap {     > .bookshelf {       box-shadow: inset 0 -20px #7b5019;       padding-bottom: 20px;       display: flex;       align-items: flex-end;     }      [class*="book"] {       font-size: 32px;       letter-spacing: -0.045em;       display: flex;       transition: 0.2s;        &:hover {         transform: none;       }     }      .book-info {       text-transform: uppercase;       writing-mode: sideways-rl;       display: flex;       justify-content: space-around;       flex: 1;       align-items: center;       font-weight: bold;       padding: 16px 0;        .title {         font-weight: inherit;         font-size: 20px;       }        .author {         font-weight: inherit;         font-size: 15px;       }     }   } }
  • Also update styles/sass/bookone.sass and styles/sass/booktwo.sass like so:
// styles/sass/bookone.sass   .book-one     color: #f00     width: 78px     height: 350px     transform: rotate(-4deg)     margin-left: 16px     margin-right: 23px     background-color: black
// styles/sass/booktwo.sass .book-two   color: #781e0b   width: 38px   height: 448px   margin-right: 23px   background-color: #ffab44

SASS (.sass) is based on indentation. To make formatting easier, you can install this VSCode Extension for SASS files support (formatting, syntax highlighting…)

  • Import the three style files — styles/scss/bookshelf.scss , styles/sass/bookone.sass, and styles/sass/booktwo.sass — in pages/_app.js.
// pages/_app.js import "../styles/globals.css"; import "../styles/scss/bookshelf.scss"; import "../styles/sass/bookone.sass"; import "../styles/sass/booktwo.sass";  function MyApp({Component, pageProps}) {   return ; }  export default MyApp;

Our Bookshelf is beginning to take shape. With the styles applied, the first and second book should be styled and displayed as intended.

CSS Modules

CSS Modules is a component-level CSS, that comes built-in with Next and can be activated by naming the style files with the .module.css extension. It is also possible to use CSS Modules with SASS/SCSS with the .module.sass or .module.scss extension.

Let’s style the components/BookThree.js component with it.

  • Update styles/modules/BookThree.module.css.
 /* styles/modules/BookThree.module.css */ .book-three {   color: #df66c3;   width: 106px;   height: 448px;   margin-right: 23px;   background-color: #153086;   transform: rotate(-4deg); }
  • Import styles/modules/BookThree.module.css in components/BookThree.js, and apply the .book-three class.
// components/BookThree.js import BookThreeStyles from "../styles/modules/BookThree.module.css";  export default function BookThree() {   return (     <div className={BookThreeStyles["book-three"]}>       <div className="book-info">         <p className="title">the revolt of the public</p>         <p className="author">Martin Gurri</p>       </div>     </div>   ); }

Accessing class names in CSS Modules is similar to Property Accessors in JavaScript — with the dot or bracket notation. Here we import BookThreeStyles and then use the bracket notation to apply the style we have in styles/modules/BookThree.module.css file.

If the selector (in this case, class name) was properly accessed, the third book should be styled now.

Emotion

Emotion is a CSS-in-JS library and like any other CSS-in-JS, allows you to write CSS styles with JavaScript.

Let’s style the components/BookFour.js component with it.

  • Install the packages: @emotion/core, @emotion/styled, emotion, emotion-server.
yarn add @emotion/core @emotion/styled emotion emotion-server
  • Update styles/emotion/StyledBookFour.js.
// styles/emotion/StyledBookFour.js import styled from "@emotion/styled";  export const StyledBookFour = styled.div`   color: white;   width: 38px;   height: 400px;   margin-left: 20px;   margin-right: 10px;   background-color: #2faad2;   transform: rotate(4deg); `;

After importing styled from @emotion/styled, we export the StyledBookFour styled component — not to be confused with the other CSS-in-JS Styled Component — enhanced with the styled emotion method as in styled.div. Then we can use <StyledBookFour/> as in the next step below.

Learn more about emotion’s styled function.

  • Using <StyledBookFour/> is similar to how you’d use any other React component. Import styles/emotion/StyledBookFour.js in components/BookFour.js, and apply the StyledBookFour component.
// components/BookFour.js import {StyledBookFour} from "../styles/emotion/StyledBookFour";  export default function BookFour() {   return (     <StyledBookFour className="book-four">       <div className="book-info">         <p className="title">the man died</p>         <p className="author">wole soyinka</p>       </div>     </StyledBookFour>   ); }

With a sufficient dose of emotion, the fourth book should be thus styled.

Styled JSX

Like Global CSS and CSS-Modules, Styled-JSX works with Next.js without any extra setup required. If it helps, Styled-JSX is also Vercel’s offering of a component-based CSS, the same creators of Next.js.

Let’s style the components/BookFive.js component with it.

To keep things simple, we use the internal mode of styled-jsx here. By passing the jsx prop to the <style/> component, we are able to write as much CSS as we want like we did with .book-five, with the additional benefit of the style being localized to the <BookFive/> component.

// components/BookFive.js export default function BookFive() {   return (     <div className="book-five">       <div className="book-info">         <p className="title">there was a country</p>         <p className="author">Chinua Achebe</p>       </div>       <style jsx>{`         .book-five {           color: #fff;           width: 106px;           height: 448px;           margin-right: 23px;           background-color: #000;           transform: rotate(4deg);         }       `}</style>     </div>   ); }

And just like that, the fifth book takes its styling.

Styled Components

Styled-Component, just like Emotion, is also a CSS-in-JS library that allows you to write CSS styles with JavaScript. Getting it setup is a little bit involved.

  • First, install babel-plugin-styled-components and styled-components.
yarn add babel-plugin-styled-components styled-components
  • Create a .babelrc file at the root of your app, and a pages/_document.js file, as shown in the before (left) and after(right) image below.

  • Update the .babelrc file to include the next/babel preset and include the styled-components plugin, with server-side-rendering (ssr) enabled. 
// .babelrc {   "presets": ["next/babel"],   "plugins": [     [       "styled-components",       {         "ssr": true       }     ]   ] }
  • Update pages/_document.js by injecting the server-side rendered styles into the <head>.

Keep in mind, the snippet below (pages/_document.js) is a required logic for styled-components to work with Next.js. You almost have to do nothing but copy the logic as pointed out in the styled-components documentation.

// pages/_document.js import Document from "next/document"; import {ServerStyleSheet} from "styled-components";  export default class MyDocument extends Document {   static async getInitialProps(ctx) {     const sheet = new ServerStyleSheet();     const originalRenderPage = ctx.renderPage;      try {       ctx.renderPage = () =>         originalRenderPage({           enhanceApp: (App) => (props) =>             sheet.collectStyles(<App {...props} />),         });        const initialProps = await Document.getInitialProps(ctx);       return {         ...initialProps,         styles: (           <>             {initialProps.styles}             {sheet.getStyleElement()}           </>         ),       };     } finally {       sheet.seal();     }   } }

After the updates to .babelrc, and pages/_document.js, we can now begin to use styled-components.

  • Update styles/styled-components/StyledBookSix.js.

styled is an internal utility method that transforms the styling from JavaScript into actual CSS. <StyledBookSix/> is, and, can be used as any other React component.

// styles/StyledBookSix.js import styled from "styled-components";  const StyledBookSix = styled.div`   color: #fff;   width: 106px;   height: 448px;   margin-right: 23px;   background-color: rebeccapurple; `;  export default StyledBookSix;

Learn more about How To Use Styled-Components in React.

  • Import styles/styled-components/StyledBookSix.js in components/BookSix.js, using the imported styled-components <StyledBookSix/>.
// components/BookSix.js import StyledBookSix from "../styles/styled-components/StyledBookSix";  export default function BookSix() {   return (     <StyledBookSix className="book-six">       <div className="book-info">         <p className="title">purple hibiscus</p>         <p className="author">chimamanda ngozi adichie</p>       </div>     </StyledBookSix>   ); }

With the first to sixth step completed, the sixth should be styled, and the Bookshelf done:

That’s it.

If all went well, then you should have the complete Bookshelf with the books waiting to be read.

Conclusion

In my own usage with Next.js, Global styles and styled-components have often been sufficient. But there’s no doubt that all these methods have their pros and cons. And as you settle on what method to use, just keep in mind: in the end, it’s all CSS. At this point, I believe you can be able to figure out which pattern best serves you in your next project.

Resources

I find that for learning about setting up styling methods with Next.js, there’s no better place than its official documentation.

But there are also specific repositories for various styling methods. You can go through the various repository to learn more, or check for update, as things may change incognito.

  1. Tailwind CSS
  2. CSS Modules
  3. Less
  4. Stylus
  5. Tailwind CSS with Emotion
  6. Styletron
  7. Glamor
  8. CXS
  9. Aphrodite
  10. Fela
  11. Styled-JSX

Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
02 Nov

Comparing Styling Methods In Next.js

by TBSCategories: News

As you might be aware, there are many differing perspectives on CSS-in-JS, and we all have an opinion of the topic in one way or the other that might be quite different from the opinions of framework authors.

Next.js is one of the recommended tool-chains when creating a new React app. Tools like Next have a simple goal of abstracting away commonly redundant tasks when writing a React app. This helps developers focus more on writing code than reinventing the wheel. While this is usually a good thing, it can also be a little tedious to get started with. For one, there’s a hurdle to cross by learning about the abstractions, and while there are a bevy of that in Next (Routing, Data Fetching…), one often overlooked is Styling.

To serve a wider audience, Next.js supports a myriad of ways to style your components. Whether you belong to the Utility first or CSS-in-JS party isn’t much of Next’s concern, its concern is how you inject your choice into its API.

The goal of this article is to help you understand how to set up styling in your Next app. We’ll be using different methods to handle the comparison. We’ll implement the different types of styling in a book application I have set up. The styling methods we’ll be looking at include:

  1. Global CSS,
  2. SASS/SCSS,
  3. Component-Level SASS/SCSS,
  4. Component-Level CSS (CSS Modules),
  5. Styled-Components,
  6. Styled JSX,
  7. Emotion.

Prerequisite

Before we begin our styling tour, there are some Next nuances you need to acquaint yourself with.

  1. _app.js
    This is a custom component that resides in the pages folder. Next.js uses this component to initialize pages.
  2. _document.js
    Like _app.js, _document.js is a custom component that Next.js uses to augment your applications <html> and <body> tags. This is necessary because Next.js pages skip the definition of the surrounding document’s markup.
  3. _.babelrc
    When present, Next.js uses this file as the single source of truth for some internal configuration and gives you permission to extend it.

Keep in mind that if you have your server running before adding the _app.js file, then you need to restart it.

Creating A Next App With create-next-app

Creating a Next app with create-next-app is as simple as following the steps below:

  • Install create-next-app globally.
yarn global add create-next-app // Installs create-next-app globally
  • Create a new Next app named styling-in-next.
create-next-app styling-in-next // Creates a new Next app named styling-in-next

  • Change directory into the new site.
cd styling-in-next // Switch directory into the new Next app
  • Run the site.
yarn dev -p 3000 // Instruct Next to run on port 3000

Refer to the documentation for more information on creating and running a Next app.

The app should now be running on http://localhost:3000.

Demo Repository

As we go along we’ll be building a contrived Bookshelf by applying different styling methods to each books. The end result will look like:

The image above shows 6 books; each book will have its own components, then we’ll apply a specific style type to each specific book, i.e. Book 1 will make use of a global style while Book 2 will make use of another. This way we’ll see how each of these styles work and how they can be used. This will help you in making a better decision on what option to choose.

To make things simple, I’ve scaffolded a GitHub repository for you to follow along. You can grab it here.

Some changes have also been made to the default starter generated by create-next-app. Folders like emotion, global, modules, styled-components etc. have been added to the styles folder — with their corresponding style files — as well as a components directory with multiple components.

The index.js file has been modified to import and render the needed components, and each of the components has a similar structure as shown in the image below.

If you cloned and ran the demo repository, here’s what your page should look like:

With all that out of the way, let’s get styling.

Global Style

One of the common things you’d normally do when you start a new web project is to reset or normalize your CSS so there’s a uniform starting position among browsers. This is a perfect example of using Global CSS without worrying about scoping.

/ styles/global/globals.css / html {   box-sizing: border-box;   font-size: 16px;   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } , :before, *:after {   box-sizing: inherit; } body, h1, h2, h3, h4, h5, h6, p, ol, ul {   margin: 0;   padding: 0;   font-weight: normal; } h1, h2, h3, h4, h5, h6 {   font-weight: bold; }  ol, ul {   list-style: none; }  img {   max-width: 100%;   height: auto; }  a {   color: inherit;   text-decoration: none; }

  • Import the CSS reset styles/global/globals.css in pages/_app.js.
// pages/_app.js import "../styles/global/globals.css";  function MyApp({Component, pageProps}) {   return <Component {...pageProps} />; }  export default MyApp;

Global styles can only be imported in the pages/_app.js. This is directly logical because these styles will apply to all pages and components in your application — regardless of where you import them — so it is better to have a single source of [import] truth to keep things straightforward, and/or if something goes wrong.

At this point, we do not have a lot of visual changes to our Bookshelf since we have only made normalization changes. One thing you might notice is the font and spacing changes.

SASS/SCSS

Next.js also allows styling with SASS with the .sass or .scss extension. Installing Sass is a requirement. Just like global styles, they can only be imported in pages/_app.js.

  • Install the Sass package.
yarn add sass
  • Update styles/scss/bookshelf.scss.
// styles/scss/bookshelf.scss .the-bookshelf {   width: 100vw;   height: 100vh;   background-color: #e3e3e3;   display: flex;   justify-content: center;   align-items: center;    .bookshelf-wrap {     > .bookshelf {       box-shadow: inset 0 -20px #7b5019;       padding-bottom: 20px;       display: flex;       align-items: flex-end;     }      [class*="book"] {       font-size: 32px;       letter-spacing: -0.045em;       display: flex;       transition: 0.2s;        &:hover {         transform: none;       }     }      .book-info {       text-transform: uppercase;       writing-mode: sideways-rl;       display: flex;       justify-content: space-around;       flex: 1;       align-items: center;       font-weight: bold;       padding: 16px 0;        .title {         font-weight: inherit;         font-size: 20px;       }        .author {         font-weight: inherit;         font-size: 15px;       }     }   } }
  • Also update styles/sass/bookone.sass and styles/sass/booktwo.sass like so:
// styles/sass/bookone.sass   .book-one     color: #f00     width: 78px     height: 350px     transform: rotate(-4deg)     margin-left: 16px     margin-right: 23px     background-color: black
// styles/sass/booktwo.sass .book-two   color: #781e0b   width: 38px   height: 448px   margin-right: 23px   background-color: #ffab44

SASS (.sass) is based on indentation. To make formatting easier, you can install this VSCode Extension for SASS files support (formatting, syntax highlighting…)

  • Import the three style files — styles/scss/bookshelf.scss , styles/sass/bookone.sass, and styles/sass/booktwo.sass — in pages/_app.js.
// pages/_app.js import "../styles/globals.css"; import "../styles/scss/bookshelf.scss"; import "../styles/sass/bookone.sass"; import "../styles/sass/booktwo.sass";  function MyApp({Component, pageProps}) {   return ; }  export default MyApp;

Our Bookshelf is beginning to take shape. With the styles applied, the first and second book should be styled and displayed as intended.

CSS Modules

CSS Modules is a component-level CSS, that comes built-in with Next and can be activated by naming the style files with the .module.css extension. It is also possible to use CSS Modules with SASS/SCSS with the .module.sass or .module.scss extension.

Let’s style the components/BookThree.js component with it.

  • Update styles/modules/BookThree.module.css.
 /* styles/modules/BookThree.module.css */ .book-three {   color: #df66c3;   width: 106px;   height: 448px;   margin-right: 23px;   background-color: #153086;   transform: rotate(-4deg); }
  • Import styles/modules/BookThree.module.css in components/BookThree.js, and apply the .book-three class.
// components/BookThree.js import BookThreeStyles from "../styles/modules/BookThree.module.css";  export default function BookThree() {   return (     <div className={BookThreeStyles["book-three"]}>       <div className="book-info">         <p className="title">the revolt of the public</p>         <p className="author">Martin Gurri</p>       </div>     </div>   ); }

Accessing class names in CSS Modules is similar to Property Accessors in JavaScript — with the dot or bracket notation. Here we import BookThreeStyles and then use the bracket notation to apply the style we have in styles/modules/BookThree.module.css file.

If the selector (in this case, class name) was properly accessed, the third book should be styled now.

Emotion

Emotion is a CSS-in-JS library and like any other CSS-in-JS, allows you to write CSS styles with JavaScript.

Let’s style the components/BookFour.js component with it.

  • Install the packages: @emotion/core, @emotion/styled, emotion, emotion-server.
yarn add @emotion/core @emotion/styled emotion emotion-server
  • Update styles/emotion/StyledBookFour.js.
// styles/emotion/StyledBookFour.js import styled from "@emotion/styled";  export const StyledBookFour = styled.div`   color: white;   width: 38px;   height: 400px;   margin-left: 20px;   margin-right: 10px;   background-color: #2faad2;   transform: rotate(4deg); `;

After importing styled from @emotion/styled, we export the StyledBookFour styled component — not to be confused with the other CSS-in-JS Styled Component — enhanced with the styled emotion method as in styled.div. Then we can use <StyledBookFour/> as in the next step below.

Learn more about emotion’s styled function.

  • Using <StyledBookFour/> is similar to how you’d use any other React component. Import styles/emotion/StyledBookFour.js in components/BookFour.js, and apply the StyledBookFour component.
// components/BookFour.js import {StyledBookFour} from "../styles/emotion/StyledBookFour";  export default function BookFour() {   return (     <StyledBookFour className="book-four">       <div className="book-info">         <p className="title">the man died</p>         <p className="author">wole soyinka</p>       </div>     </StyledBookFour>   ); }

With a sufficient dose of emotion, the fourth book should be thus styled.

Styled JSX

Like Global CSS and CSS-Modules, Styled-JSX works with Next.js without any extra setup required. If it helps, Styled-JSX is also Vercel’s offering of a component-based CSS, the same creators of Next.js.

Let’s style the components/BookFive.js component with it.

To keep things simple, we use the internal mode of styled-jsx here. By passing the jsx prop to the <style/> component, we are able to write as much CSS as we want like we did with .book-five, with the additional benefit of the style being localized to the <BookFive/> component.

// components/BookFive.js export default function BookFive() {   return (     <div className="book-five">       <div className="book-info">         <p className="title">there was a country</p>         <p className="author">Chinua Achebe</p>       </div>       <style jsx>{`         .book-five {           color: #fff;           width: 106px;           height: 448px;           margin-right: 23px;           background-color: #000;           transform: rotate(4deg);         }       `}</style>     </div>   ); }

And just like that, the fifth book takes its styling.

Styled Components

Styled-Component, just like Emotion, is also a CSS-in-JS library that allows you to write CSS styles with JavaScript. Getting it setup is a little bit involved.

  • First, install babel-plugin-styled-components and styled-components.
yarn add babel-plugin-styled-components styled-components
  • Create a .babelrc file at the root of your app, and a pages/_document.js file, as shown in the before (left) and after(right) image below.

  • Update the .babelrc file to include the next/babel preset and include the styled-components plugin, with server-side-rendering (ssr) enabled. 
// .babelrc {   "presets": ["next/babel"],   "plugins": [     [       "styled-components",       {         "ssr": true       }     ]   ] }
  • Update pages/_document.js by injecting the server-side rendered styles into the <head>.

Keep in mind, the snippet below (pages/_document.js) is a required logic for styled-components to work with Next.js. You almost have to do nothing but copy the logic as pointed out in the styled-components documentation.

// pages/_document.js import Document from "next/document"; import {ServerStyleSheet} from "styled-components";  export default class MyDocument extends Document {   static async getInitialProps(ctx) {     const sheet = new ServerStyleSheet();     const originalRenderPage = ctx.renderPage;      try {       ctx.renderPage = () =>         originalRenderPage({           enhanceApp: (App) => (props) =>             sheet.collectStyles(<App {...props} />),         });        const initialProps = await Document.getInitialProps(ctx);       return {         ...initialProps,         styles: (           <>             {initialProps.styles}             {sheet.getStyleElement()}           </>         ),       };     } finally {       sheet.seal();     }   } }

After the updates to .babelrc, and pages/_document.js, we can now begin to use styled-components.

  • Update styles/styled-components/StyledBookSix.js.

styled is an internal utility method that transforms the styling from JavaScript into actual CSS. <StyledBookSix/> is, and, can be used as any other React component.

// styles/StyledBookSix.js import styled from "styled-components";  const StyledBookSix = styled.div`   color: #fff;   width: 106px;   height: 448px;   margin-right: 23px;   background-color: rebeccapurple; `;  export default StyledBookSix;

Learn more about How To Use Styled-Components in React.

  • Import styles/styled-components/StyledBookSix.js in components/BookSix.js, using the imported styled-components <StyledBookSix/>.
// components/BookSix.js import StyledBookSix from "../styles/styled-components/StyledBookSix";  export default function BookSix() {   return (     <StyledBookSix className="book-six">       <div className="book-info">         <p className="title">purple hibiscus</p>         <p className="author">chimamanda ngozi adichie</p>       </div>     </StyledBookSix>   ); }

With the first to sixth step completed, the sixth should be styled, and the Bookshelf done:

That’s it.

If all went well, then you should have the complete Bookshelf with the books waiting to be read.

Conclusion

In my own usage with Next.js, Global styles and styled-components have often been sufficient. But there’s no doubt that all these methods have their pros and cons. And as you settle on what method to use, just keep in mind: in the end, it’s all CSS. At this point, I believe you can be able to figure out which pattern best serves you in your next project.

Resources

I find that for learning about setting up styling methods with Next.js, there’s no better place than its official documentation.

But there are also specific repositories for various styling methods. You can go through the various repository to learn more, or check for update, as things may change incognito.

  1. Tailwind CSS
  2. CSS Modules
  3. Less
  4. Stylus
  5. Tailwind CSS with Emotion
  6. Styletron
  7. Glamor
  8. CXS
  9. Aphrodite
  10. Fela
  11. Styled-JSX

Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
01 Nov

Comparing Styling Methods In Next.js

by TBSCategories: News

As you might be aware, there are many differing perspectives on CSS-in-JS, and we all have an opinion of the topic in one way or the other that might be quite different from the opinions of framework authors.

Next.js is one of the recommended tool-chains when creating a new React app. Tools like Next have a simple goal of abstracting away commonly redundant tasks when writing a React app. This helps developers focus more on writing code than reinventing the wheel. While this is usually a good thing, it can also be a little tedious to get started with. For one, there’s a hurdle to cross by learning about the abstractions, and while there are a bevy of that in Next (Routing, Data Fetching…), one often overlooked is Styling.

To serve a wider audience, Next.js supports a myriad of ways to style your components. Whether you belong to the Utility first or CSS-in-JS party isn’t much of Next’s concern, its concern is how you inject your choice into its API.

The goal of this article is to help you understand how to set up styling in your Next app. We’ll be using different methods to handle the comparison. We’ll implement the different types of styling in a book application I have set up. The styling methods we’ll be looking at include:

  1. Global CSS,
  2. SASS/SCSS,
  3. Component-Level SASS/SCSS,
  4. Component-Level CSS (CSS Modules),
  5. Styled-Components,
  6. Styled JSX,
  7. Emotion.

Prerequisite

Before we begin our styling tour, there are some Next nuances you need to acquaint yourself with.

  1. _app.js
    This is a custom component that resides in the pages folder. Next.js uses this component to initialize pages.
  2. _document.js
    Like _app.js, _document.js is a custom component that Next.js uses to augment your applications <html> and <body> tags. This is necessary because Next.js pages skip the definition of the surrounding document’s markup.
  3. _.babelrc
    When present, Next.js uses this file as the single source of truth for some internal configuration and gives you permission to extend it.

Keep in mind that if you have your server running before adding the _app.js file, then you need to restart it.

Creating A Next App With create-next-app

Creating a Next app with create-next-app is as simple as following the steps below:

  • Install create-next-app globally.
yarn global add create-next-app // Installs create-next-app globally
  • Create a new Next app named styling-in-next.
create-next-app styling-in-next // Creates a new Next app named styling-in-next

  • Change directory into the new site.
cd styling-in-next // Switch directory into the new Next app
  • Run the site.
yarn dev -p 3000 // Instruct Next to run on port 3000

Refer to the documentation for more information on creating and running a Next app.

The app should now be running on http://localhost:3000.

Demo Repository

As we go along we’ll be building a contrived Bookshelf by applying different styling methods to each books. The end result will look like:

The image above shows 6 books; each book will have its own components, then we’ll apply a specific style type to each specific book, i.e. Book 1 will make use of a global style while Book 2 will make use of another. This way we’ll see how each of these styles work and how they can be used. This will help you in making a better decision on what option to choose.

To make things simple, I’ve scaffolded a GitHub repository for you to follow along. You can grab it here.

Some changes have also been made to the default starter generated by create-next-app. Folders like emotion, global, modules, styled-components etc. have been added to the styles folder — with their corresponding style files — as well as a components directory with multiple components.

The index.js file has been modified to import and render the needed components, and each of the components has a similar structure as shown in the image below.

If you cloned and ran the demo repository, here’s what your page should look like:

With all that out of the way, let’s get styling.

Global Style

One of the common things you’d normally do when you start a new web project is to reset or normalize your CSS so there’s a uniform starting position among browsers. This is a perfect example of using Global CSS without worrying about scoping.

/ styles/global/globals.css / html {   box-sizing: border-box;   font-size: 16px;   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } , :before, *:after {   box-sizing: inherit; } body, h1, h2, h3, h4, h5, h6, p, ol, ul {   margin: 0;   padding: 0;   font-weight: normal; } h1, h2, h3, h4, h5, h6 {   font-weight: bold; }  ol, ul {   list-style: none; }  img {   max-width: 100%;   height: auto; }  a {   color: inherit;   text-decoration: none; }

  • Import the CSS reset styles/global/globals.css in pages/_app.js.
// pages/_app.js import "../styles/global/globals.css";  function MyApp({Component, pageProps}) {   return <Component {...pageProps} />; }  export default MyApp;

Global styles can only be imported in the pages/_app.js. This is directly logical because these styles will apply to all pages and components in your application — regardless of where you import them — so it is better to have a single source of [import] truth to keep things straightforward, and/or if something goes wrong.

At this point, we do not have a lot of visual changes to our Bookshelf since we have only made normalization changes. One thing you might notice is the font and spacing changes.

SASS/SCSS

Next.js also allows styling with SASS with the .sass or .scss extension. Installing Sass is a requirement. Just like global styles, they can only be imported in pages/_app.js.

  • Install the Sass package.
yarn add sass
  • Update styles/scss/bookshelf.scss.
// styles/scss/bookshelf.scss .the-bookshelf {   width: 100vw;   height: 100vh;   background-color: #e3e3e3;   display: flex;   justify-content: center;   align-items: center;    .bookshelf-wrap {     > .bookshelf {       box-shadow: inset 0 -20px #7b5019;       padding-bottom: 20px;       display: flex;       align-items: flex-end;     }      [class*="book"] {       font-size: 32px;       letter-spacing: -0.045em;       display: flex;       transition: 0.2s;        &:hover {         transform: none;       }     }      .book-info {       text-transform: uppercase;       writing-mode: sideways-rl;       display: flex;       justify-content: space-around;       flex: 1;       align-items: center;       font-weight: bold;       padding: 16px 0;        .title {         font-weight: inherit;         font-size: 20px;       }        .author {         font-weight: inherit;         font-size: 15px;       }     }   } }
  • Also update styles/sass/bookone.sass and styles/sass/booktwo.sass like so:
// styles/sass/bookone.sass   .book-one     color: #f00     width: 78px     height: 350px     transform: rotate(-4deg)     margin-left: 16px     margin-right: 23px     background-color: black
// styles/sass/booktwo.sass .book-two   color: #781e0b   width: 38px   height: 448px   margin-right: 23px   background-color: #ffab44

SASS (.sass) is based on indentation. To make formatting easier, you can install this VSCode Extension for SASS files support (formatting, syntax highlighting…)

  • Import the three style files — styles/scss/bookshelf.scss , styles/sass/bookone.sass, and styles/sass/booktwo.sass — in pages/_app.js.
// pages/_app.js import "../styles/globals.css"; import "../styles/scss/bookshelf.scss"; import "../styles/sass/bookone.sass"; import "../styles/sass/booktwo.sass";  function MyApp({Component, pageProps}) {   return ; }  export default MyApp;

Our Bookshelf is beginning to take shape. With the styles applied, the first and second book should be styled and displayed as intended.

CSS Modules

CSS Modules is a component-level CSS, that comes built-in with Next and can be activated by naming the style files with the .module.css extension. It is also possible to use CSS Modules with SASS/SCSS with the .module.sass or .module.scss extension.

Let’s style the components/BookThree.js component with it.

  • Update styles/modules/BookThree.module.css.
 /* styles/modules/BookThree.module.css */ .book-three {   color: #df66c3;   width: 106px;   height: 448px;   margin-right: 23px;   background-color: #153086;   transform: rotate(-4deg); }
  • Import styles/modules/BookThree.module.css in components/BookThree.js, and apply the .book-three class.
// components/BookThree.js import BookThreeStyles from "../styles/modules/BookThree.module.css";  export default function BookThree() {   return (     <div className={BookThreeStyles["book-three"]}>       <div className="book-info">         <p className="title">the revolt of the public</p>         <p className="author">Martin Gurri</p>       </div>     </div>   ); }

Accessing class names in CSS Modules is similar to Property Accessors in JavaScript — with the dot or bracket notation. Here we import BookThreeStyles and then use the bracket notation to apply the style we have in styles/modules/BookThree.module.css file.

If the selector (in this case, class name) was properly accessed, the third book should be styled now.

Emotion

Emotion is a CSS-in-JS library and like any other CSS-in-JS, allows you to write CSS styles with JavaScript.

Let’s style the components/BookFour.js component with it.

  • Install the packages: @emotion/core, @emotion/styled, emotion, emotion-server.
yarn add @emotion/core @emotion/styled emotion emotion-server
  • Update styles/emotion/StyledBookFour.js.
// styles/emotion/StyledBookFour.js import styled from "@emotion/styled";  export const StyledBookFour = styled.div`   color: white;   width: 38px;   height: 400px;   margin-left: 20px;   margin-right: 10px;   background-color: #2faad2;   transform: rotate(4deg); `;

After importing styled from @emotion/styled, we export the StyledBookFour styled component — not to be confused with the other CSS-in-JS Styled Component — enhanced with the styled emotion method as in styled.div. Then we can use <StyledBookFour/> as in the next step below.

Learn more about emotion’s styled function.

  • Using <StyledBookFour/> is similar to how you’d use any other React component. Import styles/emotion/StyledBookFour.js in components/BookFour.js, and apply the StyledBookFour component.
// components/BookFour.js import {StyledBookFour} from "../styles/emotion/StyledBookFour";  export default function BookFour() {   return (     <StyledBookFour className="book-four">       <div className="book-info">         <p className="title">the man died</p>         <p className="author">wole soyinka</p>       </div>     </StyledBookFour>   ); }

With a sufficient dose of emotion, the fourth book should be thus styled.

Styled JSX

Like Global CSS and CSS-Modules, Styled-JSX works with Next.js without any extra setup required. If it helps, Styled-JSX is also Vercel’s offering of a component-based CSS, the same creators of Next.js.

Let’s style the components/BookFive.js component with it.

To keep things simple, we use the internal mode of styled-jsx here. By passing the jsx prop to the <style/> component, we are able to write as much CSS as we want like we did with .book-five, with the additional benefit of the style being localized to the <BookFive/> component.

// components/BookFive.js export default function BookFive() {   return (     <div className="book-five">       <div className="book-info">         <p className="title">there was a country</p>         <p className="author">Chinua Achebe</p>       </div>       <style jsx>{`         .book-five {           color: #fff;           width: 106px;           height: 448px;           margin-right: 23px;           background-color: #000;           transform: rotate(4deg);         }       `}</style>     </div>   ); }

And just like that, the fifth book takes its styling.

Styled Components

Styled-Component, just like Emotion, is also a CSS-in-JS library that allows you to write CSS styles with JavaScript. Getting it setup is a little bit involved.

  • First, install babel-plugin-styled-components and styled-components.
yarn add babel-plugin-styled-components styled-components
  • Create a .babelrc file at the root of your app, and a pages/_document.js file, as shown in the before (left) and after(right) image below.

  • Update the .babelrc file to include the next/babel preset and include the styled-components plugin, with server-side-rendering (ssr) enabled. 
// .babelrc {   "presets": ["next/babel"],   "plugins": [     [       "styled-components",       {         "ssr": true       }     ]   ] }
  • Update pages/_document.js by injecting the server-side rendered styles into the <head>.

Keep in mind, the snippet below (pages/_document.js) is a required logic for styled-components to work with Next.js. You almost have to do nothing but copy the logic as pointed out in the styled-components documentation.

// pages/_document.js import Document from "next/document"; import {ServerStyleSheet} from "styled-components";  export default class MyDocument extends Document {   static async getInitialProps(ctx) {     const sheet = new ServerStyleSheet();     const originalRenderPage = ctx.renderPage;      try {       ctx.renderPage = () =>         originalRenderPage({           enhanceApp: (App) => (props) =>             sheet.collectStyles(<App {...props} />),         });        const initialProps = await Document.getInitialProps(ctx);       return {         ...initialProps,         styles: (           <>             {initialProps.styles}             {sheet.getStyleElement()}           </>         ),       };     } finally {       sheet.seal();     }   } }

After the updates to .babelrc, and pages/_document.js, we can now begin to use styled-components.

  • Update styles/styled-components/StyledBookSix.js.

styled is an internal utility method that transforms the styling from JavaScript into actual CSS. <StyledBookSix/> is, and, can be used as any other React component.

// styles/StyledBookSix.js import styled from "styled-components";  const StyledBookSix = styled.div`   color: #fff;   width: 106px;   height: 448px;   margin-right: 23px;   background-color: rebeccapurple; `;  export default StyledBookSix;

Learn more about How To Use Styled-Components in React.

  • Import styles/styled-components/StyledBookSix.js in components/BookSix.js, using the imported styled-components <StyledBookSix/>.
// components/BookSix.js import StyledBookSix from "../styles/styled-components/StyledBookSix";  export default function BookSix() {   return (     <StyledBookSix className="book-six">       <div className="book-info">         <p className="title">purple hibiscus</p>         <p className="author">chimamanda ngozi adichie</p>       </div>     </StyledBookSix>   ); }

With the first to sixth step completed, the sixth should be styled, and the Bookshelf done:

That’s it.

If all went well, then you should have the complete Bookshelf with the books waiting to be read.

Conclusion

In my own usage with Next.js, Global styles and styled-components have often been sufficient. But there’s no doubt that all these methods have their pros and cons. And as you settle on what method to use, just keep in mind: in the end, it’s all CSS. At this point, I believe you can be able to figure out which pattern best serves you in your next project.

Resources

I find that for learning about setting up styling methods with Next.js, there’s no better place than its official documentation.

But there are also specific repositories for various styling methods. You can go through the various repository to learn more, or check for update, as things may change incognito.

  1. Tailwind CSS
  2. CSS Modules
  3. Less
  4. Stylus
  5. Tailwind CSS with Emotion
  6. Styletron
  7. Glamor
  8. CXS
  9. Aphrodite
  10. Fela
  11. Styled-JSX

Articles on Smashing Magazine — For Web Designers And Developers


Deprecated: Function create_function() is deprecated in /home2/thebrand/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1884
01 Nov

Comparing Styling Methods In Next.js

by TBSCategories: News

As you might be aware, there are many differing perspectives on CSS-in-JS, and we all have an opinion of the topic in one way or the other that might be quite different from the opinions of framework authors.

Next.js is one of the recommended tool-chains when creating a new React app. Tools like Next have a simple goal of abstracting away commonly redundant tasks when writing a React app. This helps developers focus more on writing code than reinventing the wheel. While this is usually a good thing, it can also be a little tedious to get started with. For one, there’s a hurdle to cross by learning about the abstractions, and while there are a bevy of that in Next (Routing, Data Fetching…), one often overlooked is Styling.

To serve a wider audience, Next.js supports a myriad of ways to style your components. Whether you belong to the Utility first or CSS-in-JS party isn’t much of Next’s concern, its concern is how you inject your choice into its API.

The goal of this article is to help you understand how to set up styling in your Next app. We’ll be using different methods to handle the comparison. We’ll implement the different types of styling in a book application I have set up. The styling methods we’ll be looking at include:

  1. Global CSS,
  2. SASS/SCSS,
  3. Component-Level SASS/SCSS,
  4. Component-Level CSS (CSS Modules),
  5. Styled-Components,
  6. Styled JSX,
  7. Emotion.

Prerequisite

Before we begin our styling tour, there are some Next nuances you need to acquaint yourself with.

  1. _app.js
    This is a custom component that resides in the pages folder. Next.js uses this component to initialize pages.
  2. _document.js
    Like _app.js, _document.js is a custom component that Next.js uses to augment your applications <html> and <body> tags. This is necessary because Next.js pages skip the definition of the surrounding document’s markup.
  3. _.babelrc
    When present, Next.js uses this file as the single source of truth for some internal configuration and gives you permission to extend it.

Keep in mind that if you have your server running before adding the _app.js file, then you need to restart it.

Creating A Next App With create-next-app

Creating a Next app with create-next-app is as simple as following the steps below:

  • Install create-next-app globally.
yarn global add create-next-app // Installs create-next-app globally
  • Create a new Next app named styling-in-next.
create-next-app styling-in-next // Creates a new Next app named styling-in-next

  • Change directory into the new site.
cd styling-in-next // Switch directory into the new Next app
  • Run the site.
yarn dev -p 3000 // Instruct Next to run on port 3000

Refer to the documentation for more information on creating and running a Next app.

The app should now be running on http://localhost:3000.

Demo Repository

As we go along we’ll be building a contrived Bookshelf by applying different styling methods to each books. The end result will look like:

The image above shows 6 books; each book will have its own components, then we’ll apply a specific style type to each specific book, i.e. Book 1 will make use of a global style while Book 2 will make use of another. This way we’ll see how each of these styles work and how they can be used. This will help you in making a better decision on what option to choose.

To make things simple, I’ve scaffolded a GitHub repository for you to follow along. You can grab it here.

Some changes have also been made to the default starter generated by create-next-app. Folders like emotion, global, modules, styled-components etc. have been added to the styles folder — with their corresponding style files — as well as a components directory with multiple components.

The index.js file has been modified to import and render the needed components, and each of the components has a similar structure as shown in the image below.

If you cloned and ran the demo repository, here’s what your page should look like:

With all that out of the way, let’s get styling.

Global Style

One of the common things you’d normally do when you start a new web project is to reset or normalize your CSS so there’s a uniform starting position among browsers. This is a perfect example of using Global CSS without worrying about scoping.

/ styles/global/globals.css / html {   box-sizing: border-box;   font-size: 16px;   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } , :before, *:after {   box-sizing: inherit; } body, h1, h2, h3, h4, h5, h6, p, ol, ul {   margin: 0;   padding: 0;   font-weight: normal; } h1, h2, h3, h4, h5, h6 {   font-weight: bold; }  ol, ul {   list-style: none; }  img {   max-width: 100%;   height: auto; }  a {   color: inherit;   text-decoration: none; }

  • Import the CSS reset styles/global/globals.css in pages/_app.js.
// pages/_app.js import "../styles/global/globals.css";  function MyApp({Component, pageProps}) {   return <Component {...pageProps} />; }  export default MyApp;

Global styles can only be imported in the pages/_app.js. This is directly logical because these styles will apply to all pages and components in your application — regardless of where you import them — so it is better to have a single source of [import] truth to keep things straightforward, and/or if something goes wrong.

At this point, we do not have a lot of visual changes to our Bookshelf since we have only made normalization changes. One thing you might notice is the font and spacing changes.

SASS/SCSS

Next.js also allows styling with SASS with the .sass or .scss extension. Installing Sass is a requirement. Just like global styles, they can only be imported in pages/_app.js.

  • Install the Sass package.
yarn add sass
  • Update styles/scss/bookshelf.scss.
// styles/scss/bookshelf.scss .the-bookshelf {   width: 100vw;   height: 100vh;   background-color: #e3e3e3;   display: flex;   justify-content: center;   align-items: center;    .bookshelf-wrap {     > .bookshelf {       box-shadow: inset 0 -20px #7b5019;       padding-bottom: 20px;       display: flex;       align-items: flex-end;     }      [class*="book"] {       font-size: 32px;       letter-spacing: -0.045em;       display: flex;       transition: 0.2s;        &:hover {         transform: none;       }     }      .book-info {       text-transform: uppercase;       writing-mode: sideways-rl;       display: flex;       justify-content: space-around;       flex: 1;       align-items: center;       font-weight: bold;       padding: 16px 0;        .title {         font-weight: inherit;         font-size: 20px;       }        .author {         font-weight: inherit;         font-size: 15px;       }     }   } }
  • Also update styles/sass/bookone.sass and styles/sass/booktwo.sass like so:
// styles/sass/bookone.sass   .book-one     color: #f00     width: 78px     height: 350px     transform: rotate(-4deg)     margin-left: 16px     margin-right: 23px     background-color: black
// styles/sass/booktwo.sass .book-two   color: #781e0b   width: 38px   height: 448px   margin-right: 23px   background-color: #ffab44

SASS (.sass) is based on indentation. To make formatting easier, you can install this VSCode Extension for SASS files support (formatting, syntax highlighting…)

  • Import the three style files — styles/scss/bookshelf.scss , styles/sass/bookone.sass, and styles/sass/booktwo.sass — in pages/_app.js.
// pages/_app.js import "../styles/globals.css"; import "../styles/scss/bookshelf.scss"; import "../styles/sass/bookone.sass"; import "../styles/sass/booktwo.sass";  function MyApp({Component, pageProps}) {   return ; }  export default MyApp;

Our Bookshelf is beginning to take shape. With the styles applied, the first and second book should be styled and displayed as intended.

CSS Modules

CSS Modules is a component-level CSS, that comes built-in with Next and can be activated by naming the style files with the .module.css extension. It is also possible to use CSS Modules with SASS/SCSS with the .module.sass or .module.scss extension.

Let’s style the components/BookThree.js component with it.

  • Update styles/modules/BookThree.module.css.
 /* styles/modules/BookThree.module.css */ .book-three {   color: #df66c3;   width: 106px;   height: 448px;   margin-right: 23px;   background-color: #153086;   transform: rotate(-4deg); }
  • Import styles/modules/BookThree.module.css in components/BookThree.js, and apply the .book-three class.
// components/BookThree.js import BookThreeStyles from "../styles/modules/BookThree.module.css";  export default function BookThree() {   return (     <div className={BookThreeStyles["book-three"]}>       <div className="book-info">         <p className="title">the revolt of the public</p>         <p className="author">Martin Gurri</p>       </div>     </div>   ); }

Accessing class names in CSS Modules is similar to Property Accessors in JavaScript — with the dot or bracket notation. Here we import BookThreeStyles and then use the bracket notation to apply the style we have in styles/modules/BookThree.module.css file.

If the selector (in this case, class name) was properly accessed, the third book should be styled now.

Emotion

Emotion is a CSS-in-JS library and like any other CSS-in-JS, allows you to write CSS styles with JavaScript.

Let’s style the components/BookFour.js component with it.

  • Install the packages: @emotion/core, @emotion/styled, emotion, emotion-server.
yarn add @emotion/core @emotion/styled emotion emotion-server
  • Update styles/emotion/StyledBookFour.js.
// styles/emotion/StyledBookFour.js import styled from "@emotion/styled";  export const StyledBookFour = styled.div`   color: white;   width: 38px;   height: 400px;   margin-left: 20px;   margin-right: 10px;   background-color: #2faad2;   transform: rotate(4deg); `;

After importing styled from @emotion/styled, we export the StyledBookFour styled component — not to be confused with the other CSS-in-JS Styled Component — enhanced with the styled emotion method as in styled.div. Then we can use <StyledBookFour/> as in the next step below.

Learn more about emotion’s styled function.

  • Using <StyledBookFour/> is similar to how you’d use any other React component. Import styles/emotion/StyledBookFour.js in components/BookFour.js, and apply the StyledBookFour component.
// components/BookFour.js import {StyledBookFour} from "../styles/emotion/StyledBookFour";  export default function BookFour() {   return (     <StyledBookFour className="book-four">       <div className="book-info">         <p className="title">the man died</p>         <p className="author">wole soyinka</p>       </div>     </StyledBookFour>   ); }

With a sufficient dose of emotion, the fourth book should be thus styled.

Styled JSX

Like Global CSS and CSS-Modules, Styled-JSX works with Next.js without any extra setup required. If it helps, Styled-JSX is also Vercel’s offering of a component-based CSS, the same creators of Next.js.

Let’s style the components/BookFive.js component with it.

To keep things simple, we use the internal mode of styled-jsx here. By passing the jsx prop to the <style/> component, we are able to write as much CSS as we want like we did with .book-five, with the additional benefit of the style being localized to the <BookFive/> component.

// components/BookFive.js export default function BookFive() {   return (     <div className="book-five">       <div className="book-info">         <p className="title">there was a country</p>         <p className="author">Chinua Achebe</p>       </div>       <style jsx>{`         .book-five {           color: #fff;           width: 106px;           height: 448px;           margin-right: 23px;           background-color: #000;           transform: rotate(4deg);         }       `}</style>     </div>   ); }

And just like that, the fifth book takes its styling.

Styled Components

Styled-Component, just like Emotion, is also a CSS-in-JS library that allows you to write CSS styles with JavaScript. Getting it setup is a little bit involved.

  • First, install babel-plugin-styled-components and styled-components.
yarn add babel-plugin-styled-components styled-components
  • Create a .babelrc file at the root of your app, and a pages/_document.js file, as shown in the before (left) and after(right) image below.

  • Update the .babelrc file to include the next/babel preset and include the styled-components plugin, with server-side-rendering (ssr) enabled. 
// .babelrc {   "presets": ["next/babel"],   "plugins": [     [       "styled-components",       {         "ssr": true       }     ]   ] }
  • Update pages/_document.js by injecting the server-side rendered styles into the <head>.

Keep in mind, the snippet below (pages/_document.js) is a required logic for styled-components to work with Next.js. You almost have to do nothing but copy the logic as pointed out in the styled-components documentation.

// pages/_document.js import Document from "next/document"; import {ServerStyleSheet} from "styled-components";  export default class MyDocument extends Document {   static async getInitialProps(ctx) {     const sheet = new ServerStyleSheet();     const originalRenderPage = ctx.renderPage;      try {       ctx.renderPage = () =>         originalRenderPage({           enhanceApp: (App) => (props) =>             sheet.collectStyles(<App {...props} />),         });        const initialProps = await Document.getInitialProps(ctx);       return {         ...initialProps,         styles: (           <>             {initialProps.styles}             {sheet.getStyleElement()}           </>         ),       };     } finally {       sheet.seal();     }   } }

After the updates to .babelrc, and pages/_document.js, we can now begin to use styled-components.

  • Update styles/styled-components/StyledBookSix.js.

styled is an internal utility method that transforms the styling from JavaScript into actual CSS. <StyledBookSix/> is, and, can be used as any other React component.

// styles/StyledBookSix.js import styled from "styled-components";  const StyledBookSix = styled.div`   color: #fff;   width: 106px;   height: 448px;   margin-right: 23px;   background-color: rebeccapurple; `;  export default StyledBookSix;

Learn more about How To Use Styled-Components in React.

  • Import styles/styled-components/StyledBookSix.js in components/BookSix.js, using the imported styled-components <StyledBookSix/>.
// components/BookSix.js import StyledBookSix from "../styles/styled-components/StyledBookSix";  export default function BookSix() {   return (     <StyledBookSix className="book-six">       <div className="book-info">         <p className="title">purple hibiscus</p>         <p className="author">chimamanda ngozi adichie</p>       </div>     </StyledBookSix>   ); }

With the first to sixth step completed, the sixth should be styled, and the Bookshelf done:

That’s it.

If all went well, then you should have the complete Bookshelf with the books waiting to be read.

Conclusion

In my own usage with Next.js, Global styles and styled-components have often been sufficient. But there’s no doubt that all these methods have their pros and cons. And as you settle on what method to use, just keep in mind: in the end, it’s all CSS. At this point, I believe you can be able to figure out which pattern best serves you in your next project.

Resources

I find that for learning about setting up styling methods with Next.js, there’s no better place than its official documentation.

But there are also specific repositories for various styling methods. You can go through the various repository to learn more, or check for update, as things may change incognito.

  1. Tailwind CSS
  2. CSS Modules
  3. Less
  4. Stylus
  5. Tailwind CSS with Emotion
  6. Styletron
  7. Glamor
  8. CXS
  9. Aphrodite
  10. Fela
  11. Styled-JSX

Articles on Smashing Magazine — For Web Designers And Developers

Newer postsOlder posts
×

Powered by WhatsApp Chat

WhatsApp Chat is free, download and try it now here!

× Chat with Us