jeromebloging

Act 21 Research OOCSS - Object-Oriented CSS

Jerome Beriso's photo
Jerome Beriso
·

2 min read

HTML Structure:

  • The HTML file consists of a basic structure with a <head> section, <body> section, and a <button> element with two instances.

  • The button elements have two classes each: button and either button--primary or button--secondary.

CSS File (styles.css):

  • The CSS file is linked to the HTML file using the <link> tag in the <head> section.

  • The CSS file will define the styles for the button class and its variants (e.g., button--primary and button--secondary).

OOCSS Principles:

  • This example demonstrates the following OOCSS principles:

    • Separation of Concerns: The HTML structure and CSS styles are kept separate, making it easier to maintain and update the code.

    • Modularity: The CSS file defines reusable styles for the button class, which can be applied to multiple elements.

    • Abstraction: The CSS file defines abstract styles (e.g., .button) that can be extended or modified without affecting the underlying HTML structure.

By using OOCSS principles, this example shows how to write clean, maintainable, and scalable CSS code that separates presentation from structure and allows for easy reuse and modification.

Basic Button Style

The .button class defines a basic button style with the following properties:

  • display: inline-block makes the button an inline-block element

  • padding: 10px 20px sets the padding around the button's content

  • border: none removes any border from the button

  • border-radius: 5px adds a rounded corner to the button

  • font-weight: bold makes the button's text bold

  • cursor: pointer changes the mouse cursor to a pointer when hovering over the button

Skin Variations

The code defines two skin variations for the button:

  • .button--primary defines a primary skin with a blue background color (#007bff) and white text color

  • .button--secondary defines a secondary skin with a gray background color (#6c757d) and white text color

These skin variations can be applied to the basic button style by adding the corresponding class to the button element, e.g. <button class="button button--primary">Primary Button</button>

MY OUTPUT: