Act 21 Research OOCSS - Object-Oriented CSS
Instructions:
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.
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.
Advantages:
Encourages reusable code.
Helps create scalable, maintainable CSS.
Practice:
index.html contents:
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OOCSS Example</title>
</head>
<body>
<h1>OOCSS Example</h1>
<!-- Reusable Card Component -->
<div class="card card-skin">
<h2>Card Title</h2>
<p>This is a simple card component.</p>
<div class="btn btn-primary">Primary Button</div>
</div>
<!-- Another Reusable Card Component -->
<div class="card card-skin">
<h2>Another Card</h2>
<p>This is another card with different content.</p>
<div class="btn btn-secondary">Secondary Button</div>
</div>
</body>
</html>
styles.css contents:
CODE:
.card {
width: 300px;
padding: 20px;
margin: 10px;
border: 1px solid #ccc;
display: inline-block;
text-align: center;
}
.btn {
display: inline-block;
padding: 10px 20px;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
/* Skin (Visuals) */
.card-skin {
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.btn-primary {
background-color: #007bff;
color: white;
border-radius: 5px;
}
.btn-secondary {
background-color: #6c757d;
color: white;
border-radius: 5px;
}
OUTPUT:
