1. Technology

What do you do when your design pattern breaks down?

Say you have a module. Every site has modules, right?

<div class="module">
</div>

Perfect! We did it!

But now, a New Circumstance™ comes along. This module isn’t going to work exactly as is. It’s pretty close, but in this New Circumstance™ the module is going to need some extra bottom margin.

How do you handle that? Let’s explore some ways.

Body class affects it

Are all the modules on a particular page or area of your site like this? Perhaps you can add a class to that page (or area):

<body class="books-page">

   ...

   <div class="module">
   </div>
.module {
  /* normal style */
}
body.books-page .module {
  /* variation styles */
}

You don’t really need to tag qualify the .books-page, but I often do because it’s no big deal in this circumstance and reminds me what’s going on.

Sass is useful in these circumstances because the nesting kinda ties the room together.

.module {
  /* normal style */
  aside.books &  {
    /* variation style */
  }
}

Totally new class

Perhaps the new style is different enough that you are going to call it something different.

<div class="solitary-module">
</div>
.module {
  /* normal style */
}
.solitary-module {
  /* alternate style */
}

If the style are pretty similar, you could:

.module, .solitary-module {
  /* normal style */
}
.solitary-module {
  /* variation styles */
}

Which is exactly what @extend does in Sass:

.module {
  /* normal style */
}
.solitary-module {
  @extend .module; /* could be a %placeholder selector */
  /* variation style */
}

Double up classes

Perhaps you create an additional class, but that class isn’t meant to work on it’s own, it’s just a variation.

<div class="module module-books">
</div>
.module {
  /* normal styles */
}
.module.module-books {
  /* variation styles */
  /* you don't HAVE to double up the classes here in the CSS, but it enforces the connection (while increasing specificity) */
}

Data-attribute variations

I don’t think this is particularly common, but I kinda dig it.

<div class="module" data-variation="books">
</div>

Attributes are like classes (same specificity) but can have values.

.module {
  /* normal styles */
}
.module[data-variation="books"] {
  /* variation styles */
}

Reads pretty well.

Inline styles

Is this variation rare? Perhaps just an inline style will work.

<div class="module" style="margin-bottom: 40px;">
</div>

Typically frowned upon (not reusable), but if it’s a one-off thing, it does the job.

Shame.css

You can always deal with it later with shame.css!

<div class="module chris-did-this">
</div>
/* I will totally deal with this later I promise */
.chris-did-this {
  /* variation styles */
}

How do you do it?


What do you do when your design pattern breaks down? is a post from CSS-Tricks

No Comments
Comments to: What do you do when your design pattern breaks down?

Recent Articles

Good Reads

Worlwide

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]

Trending

Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]
Singapore is recognised globally as a prime destination for foreign investors. Its business structure is well-developed, and its tax system is favourable to business owners. The government has a strong support system for entrepreneurs and provides legal protection for intellectual property rights. All of these conditions create an environment that is ideal for Singapore company […]
2020 has been a year that represents aggressive and sustained volatility with a confluence of unexpected situations, including economic shifts and market disturbance confluence. The COVID-19 pandemic forces businesses to adjust their methods of operations to ensure survival. These adjustments become the trajectory and guidance of what 2021 should look like and what companies should […]
COVID-19 pandemic has affected Thailand’s economy and labor market. World Bank’s Thailand Economic Monitor predicted that it would take Thailand over two years to return to its pre-COVID-19 growth and domestic product output levels. Although the country has successfully curbed the pandemic tide over the last few months, the economy remains severely hit. Nevertheless, heavily […]