Act 21 Research OOCSS - Object-Oriented CSS

HTML Structure Using BEM

Here’s an example of a simple card component that displays user information. The component will include a title, description, and buttons.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OOCSS Page </title>
    <link rel="stylesheet" href="styles.css"> <!-- Link to the external CSS file -->
</head>
<body>

    <header class="header">
        <h1 class="header__title">OOCSS Sample Page </h1>
    </header>

    <main class="main">
        <section class="card">
            <div class="card__content">
                <h2 class="card__title">Card Title</h2>
                <p class="card__description">This is a description of the card content.</p>
                <a href="#" class="button button--primary">Read More</a>
                <a href="#" class="button button--secondary">Share</a>
            </div>
        </section>

        <section class="card">
            <div class="card__content">
                <h2 class="card__title">Another Card Title</h2>
                <p class="card__description">This is another description of a card content.</p>
                <a href="#" class="button button--primary">Read More</a>
                <a href="#" class="button button--secondary">Share</a>
            </div>
        </section>
    </main>





    <footer class="footer">
        <p>© 2024 OOCSS Page | All Rights Reserved</p>
    </footer>

</body>
</html>

CSS Styles for BEM Structure

Now, let’s style the card component using CSS.

/* styles.css */

/* Basic reset for margins and padding */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.header {
    background-color: #007bff; /* Header background color */
    color: white; /* Header text color */
    text-align: center; /* Center header text */
    padding: 20px; /* Padding around header */
}

.header__title {
    margin: 0; /* Remove default margin */
}

.main {
    display: flex; /* Flexbox for layout */
    flex-direction: column; /* Stack cards vertically */
    align-items: center; /* Center align items */
    padding: 20px; /* Padding around main content */
}

.card {
    background-color: #ffffff; /* Card background color */
    border: 1px solid #ddd; /* Card border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 300px; /* Fixed width for the card */
    margin: 20px; /* Margin around each card */
    overflow: hidden; /* Prevent content overflow */
}

.card__image {
    width: 100%; /* Full width for the image */
    height: auto; /* Maintain aspect ratio */
}

.card__content {
    padding: 15px; /* Padding inside the card content */
}

.card__title {
    font-size: 20px; /* Font size for the card title */
    color: #333; /* Dark grey color for the title */
    margin: 0; /* Remove default margin */
}

.card__description {
    font-size: 14px; /* Font size for the description */
    color: #555; /* Grey color for the description */
    margin: 10px 0; /* Margin above and below the description */
}

.button {
    display: inline-block; /* Make buttons inline */
    padding: 10px 15px; /* Padding for the buttons */
    margin-right: 10px; /* Space between buttons */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners for buttons */
    text-decoration: none; /* Remove underline from links */
    color: white; /* White text color */
}

.button--primary {
    background-color: #007bff; /* Blue background for primary button */
}

.button--secondary {
    background-color: #6c757d; /* Grey background for secondary button */
}

.footer {
    text-align: center; /* Centered text */
    padding: 10px; /* Padding around footer */
    background-color: #f1f1f1; /* Light background for footer */
    color: #333; /* Dark text color */
    position: relative; /* Positioning for footer */
    bottom: 0; /* Aligns footer at the bottom */
    width: 100%; /* Full width for footer */
}

HTML Structure Overview

1. Document Type and Head Section

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OOCSS Page </title>
    <link rel="stylesheet" href="styles.css"> <!-- Link to the external CSS file -->
</head>

DOCTYPE Declaration: The document starts with <!DOCTYPE html>, indicating that this is an HTML5 document.
HTML Tag: The <html lang="en"> tag specifies that the content of the page is in English.
Head Section: Contains metadata, the title of the page, and a link to the external CSS file (styles.css) that will style the HTML elements.

2. Body Section

htmlCopy code<body>

    <header class="header">
        <h1 class="header__title">OOCSS Sample Page </h1>
    </header>

Header:
- The <header> element contains a title for the page.
- The class .header is a block that represents the header section.
- The class .header__title is an element within the header that specifically styles the title.

