Activity 20: Research BEM - Block, Element, Modifier - Architercture

John Carlo RegalaJohn Carlo Regala
1 min read

Understanding BEM (Block, Element, Modifier)

BEM (Block-Element-Modifier) is a CSS methodology that helps maintain scalability and readability in your code. Using BEM, you can avoid naming conflicts and create a modular structure for your styles.

BEM Example: Card Component

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BEM Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card">
        <div class="card__header">
            <h2 class="card__title">Card Title</h2>
        </div>
        <div class="card__content">
            <p class="card__text">This is a sample card using the BEM naming convention. BEM makes CSS modular and easier to manage.</p>
        </div>
        <div class="card__footer">
            <button class="card__button card__button--primary">Learn More</button>
            <button class="card__button card__button--secondary">Cancel</button>
        </div>
    </div>
</body>
</html>

CSS

.card {
    border: 1px solid #ccc;
    border-radius: 8px;
    max-width: 400px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.card__header {
    background-color: #f4f4f4;
    padding: 16px;
    text-align: center;
}
.card__title {
    margin: 0;
    font-size: 1.5rem;
}
.card__content {
    padding: 16px;
}

.card__text {
    margin: 0;
    color: #333;
    font-size: 1rem;
}

.card__footer {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    background-color: #f4f4f4;
}

.card__button {
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.card__button--primary {
    background-color: #007bff;
    color: white;
}

.card__button--primary:hover {
    background-color: #0056b3;
}

.card__button--secondary {
    background-color: #6c757d;
    color: white;
}

.card__button--secondary:hover {
    background-color: #5a6268;
}

Output:

0
Subscribe to my newsletter

Read articles from John Carlo Regala directly inside your inbox. Subscribe to the newsletter, and don't miss out.

HTMLCSSBEM CSS

Written by

John Carlo Regala
John Carlo Regala