# Open / Close Principle (OCP)

### Definition :

> ***"A class should be open to extension and closed to modification"***

{% hint style="info" %}
In more "CSS friendly terms" this statement says that **classes should never be modified from a different place from where they are declared.** Instead we should use multiple classes to achieve to the desired behavior. 
{% endhint %}

Another statement we can make is : 

{% hint style="info" %}
**A component should never change based on where it is, but be extended so we can use as many variation as required to be used in various contexts**
{% endhint %}

### Let's have an exemple :

look at the following **bad exemple** of code :

```markup
<button class="button">Action Button</button>
<div class="context">
    <button class="button">Action Button</button>
</div>
```

```css
.button {
    /* ... button's styles */
    color: green;
}

.context {
    /* ... context's styles */
}

.context .button {
    color: blue;
    margin-left: 16px;
}
```

There is multiple mistakes here regarding either the **OCP** and the **SRP** (open/close and single responsibility) :

1. we modify the color of the button depending on his context.&#x20;
2. we modify the `.button` class by adding a property
3. we add to the button the responsibility of the margin

### To follow both the **OCP** and the [**SRP**](/atomic-design-css-architecture-with-itcss-bem-sass/principles/single-responsibility-principle.md)**,** we could have done :

```markup
<button class="button">Action Button</button>
<div class="context">
    <button class="
        context__action
        button button--blue
    ">
        Action Button
    </button>
</div>
```

```css
.button {
    /* ... button's styles */
    color: green;
}

.button--blue {
    color: green;
}

.context {
    /* ... context's styles */
}

.context__action {
    margin-left: 16px;
}
```

Note that in the previous exemple, we used the [**BEM**](/atomic-design-css-architecture-with-itcss-bem-sass/bem-conventions/bem-presentation.md) naming convention, more detailed informations about [**BEM**](/atomic-design-css-architecture-with-itcss-bem-sass/bem-conventions/bem-presentation.md) will follow.&#x20;

Now you can see that we extended the `.button` class with a `.button--blue` option, or more precisely a modifier (to follow the BEM convention).

this modifier allow us to use the blue variation anywhere we see fit in the code source.&#x20;

Secondly, instead of adding the margin directly to the `.button` trough an override, we created a class attached to the `.context` class called `.context__action` that is responsible for creating the required white space.&#x20;

In the real world, both `button` and `context` are being instantiated in different places (even different files)

This approach has multiple benefits.&#x20;

* By not modifying button at all from context, we keep the component decoupled from one another. Deleting the `button` css file will delete all instances of the `button` class of the code base
* We are not tied to structure (using a `button` with `.context__action`, it could be for exemple, a link instead)
* It's more flexible and safe, because for instance, if we need to add another `button` into `context`, we maybe don't want it to have a `margin-left` in this specific use-case&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://gael-boyenval.gitbook.io/atomic-design-css-architecture-with-itcss-bem-sass/principles/open-close-principle.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.