3. Main Content

htmlCopy code<main class="main">
    <section class="card">
        <div class="card__content">
            <h2 class="card__title">Card Title</h2>
            <p class="card__description">This is a description of the card content.</p>
            <a href="#" class="button button--primary">Read More</a>
            <a href="#" class="button button--secondary">Share</a>
        </div>
    </section>

    <section class="card">
        <div class="card__content">
            <h2 class="card__title">Another Card Title</h2>
            <p class="card__description">This is another description of a card content.</p>
            <a href="#" class="button button--primary">Read More</a>
            <a href="#" class="button button--secondary">Share</a>
        </div>
    </section>
</main>

Main Element:
- The <main> tag signifies the primary content area of the page.
- It contains multiple <section> elements, each representing a card component.
Card Section:
- Each <section class="card"> acts as a reusable component that can be styled independently.
- The .card class represents the block, while .card__content, .card__title, and .card__description are its elements.
  - .card__content: A wrapper for the card's content.
  - .card__title: The title of the card.
  - .card__description: A brief description of the card.
  - Buttons:
    - .button: A common class for all buttons.
    - .button--primary and .button--secondary: Modifiers for button styles indicating different types of actions.

htmlCopy code<footer class="footer">
    <p>© 2024 OOCSS Page | All Rights Reserved</p>
</footer>

Footer:
- The <footer> element contains copyright information and signifies the end of the page.
- The class .footer can be styled separately in the CSS.

Explanation of OOCSS Principles

OOCSS (Object-Oriented CSS) is a methodology that encourages the separation of structure and skin (styling) to promote reuse and maintainability. Here's how it applies to this code:

Separation of Structure and Skin:
- Classes are defined based on the component's structure (card, header, etc.) rather than visual styles. This separation allows for easier updates to the styles without affecting the underlying HTML structure.
Reuse:
- The use of classes like .card, .button, and their modifiers promotes reusability. You can easily create multiple card sections with different titles and descriptions without duplicating styles.
Flexibility:
- By using a block and element naming convention, styles can be easily adjusted or overridden by changing modifiers, enhancing flexibility in design.
Modularity:
- Each section of the page (header, cards, footer) is modular, making it simple to maintain and expand the page. For example, if a new card type is required, you can create it using the existing structure.

CSS Breakdown

1. Basic Reset for Margins and Padding

cssCopy codebody {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

margin: 0; and padding: 0;: These properties reset the default margin and padding of the body element, ensuring a clean slate for styling.
font-family: Arial, sans-serif;: Sets the default font for the entire page to Arial, with a fallback to a generic sans-serif font.

2. Header Styles

cssCopy code.header {
    background-color: #007bff; /* Header background color */
    color: white; /* Header text color */
    text-align: center; /* Center header text */
    padding: 20px; /* Padding around header */
}

.header__title {
    margin: 0; /* Remove default margin */
}

.header:
- background-color: #007bff;: Sets a blue background for the header.
- color: white;: Changes the text color to white for contrast against the blue background.
- text-align: center;: Centers the text within the header.
- padding: 20px;: Adds padding around the header for spacing.
.header__title:
- margin: 0;: Removes any default margins around the title, ensuring it aligns neatly within the header.

3. Main Content Styles

cssCopy code.main {
    display: flex; /* Flexbox for layout */
    flex-direction: column; /* Stack cards vertically */
    align-items: center; /* Center align items */
    padding: 20px; /* Padding around main content */
}

.main:
- display: flex;: Utilizes Flexbox for layout management, allowing flexible alignment of child elements.
- flex-direction: column;: Stacks child elements (cards) vertically.
- align-items: center;: Centers the cards horizontally.
- padding: 20px;: Provides padding around the main content area for spacing.

4. Card Styles

cssCopy code.card {
    background-color: #ffffff; /* Card background color */
    border: 1px solid #ddd; /* Card border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 300px; /* Fixed width for the card */
    margin: 20px; /* Margin around each card */
    overflow: hidden; /* Prevent content overflow */
}

.card:
- background-color: #ffffff;: Sets a white background for the cards.
- border: 1px solid #ddd;: Adds a light gray border around the card for definition.
- border-radius: 8px;: Rounds the corners of the card for a softer look.
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);: Creates a subtle shadow effect, adding depth to the card.
- width: 300px;: Defines a fixed width for the card, making it uniform.
- margin: 20px;: Adds space around each card to separate them visually.
- overflow: hidden;: Prevents content from overflowing out of the card's border.

