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

Welcome to A2 Logic Group, your premier destination for comprehensive training and consulting services. Specializing in a broad spectrum of Information Technologies, we have grown from a dedicated team of IT and management enthusiasts into recognized industry leaders. Today, A2 Logic Group supports a global clientele of students, professionals, educational institutions, and corporations. Our success […]
In Qatar’s fast-paced business landscape, optimizing fleet operations is crucial for success. A reliable and efficient vehicle tracking system offers numerous benefits, empowering businesses to streamline operations, enhance security, and improve overall efficiency. Whether you manage a small delivery fleet or a large transportation network, implementing a vehicle tracking system in Qatar can significantly transform […]

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 […]
Welcome to A2 Logic Group, your premier destination for comprehensive training and consulting services. Specializing in a broad spectrum of Information Technologies, we have grown from a dedicated team of IT and management enthusiasts into recognized industry leaders. Today, A2 Logic Group supports a global clientele of students, professionals, educational institutions, and corporations. Our success […]
In Qatar’s fast-paced business landscape, optimizing fleet operations is crucial for success. A reliable and efficient vehicle tracking system offers numerous benefits, empowering businesses to streamline operations, enhance security, and improve overall efficiency. Whether you manage a small delivery fleet or a large transportation network, implementing a vehicle tracking system in Qatar can significantly transform […]
Approximately 25 million Americans have been diagnosed with cataracts at some time in their life. Nearly three million people have been diagnosed with glaucoma. If you fall into either of these groups, you should understand the importance of seeing an ophthalmologist frequently. An ophthalmologist can help you handle diseases such as cataracts and glaucoma appropriately. […]

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 […]