Act 21 Research OOCSS - Object-Oriented CSS

1. What is OOCSS?:

   • OOCSS (Object-Oriented CSS) is a CSS methodology that focuses on separating the structure of HTML from its appearance. It encourages code reuse and modularity by treating UI components as objects.

2. Core Principles:

   • Separation of Structure and Skin: Divide elements’ structure (layout) and visual design (colors, fonts) into separate styles.

   • Separation of Container and Content: Make components flexible and reusable regardless of where they are placed in the layout.

3. Advantages:

   • Encourages reusable code.

   • Helps create scalable, maintainable CSS.

Example:

  .btn {
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 1rem;
        cursor: pointer;
      }

      .btn--primary {
        background-color: blue;
        color: white;
      }

      .btn--secondary {
        background-color: gray;
        color: white;
      }

      .btn--success {
        background-color: green;
        color: white;
      }

 <button class="btn btn--primary">Primary Button</button>
 <button class="btn btn--secondary">Secondary Button</button>
 <button class="btn btn--success">Success Button</button>

Repo: https://github.com/devken4u/oocss-activity.git