Avoid Overstyling Base Styles
In SMACSS, I talk about the different categories of CSS that we write. The very foundation are base styles—plain element selectors. No classes, no IDs. The purpose of these selectors is to style those elements on every page across the site in a consistent way. Many people I know like to use a CSS reset—like Eric Meyer’s or Normalize—on their project. These resets are base styles. S...
Semantic CSS
Subtitle: Why everybody who talks about the importance of semantics is both right and wrong at the same time. I’ve often heard people talk about semantic CSS. That is, the names we come up for IDs and class names should be meaningful. When people say “semantic”, I think they do so in a way that assumes that we all know what it means. Yet, the way it’s normally applied is never qui...
Considerations in Component Design
In developing a component-based interface, how we decide to construct our components can sometimes make a considerable difference. Consider this carousel design. Carousel with multiple cards and pagination controls The carousel contains a number of items and includes pagination controls. Let’s start with a very clean HTML structure with a single class to mark the container of...
Dealing with the Cascade and Specificity
One of the things that I enjoy covering in my workshops is how to deal with managing the CSS cascade. We all have different techniques that we use and each come with their pros and cons. The cascade is the rule-based system that rendering engines use to decide what properties should apply to an element when multiple rules are declared for the same element. For example, let’s say you have...