Real estate for a targeted audience

Question

Real estate for a targeted audience

1. Overview

I have a list of selectors that should always apply certain properties.
Some selectors require additional properties to be added.

I'm struggling to find a way to achieve this without repeating code.

2. Minimal CSS Example (MCVE)

2.1. Expected CSS Output

.KiraFirst,
.KiraSecond,
.KiraThird {
  color: red;
}
.KiraSecond {
  background-color: yellow;
}

In the example above, .KiraSecond is repeated twice. Is there a way to achieve the expected behavior without this repetition?

2.2. Using Stylus

View live demo on stylus-lang.com

.KiraFirst
.KiraSecond
.KiraThird
    color red

.KiraSecond
    background-color yellow

This stylus code compiles to the expected CSS output, but the use of .KiraSecond is duplicated.

I'm unsure of how to avoid this duplication. For instance, the following syntax did not produce the expected CSS:

.KiraFirst
.KiraSecond
    background-color yellow
.KiraThird
    color red

The result was:

.KiraFirst,
.KiraSecond {
  background-color: #ff0;
}
.KiraThird {
  color: #f00;
}

3. Resources I've Tried

Stylus official documentation, specifically the Selectors section
Stack Overflow questions related to Stylus
Stylus GitHub issues

css stylus

Answer 1

Answer №1

One approach could be to use a generic class for all elements, such as .Kira. Then, if you need to apply specific styles to certain elements, you can create additional classes like .KiraSecond or use pseudo selectors like .Kira:nth-child(2).

For example:

.Kira {
  color: red;
}
.KiraSecond {
  background-color: yellow;
}

Alternatively:

.Kira {
  color: red;
}
.Kira:nth-child(2) {
 background-color: yellow;
}

Answer 2

One approach could be to use a generic class for all elements, such as .Kira. Then, if you need to apply specific styles to certain elements, you can create additional classes like .KiraSecond or use pseudo selectors like .Kira:nth-child(2).

For example:

.Kira {
  color: red;
}
.KiraSecond {
  background-color: yellow;
}

Alternatively:

.Kira {
  color: red;
}
.Kira:nth-child(2) {
 background-color: yellow;
}

Answer 3

Answer №2

It's best not to? and you should avoid it. Repeating that selector in such cases is actually a good practice.

You are not duplicating the same property/value for multiple classes
You can easily override specific properties
You can easily modify/change behavior for specific classes

For example:

.class1, .class2, .class3 {
  color: red;
  background: yellow;
  border: 1px solid;
}

.class1:hover {
  color: blue;
}

.class2 {
  border: 2px dotted;
}

.class3 {
  color: pink;
}

What would be a poor practice in this case (without repeating selectors)

.class1 {
  color: blue;
  background: yellow;
  border: 1px solid;
}

.class2 {
  color: red;
  background: yellow;
  border: 2px dotted;
}

.class3 {
  color: pink;
  background: yellow;
  border: 1px solid;
}

Answer 4

It's best not to? and you should avoid it. Repeating that selector in such cases is actually a good practice.

You are not duplicating the same property/value for multiple classes
You can easily override specific properties
You can easily modify/change behavior for specific classes

For example:

.class1, .class2, .class3 {
  color: red;
  background: yellow;
  border: 1px solid;
}

.class1:hover {
  color: blue;
}

.class2 {
  border: 2px dotted;
}

.class3 {
  color: pink;
}

What would be a poor practice in this case (without repeating selectors)

.class1 {
  color: blue;
  background: yellow;
  border: 1px solid;
}

.class2 {
  color: red;
  background: yellow;
  border: 2px dotted;
}

.class3 {
  color: pink;
  background: yellow;
  border: 1px solid;
}

Real estate for a targeted audience

1. Overview

2. Minimal CSS Example (MCVE)

2.1. Expected CSS Output

2.2. Using Stylus

3. Resources I've Tried

Answer №1

Answer №2

Similar questions

Incorporate concealed image into HTML

The initial transition in offcanvas on bootstrap 5 is not appearing when a placement is dynamically added

How to ensure a div within an anchor tag occupies the full width in HTML and CSS?

Ensure that the select boxes are aligned in a horizontal manner

Tips for aligning one item in the center and another item on the right with MUI v5

Having trouble with loading base.css in React tutorial?

Discrepancy in inner div presentation between Internet Explorer and Chrome

Stable Banner with Automatic Scroll to Sections

Having trouble with ion-item click not functioning in Ionic 3?

I noticed a random gap between the elements with no discernible explanation

Is your CSS failing to synchronize with HTML?

Unable to vertically align images in the carousel

Parent div is positioned absolutely with overflow set to hidden

The arrangement of elements varies based on the type of display

What's the deal with this occurrence? The width of the HTML window seems

Content positioned beside an image with the help of Bootstrap 4 framework

Display the HTML/CSS layout following the JavaScript window.open action

Tips for adjusting the position of overflowing text on a website using CSS in real-time

What is the formula for determining the grid width when an item exceeds the column size?

Ensuring Equal Padding on Both Sides of a Div by Setting its Width