7-1 folder pattern in depth in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the purpose of the 'abstracts' folder in 7-1 pattern

In the 7-1 folder pattern for Sass, what is the main purpose of the abstracts folder?

A To store Sass files that define variables, functions, mixins, and placeholders used throughout the project.

B To hold all the CSS reset and browser normalization files.

C To contain the main layout styles like grids and positioning.

D To keep all the component-specific styles such as buttons and cards.

💡 Hint

Think about where you keep reusable pieces like colors or reusable code snippets.

The abstracts folder is for Sass helpers like variables, mixins, functions, and placeholders. These are reusable bits that help keep your code DRY (Don't Repeat Yourself).

📝 Syntax

intermediate

Correct import statement for partials in 7-1 pattern

Given the 7-1 folder pattern, which import statement correctly imports the _buttons.scss partial from the components folder inside main.scss?

SASS

/* main.scss */
// Choose the correct import statement below:

A @import 'components/buttons';

B @import 'components/buttons.scss';

C @import 'buttons';

D @import 'components/_buttons.scss';

💡 Hint

Remember how Sass handles partials and file extensions in import statements.

Sass allows importing partials by their folder and filename without the underscore or file extension. So '@import 'components/buttons';' correctly imports _buttons.scss from the components folder.

❓ layout

advanced

How the 7-1 pattern improves CSS layout management

Which statement best explains how the 7-1 folder pattern helps manage layout styles in a large Sass project?

A It places layout styles directly inside the main.scss file to improve performance.

B It combines all layout and component styles into one folder to reduce the number of files.

C It stores layout styles inside the abstracts folder to reuse variables and mixins.

D It separates layout styles into their own folder, making it easier to find and update grid and positioning rules without mixing with components or utilities.

💡 Hint

Think about how separating concerns helps when your project grows bigger.

The 7-1 pattern organizes layout styles in a dedicated layout folder. This separation helps developers quickly find and maintain grid, positioning, and structural styles without confusion.

❓ accessibility

advanced

Accessibility considerations in the 7-1 folder pattern

How can the 7-1 folder pattern help improve accessibility in a Sass project?

A By placing all accessibility styles inside the abstracts folder to keep them hidden from the main styles.

B By organizing focus styles and screen reader helpers in the utilities folder, making them reusable and consistent across components.

C By avoiding any accessibility styles in Sass and handling them only in HTML.

D By mixing accessibility styles directly inside component files to keep them close to markup.

💡 Hint

Think about where you keep small reusable helpers that affect many parts of the site.

The utilities folder in the 7-1 pattern is ideal for reusable helper classes like focus outlines and screen reader text. This promotes consistent accessibility styles across the project.

❓ selector

expert

Specificity and selector management in 7-1 pattern components

In the 7-1 folder pattern, if you want to avoid specificity conflicts between component styles and layout styles, which approach is best?

A Write all styles with !important to override conflicts.

B Use very specific IDs in layout styles and generic classes in components.

C Use BEM naming conventions in component partials and keep layout selectors simple and generic.

D Combine component and layout styles in the same file to control order.

💡 Hint

Think about how naming conventions help keep styles predictable and avoid clashes.

BEM (Block Element Modifier) naming in components helps keep selectors clear and scoped. Keeping layout selectors simple reduces specificity, preventing conflicts and making overrides easier.