<commit_before># Styled Components Modifiers

Styled Components are incredibly useful when building an application, but the community lacks guidelines and best practices for how to structure, organize, and modify a component library. Fortunately, the CSS ecosystem has several solutions for this, including the very well-thought-out [Block, Element, Modifier (BEM) conventions](http://getbem.com).

This library enhances [`styled-components`](https://www.styled-components.com/) by allowing you to use BEM-flavored conventions when building your components.

## Blocks and Elements

Our method for structuring Blocks and Elements doesn’t actually require any special tooling. It’s a simple convention we use for namespacing the components. You just need to add the Elements as properties of a Block component:

```jsx
  // Define your Button styled component (the Block)
  const Button = styled.button``;

  // Define your Icon styled component (the Element)
  const Icon = styled(FontAwesome);

  // Add the Icon as a property of the Button
  Button.Icon = Icon;

  // To render these components...
  render() {
    return (
      <Button>
        <Button.Icon />
      </Button>
    )
  }
```

This gives us a nice namespacing that's easy to visualize in a Blocks and Elements structure.

But what about _modifiers_?
<commit_msg>adds Installation section to README (#3)<commit_after># Styled Components Modifiers

[![CircleCI](https://img.shields.io/circleci/project/github/Decisiv/styled-components-modifiers.svg)]()

Styled Components are incredibly useful when building an application, but the community lacks guidelines and best practices for how to structure, organize, and modify a component library. Fortunately, the CSS ecosystem has several solutions for this, including the very well-thought-out [Block, Element, Modifier (BEM) conventions](http://getbem.com).

This library enhances [`styled-components`](https://www.styled-components.com/) by allowing you to use BEM-flavored conventions when building your components.

## Installation

This package is available on npm as `styled-components-modifiers`, and you can find it [here](https://www.npmjs.com/package/styled-components-modifiers).

To install the latest stable version with `yarn`:

```sh
$ yarn add styled-components-modifiers
```

...or with 'npm':

```sh
$ npm install styled-components-modifiers --save
```

## Blocks and Elements

Our method for structuring Blocks and Elements doesn’t actually require any special tooling. It’s a simple convention we use for namespacing the components. You just need to add the Elements as properties of a Block component:

```jsx
  // Define your Button styled component (the Block)
  const Button = styled.button``;

  // Define your Icon styled component (the Element)
  const Icon = styled(FontAwesome);

  // Add the Icon as a property of the Button
  Button.Icon = Icon;

  // To render these components...
  render() {
    return (
      <Button>
        <Button.Icon />
      </Button>
    )
  }
```

This gives us a nice namespacing that's easy to visualize in a Blocks and Elements structure.

But what about _modifiers_?

{'fraction_non_alphanumeric': 0.08677685950413223, 'fraction_numerical': 0.0003178639542275906, 'mean_word_length': 4.043269230769231, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 4, 'lorem ipsum': 0, 'www.': 3, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2029885', 'n_tokens_mistral': 871, 'n_tokens_neox': 818, 'n_words': 369}