jeromebloging

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

Jerome Beriso's photo
Jerome Beriso
·

2 min read

  • The HTML code defines a single div element with the class card, which represents the card component.

  • The card has three child elements: card__header, card__body, and card__footer. These elements represent the header, body, and footer of the card, respectively.

  • The card__header element contains an h2 element with the class card__title, which represents the title of the card.

  • The card__body element contains a p element with the class card__description, which represents the description of the card.

  • The card__footer element contains two button elements with classes button and either button--primary or button--secondary. These buttons represent primary and secondary actions for the card.

  • The CSS styles (in the linked stylesheet) will be used to style the card and its components.

The BEM naming convention is used to organize the classes in a way that is easy to read and maintain. For example, the class card__header suggests that it is an element within the block (card) that represents the header. Similarly, the class button--primary suggests that it is a modifier for the block (button) that represents a primary action.

  • Block: card:

    • Defines the basic styles for the card, including width, border, border radius, padding, background color, and box shadow.

  • Element: card__header, card__title:

    • Defines styles for the card header and title, including margin-bottom for the header and font size and color for the title.

  • Element: card__body, card__description:

    • Defines styles for the card body and description, including margin-bottom for the body and font size and color for the description.

  • Element: card__footer:

    • Defines styles for the card footer, including display flex and justify-content space-between.

  • Block: button:

    • Defines the basic styles for buttons, including padding, border, border radius, cursor, and font size.

  • Modifier: button--primary:

    • Defines styles for primary buttons, including background color and text color.

  • Modifier: button--secondary:

    • Defines styles for secondary buttons, including background color and text color.

MY OUTPUT: