Your responsive pattern library should not be filled with only examples of the patterns and their HTML, CSS, and/or JS, it should also be filled with meaningful descriptions of each pattern. Every pattern has its purpose. It is designed to hold specific content, look a specific way, or be on specific pages. The easiest way to make this clear to future developers editing a project is to write it down. Remember, your responsive pattern library has its own user experience for you to design. You can make it easy or hard for future developers to use your pattern library. You can even do this to yourself.

I love the "past self"/ "future self" example. Did you ever design or code something, not look at it for a long time, and look back and say, "What was I thinking?" Maybe you wrote some really complicated and unnecessary CSS that you now have to deal with. When this happens, you may think "Curse you, past self! You are so lazy." On the flip side, maybe you are creating a new layout in HTML and are including some really thoughtful comments to refer to in the future. You may find that when you revisit it, you think "Oh thanks, past self, that was so smart and helpful for present me." The point is, always think about what future you, or future self, would prefer.

Remember the full span video pattern from Chapter 6, Combining Responsive Patterns. You can look at the following image to refresh your memory. The pattern consisted of a looping video stretching across the page with text overlaid on top.

Let's write a description for it in our pattern library. The following are two descriptions showing a bad example and a good example:

The bad example states the obvious. I can tell just by looking at the pattern that it is a full span video with a text overlay. A good description will not only tell you what the pattern is, but what it should never be. It documents the decisions made about the pattern for others to understand it better as well. In our good example, we make sure to note that this pattern should only be used on the home page. We also describe important shifts that occur at different screen sizes. This description makes sure we know when, where, and how to use this pattern.

It's great when a client gives you permission to show off and claim rights to the work you have done for them. Even if you made an amazing responsive pattern library with clear thorough guidelines, clients can still mutate your work. Perhaps the client mangled your work to a point you hope no one thinks you did it. This can be a terrible situation to be in when you put so much work into a project. For this, keeping a copy of the responsive pattern library can help. If you want to show off the work you did, untouched, you can show people the original pattern library. If you have a portfolio website, you don't have to link to the live site. Pattern libraries are usually small enough you could easily host it yourself. This way you can show off the preserved patterns you made, in action.

Mutation does not only happen after a project is launched and the pattern library is handed off. It can also happen internally. Sometimes, towards the end of a project, we can start to rush and our code can suffer. Things can get a little more hectic when we are working with others. Working in with a pattern library can help reduce CSS bloat because it forces you to think modularly. Pattern libraries archive all the work done on the project. Before creating a new template or module, developers should look through the pattern library to make sure they are not doing duplicate work. Even if the pattern does not yet exist, maybe they will find a pattern similar to it and can start from there. Doing this helps reduce CSS bloat since the developer isn't starting from scratch. They are then less likely to write or overwrite CSS that already exists. This helps reduce the amount of frustrated developers that want to throw !important on the end of a CSS declaration and call it a day. Pattern libraries force you to break down a website into its pieces. Working modularly can help you save time since you have all the building blocks (patterns) already made. You just need to put them together and fill in any gaps.