React.js开发中能否/是否应该使用SASS的7-1样式模式？

Great question! Let’s dig into whether the 7-1 SCSS pattern (including shame.scss) fits in React development, and cover some solid alternatives if it’s not the best fit for your project.

Can/Should You Use the 7-1 SCSS Pattern in React? #

Short answer: You can absolutely use it, but whether you should depends on your project’s size and team workflow.

The 7-1 pattern is a SCSS architecture that organizes styles into 7 folders (base/, components/, layout/, pages/, themes/, utils/, vendors/) plus a single main main.scss file to import everything. React’s component-based model doesn’t conflict with this—they’re just different ways to organize code (one by style type, one by UI component).

That said, here’s where you need to adjust:

• React’s component encapsulation means many of your styles will live alongside component files. If you stick strictly to 7-1, you might end up duplicating work (e.g., a Button component’s styles in both src/components/Button and scss/components/_button.scss). To fix this, you can treat the 7-1 structure as a global style foundation, and keep component-specific styles in their respective component folders.
• shame.scss (for quick hacks you plan to fix later) is still useful! Just make sure you don’t over-rely on it. If a hack is specific to a single component, it’s better to add a comment in that component’s style file instead of dumping it in shame.scss. Reserve shame.scss for global hacks that can’t be tied to one component, and set a reminder to clean it up regularly.

For large projects with a dedicated design system and a team comfortable with SCSS architecture, combining 7-1 with component-local styles works well. For small to medium projects, though, 7-1 can feel overly verbose and add unnecessary overhead.

Recommended Best Practices for React Styling #

If 7-1 feels like overkill, here are the most widely adopted, React-friendly styling patterns:

1. CSS Modules #

This is probably the most popular middle ground between traditional SCSS and React’s component model. Each component gets a .module.scss file, and styles are locally scoped by default (no more naming collisions like .button conflicting across components).

Example usage:

// Button.module.scss
.button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background: blue;
  color: white;
}

// Button.jsx
import styles from './Button.module.scss';

const Button = ({ children }) => {
  return <button className={styles.button}>{children}</button>;
};

2. CSS-in-JS (Styled Components/Emotion) #

For full component encapsulation, CSS-in-JS lets you write styles directly in your React component files. It supports dynamic styling (e.g., changing styles based on props) and eliminates the need to manage separate SCSS files entirely.

Example with Styled Components:

import styled from 'styled-components';

const Button = styled.button`
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background: ${props => props.variant === 'primary' ? 'blue' : 'gray'};
  color: white;
`;

// Usage: <Button variant="primary">Click Me</Button>

3. Tailwind CSS (Atomic CSS) #

Tailwind is perfect for rapid UI development and keeping your styles consistent. It uses utility classes (e.g., px-4, bg-blue-500) that you apply directly to JSX elements. For reusable styles, you can extract components or use Tailwind’s @apply directive to create custom classes.

Example:

const Button = ({ children }) => {
  return (
    <button className="px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600">
      {children}
    </button>
  );
};

4. Component Library Styles (MUI, Chakra UI, etc.) #

If you’re building a project quickly and want a consistent design system, using a component library with built-in styling is a great choice. Libraries like Material UI or Chakra UI let you customize themes and override styles without writing tons of SCSS from scratch.

Final Thoughts #

The 7-1 SCSS pattern works in React if you adapt it to complement component-local styles, but it’s not the only (or always best) option. Choose based on your project size:

• Small/medium projects: Go with CSS Modules or Tailwind for simplicity.
• Large projects with a design system: Combine 7-1 for global styles + CSS Modules/CSS-in-JS for component styles.
• Always use shame.scss sparingly, and prioritize cleaning up hacks over leaving them indefinitely.

内容的提问来源于stack exchange，提问作者cs.matyi