CSS Classes & Pseudo Classes In Bricks

In this post, we will explore the benefits of using CSS classes, pseudo-classes, and the Block, Element, Modifier (BEM) methodology to speed up your web design workflow.

Understanding BEM

Before we delve into practical examples, let’s understand what BEM is. BEM stands for Block, Element, Modifier. It’s a naming convention for classes in HTML and CSS. The methodology helps create reusable components and code sharing in front-end development, making CSS more maintainable and understandable.

• Block: Standalone entity that is meaningful on its own.
• Element: A part of a block that has no standalone meaning and is semantically tied to its block.
• Modifier: A flag on a block or element used to change appearance or behaviour.

The BEM naming convention ensures that everyone who participates in the development of a website stays on the same page and can quickly understand how a piece of code affects the UI, even when revisiting it after a long time.

Why Use BEM?

• Modularity: BEM provides a framework for developing components that can be easily reused and combined.
• Clarity: The naming convention clearly reflects the relationship between the HTML and CSS, making it easier to understand.
• Scalability: BEM makes it easier to scale and maintain styles as a project grows.

Simplifying Repetitive Styles with CSS Classes

Let’s start with the simple task of styling buttons that appear multiple times across a website. Without CSS classes, you’d have to individually style each button, leading to a lot of duplicated code. Instead, we can create a global CSS class to apply common styles.

Here’s an example using BEM:

/* Defining a button block */
.btn {
  padding: 10px 20px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}

/* Defining an element that is part of the button block */
.btn__text {
  color: white;
}

/* Defining a modifier that changes the style of the button block */
.btn--primary {
  background-color: #007bff;
  border: 1px solid #007bff;
}

.btn--secondary {
  background-color: transparent;
  border: 2px solid #555;
}

In your HTML, you would use these classes like this:

<button class="btn btn--primary">
  <span class="btn__text">Primary Button</span>
</button>

<button class="btn btn--secondary">
  <span class="btn__text">Secondary Button</span>
</button>

Implementing Pseudo-Classes for Interaction States

Pseudo-classes like :hover or :active allow you to define styles for different states of an element. In BEM, modifiers can also represent states.

Here’s an example:

/* Changing the button background on hover for primary button */
.btn--primary:hover {
  background-color: #0056b3;
}

/* Changing the button border on hover for secondary button */
.btn--secondary:hover {
  border-color: #333;
}

These styles will change the appearance of the buttons when a user hovers over them, improving the interactive experience of the website.

Global Impact

One of the most significant advantages of using CSS classes and BEM is that any change made to these classes is reflected throughout the entire website. This ensures consistency and reduces the time needed to make global updates.

Conclusion

Incorporating CSS classes and adopting the BEM naming convention in your web design projects can improve efficiency. It streamlines your workflow, keeps your stylesheets organized, and ensures that your styles are easy to maintain and scale. The BEM methodology, in particular, provides a solid structure that makes your CSS robust and flexible.

Whether you’re a seasoned designer or just starting, experimenting with CSS classes, pseudo-classes, and BEM will elevate your web development game.