5. Card Content Styles

cssCopy code.card__image {
    width: 100%; /* Full width for the image */
    height: auto; /* Maintain aspect ratio */
}

.card__content {
    padding: 15px; /* Padding inside the card content */
}

.card__title {
    font-size: 20px; /* Font size for the card title */
    color: #333; /* Dark grey color for the title */
    margin: 0; /* Remove default margin */
}

.card__description {
    font-size: 14px; /* Font size for the description */
    color: #555; /* Grey color for the description */
    margin: 10px 0; /* Margin above and below the description */
}

.card__image: (Note: This class isn't used in the HTML provided but is defined here for possible future use)
- width: 100%;: Ensures the image fills the card's width.
- height: auto;: Maintains the aspect ratio of the image.
.card__content:
- padding: 15px;: Adds padding within the card content area for spacing.
.card__title:
- font-size: 20px;: Sets a larger font size for the title to make it stand out.
- color: #333;: Uses a dark gray color for better readability.
- margin: 0;: Removes default margins for consistent spacing.
.card__description:
- font-size: 14px;: Sets a smaller font size for the description.
- color: #555;: Uses a lighter gray color for the description text.
- margin: 10px 0;: Adds vertical margin for spacing above and below the description.

6. Button Styles

cssCopy code.button {
    display: inline-block; /* Make buttons inline */
    padding: 10px 15px; /* Padding for the buttons */
    margin-right: 10px; /* Space between buttons */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners for buttons */
    text-decoration: none; /* Remove underline from links */
    color: white; /* White text color */
}

.button--primary {
    background-color: #007bff; /* Blue background for primary button */
}

.button--secondary {
    background-color: #6c757d; /* Grey background for secondary button */
}

.button:
- display: inline-block;: Makes the button elements display inline while allowing padding and margin.
- padding: 10px 15px;: Adds padding inside the button for better touch targets.
- margin-right: 10px;: Adds space between multiple buttons.
- border: none;: Removes the default border styling.
- border-radius: 5px;: Rounds the corners of the buttons.
- text-decoration: none;: Ensures no underline appears on button links.
- color: white;: Sets the button text color to white.
.button--primary:
- background-color: #007bff;: Applies a blue background color to primary buttons, making them stand out.
.button--secondary:
- background-color: #6c757d;: Applies a gray background color to secondary buttons for differentiation.

cssCopy code.footer {
    text-align: center; /* Centered text */
    padding: 10px; /* Padding around footer */
    background-color: #f1f1f1; /* Light background for footer */
    color: #333; /* Dark text color */
    position: relative; /* Positioning for footer */
    bottom: 0; /* Aligns footer at the bottom */
    width: 100%; /* Full width for footer */
}

.footer:
- text-align: center;: Centers the footer text.
- padding: 10px;: Adds padding around the footer content.
- background-color: #f1f1f1;: Sets a light gray background for the footer.
- color: #333;: Uses a dark text color for good contrast against the light background.
- position: relative;: Sets the footer's positioning context.
- bottom: 0;: Aligns the footer at the bottom of its containing element.
- width: 100%;: Ensures the footer spans the entire width of the page.

Advantages of BEM Demonstrated

Improves Code Readability: The class names clearly describe the structure and role of each element, making it easier to understand the layout.
Encourages Modularity: Each block and element can be styled independently, making it easier to manage and update styles in larger projects.
Helps Avoid CSS Conflicts: The BEM naming convention reduces the likelihood of naming conflicts in styles, as class names are specific to their context.

https://github.com/JoshuaNato/Act21-Research-OOCSS---Object-Oriented-CSS