(S) CSS Architecture: Alternate Style

Question

I use the "component" approach to CSS, as in SMACSS / ITCSS, I still scratch my head about style sections with an alternative (dark) background.

eg. The strip has regular (dark text on white) and alternative (white text on dark) sections.

As I understand it, there are options suggesting HTML:

<section class="dark"> <h2>Title</h2> <p>Text</p> <a href="#" class="btn">Action</a> </section> 

A style in the context of a section, for example:

 .dark h2, .dark p, .dark btn { color: white; } 

But a) design style is not recommended; b) where can I put the styles? (Harry Roberts claims in the component file)

Create alternate colors with modifiers

And change the HTML, for example.

 .title--alt-color {color: white;} .text--alt-color {color: white; } ... 

But a) it does not work when you do not know which components will be included there; b) more HTML management work.

Maybe there is a better way to handle this?

Answer 1

In a component-based approach, the ideal way to do this is to have your style guide display a mapping between backgrounds and foreground colors. This should be a one-to-one mapping that should apply to most of your elements. Define CSS classes for them.

Next, you have a wrapper container for all of your components. Its purpose is to convey text colors to its wrapped components. So the approach is to have a background class for the section, and then the foreground color class for the executed content is applied to the wrapper, but runs the style through all the content.

Note. Specific color redefinitions can always be inside your component file, for example, by highlighting on some text, etc.

The library, which is suggested in the comments, does the same. The theme object has a primary and secondary color. The primary, applied to the partition and the secondary, is passed to the individual components as context. I suggest passing it only to the component shell.

A somewhat clever way to define classes is similar to

 t-wrapper-[colorName] 

Now this can be shared, and colorName can enter the context of your shell based on the background color

Hope this helps. Let me know if this answers what you need, or if you need fragment support for the same.

Answer 2

What you are asking for is essentially the style of the component inside the section based on the section itself. Unfortunately, this is not possible with CSS, since there is no parent selector in CSS . but inherit value , which allows you a component based on rules defined by its parent - perfect for component based CSS.

In my opinion, the best way you can use an alternative background style is to use :nth-of-type pseudo :nth-of-type class on <section> :

 section:nth-of-type(2n) { background: #464646; color: #fff; } 

 <section> <h2>Title</h2> <p>Text</p> <a href="#" class="btn">Action</a> </section> <section> <h2>Title</h2> <p>Text</p> <a href="#" class="btn">Action</a> </section> <section> <h2>Title</h2> <p>Text</p> <a href="#" class="btn">Action</a> </section> <section> <h2>Title</h2> <p>Text</p> <a href="#" class="btn">Action</a> </section> 

Given that :nth-of-type uses math for the target elements, you can access literally any combination of elements you would like:

 // Style every second element, starting with the first element section:nth-of-type(2n - 1) // Style every third element, starting with the second element (2, 5, 8, etc.) section:nth-of-type(3n + 2) 

This way, it doesn't matter if you use a component-based approach or not, since you can directly change the style of <section> directly .

Elements that inherit an attribute from internal style sheets (for example, the color of the <a> tag), unfortunately, will still be stylized based on the internal style sheet, and not the rules defined by their parents.

You can get around this using the contextual style:

 section:nth-of-type(n) { background: #464646; color: #fff; } section:nth-of-type(n) a { color: #fff; } 

 <section> <h2>Title</h2> <p>Text</p> <a href="#" class="btn">Action</a> </section> 

Or, alternatively (and preferably) use the inherit value to tell each <a> tag to inherit its color from its parent:

 section { background: #464646; color: #fff; } a { color: inherit; } 

 <section> <h2>Title</h2> <p>Text</p> <a href="#" class="btn">Action</a> </section> 

Hope this helps!

Answer 3

You can set a striped background style using the nth-child(odd) and nth-child(even) pseudo-classes on <section> :

 body{ margin:0; } section{ padding:20px; } section h2{ margin:0; } section:nth-child(odd){ background:#f5f7f6; color:#333; } section:nth-child(even){ background: #113343; color: #fff; } 

 <section> <h2>Title</h2> <p>Text</p> <a href="#" class="btn">Action</a> </section> <section> <h2>Title</h2> <p>Text</p> <a href="#" class="btn">Action</a> </section> <section> <h2>Title</h2> <p>Text</p> <a href="#" class="btn">Action</a> </section> <section> <h2>Title</h2> <p>Text</p> <a href="#" class="btn">Action</a> </section>