> For the complete documentation index, see [llms.txt](https://gael-boyenval.gitbook.io/atomic-design-css-architecture-with-itcss-bem-sass/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gael-boyenval.gitbook.io/atomic-design-css-architecture-with-itcss-bem-sass/implementation-guides/responsive-and-modularity-rules.md).

# Responsive and modularity rules

### Modularity rules

In general terms, **float, margins, positions, top, bottom** (...etc) **properties are context based**. In order to be as reusable and modular as possible**, blocks entities should not set those properties**. That responsibility should fall to **layout and utilities classes or to the containing element entity** of another components. 

#### Sizes rules :

{% hint style="danger" %}
Components block level entities should not set sizes other than a **fixed one** (14px), or **100% / fluid**.
{% endhint %}

```css
/* DON'T */
.gm-block {
    width: 25%;
    /* 
    * 25% of what ? we should not be aware
    * of our context in order to be reusable
    */
}
```

```css
/* DO, when it make sense */
.ga-icon {
    width: 16px;
    /* some blocks require fixed sizes */
}
```

```css
/* DO */
.ga-button {
    display: inline-block /* or inline, or inline-flex */;
    /* natural content's size */
    
    &--full {
        /* a modifier to set it to 100% */
        width: 100%;
    }
}
```

```css
/* DO */
.ga-block {
   display: block;
   /* or */
   width: 100%;
   /* the context size will define the size of this element */
}
```

{% hint style="success" %}
You can use elements entities to define sizes, margins, or context of lower levels components
{% endhint %}

```css
.gm-search-bar {
    /* own search bar styles */
    padding: /*...*/;
    background: /*...*/;
    
    &__column {
        /* 
        * this will be used as emplacement 
        * for a lower level component
        */
        width: 33%;
        float: left;
        margin: 5px 8px;
    }
}
```

```css
.ga-input-search {
    display: block; /* or width: 100% if required */
}
```

```markup
<form class="gm-search-bar">
    <div class="gm-search-bar__column">
        <!-- the container constrain the input size -->
        <input type="search" class="ga-input-search" ...>
    </div>
    <div class="gm-search-bar__column">
        <!-- the container constrain the input size -->
        <select options="..." class="ga-input-select" ...>
    </div>
    <button 
        type="submit" 
        class="gm-search-bar__column ga-button ga-button--green">
        <!-- 
            you can use the gm-search-bar__column 
            element class directly on the block
            if you don't want to use a container div
        -->
        text
    </button>
</form>
```

####

#### Positioning rules :

{% hint style="danger" %}
**Components block entities should not use positions values other than relative**. Use instead Layouts, Utilities or higher level component elements to set positions
{% endhint %}

For the same reason as above. Relative positions are allowed since they are used to set a context for children elements that may have absolute or fixed position.&#x20;

{% hint style="danger" %}
**Components block entities should not use top, right, left, bottom properties**. Use instead Layouts, Utilities or higher level component elements to set positions
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/implementation-guides/responsive-and-modularity-rules.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.