#Codebox odd even background code
#Codebox odd even background series

A popular convention is to use two hyphens to indicate a modifier: message-error. For instance, an “error” modifier for the message module might be “message-error.” By including the module name, you clearly indicate that this class belongs with the message module. We do this by defining modifiers.Ĭreate a modifier by defining a new class name with the module’s name. Perhaps we want to distinguish between messages that are purely informational and those indicating a successful action, such as saving. For instance, if we need to display an error message, perhaps it should be colored red rather than teal.

Our message module is nice, but we might need it to look different under certain circumstances. At a subconscious level, this helps users trust your app.Ĭonsistency is good, but sometimes you want to intentionally deviate from it. It looked more professional, less quickly thrown together.

#Codebox odd even background code

By creating a module, it ensured not only simpler code (less repetition), but also visual consistency. The solution was to refactor it into a single reusable module that worked regardless of its location on the page. The intent was to have a consistent experience, but slow evolution over time introduced changes that didn’t propagate to every instance of that button. Some had a slightly different padding or a brighter color of red. The same code was repeated multiple times in the stylesheet, though they were imperfect copies of one another.

#Codebox odd even background series

In one, a series of similar buttons appeared throughout the app. I’ve worked on projects where the CSS wasn’t modular. You won’t have a slightly different teal color in some places or a slightly larger padding in others. By adding this class to an element, you can reuse these styles to give user feedback on form input, provide noticeable help text, or draw attention to a legal disclaimer.īy reusing the same module, you produce a consistent user interface. Without this restriction, the module is reusable in any context. message means this module can only be used inside a #sidebar element. In contrast, using a selector like #sidebar. Nothing else in the selector restricts these styles to a certain place on the page. It’s important that the selector for this module consists only of the single class name. This may seem like nothing special at this point you should be familiar with all of these properties. ❶ Target the message module by its class name The markup for this module is a single div with a “message” class (listing 2). Each module needs a unique name, and we call this one a “message.” We’ll give it a bit of color and a border to draw the user’s attention, as shown in figure 1. This is used for brief notification messages. After your base styles, the rest of your stylesheet consists mainly of modules. They provide a stable foundation upon which you can build your modular CSS. Once your base styles are set on a project, they rarely change. The idea is that these styles provide the global look you want, but are easy to override later when you need to. There should be no class names or ids in your selectors only target elements by their tag type and the occasional pseudo-class. Only add styles here that you want applied to most, or all, of the page. Add this before your stylesheet as part of your base styles. This is a small stylesheet that helps even out some discrepancies between the user agent stylesheets of various browsers. Tip I recommend a library called normalize.css.

Depending on the project, you’ll want to apply styles for form fields, tables, and lists. By default, the has a small margin, which you may wish to zero out. Other base styles typically include link colors, heading styles and margins. Font-family: Helvetica, Arial, sans-serif ❷