ACTIVITY# 20 (Block, Element, Modifier-Architecture)

What is BEM?:

BEM (Block Element Modifier) is a CSS naming convention aimed at improving code readability and maintainability by organizing CSS classes into distinct categories.
- It stands for:
  - Block: Standalone entity that is meaningful on its own.
    
    Examples
    
    header, container, menu, checkbox, input
  - Element: A part of a block that has no standalone meaning and is semantically tied to its block.
    
    Examples
    
    menu item, list item, checkbox caption, header title
  - Modifier: A flag on a block or element. Use them to change appearance or behavior.
    
    Examples
    
    disabled, highlighted, checked, fixed, size big, color yellow
Advantages of BEM:

The Block, Element, Modifier (BEM) methodology provides a structured approach to CSS architecture. It helps in creating reusable, maintainable, and scalable code. The main advantage of BEM is that it provides a clear and understandable structure to your CSS code, making it easier for other developers to understand and work with your code. It also reduces the chances of naming conflicts, as each class is unique to its block. This makes it easier to modify and maintain the code in the long run.

BEM methodology encourages designers and developers to think of a website as a collection of reusable component blocks that can be mixed and matched to create interfaces. A block is simply a section of a document, such as a header, footer, or sidebar, illustrated in Figure 2.3. Perhaps confusingly, “block” here refers to the segments of HTML that make up a page or application.

Practice:
- In this practice I use html for constructing a components of web development then I use a CSS for styling and layout. In BEM- Architecture the Block in this webpage is a card that has a element inside the block. While the element is inside in a block that consist of text, Lastly a modifier also known a design of a webpage but a button can be considered a block, and its variations can be considered modifiers.

<html lang="en">
<head>
 <link rel="stylesheet" href="style.css">
  <title>BEM </title>
</head>
<body>
  <div class="card">
    <img class="card_image" src="foto.jpg" >

    <h1 class="card-heading">Photo card</h1>

    <p class="card-paragraph">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero vel optio,<br>
       laudantium placeat quia reiciendis. Quis explicabo repudiandae similique iusto,

    </p>

    <button class="button-card1">Button</button>
    <button class="button-card2">Edi wow</button>
  </div>
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fcfcfc;
  }

  .card{
    background-color: rgb(252, 143, 161);
    width: 400px;
    height:380px;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 1px 2px 5 #333;
   padding: 20px;


  }

  .card_image{
    width: 30%;
    height: 40%;
   border: 5 solid #333;
   border-radius: 8;
  }

  .card-heading{
    font-size: 2.2rem;
    font-weight: 500;
    text-align: center;
  }
  .card-paragraph{
    font-size: 1rem;
    font-weight: 100;
    color: #fcfcfc;


  }
  .button-card1{
    background-color: #c52222; 
    color: #ffffff; 
    padding: 10px 20px; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
    margin-top: 20px;
 margin-bottom: 10px;
  }
  .button-card2{
    background-color: #4CAF50; 
    color: #ffffff; 
    padding: 10px 20px; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 


  }

GitHub Repository: https://github.com/Koronuma4Dev/BEM-CSS

References: https://getbem.com/introduction/

https://www.sitepoint.com/css-architecture-block-element-modifier-bem/

ACTIVITY# 20 (Block, Element, Modifier-Architecture)

Examples

Examples

Examples