<commit_before>extends ../layout.jade

block title
  title BEM — Block Element Modifier

block head
  link(rel="stylesheet" href="index.css")

block scripts
  script(src="index.js")

block content
  +header
    | Block Element Modifier is methodology, that helps you achieve reusable components and code sharing in the front-end
  .grid.grid_fixed_true
    .grid__row
      .grid__cell-sm.grid__cell-sm_size_4
        +advantage('Easy')
          | To use BEM you literally do not need nothing besides BEM naming.
      .grid__cell-sm.grid__cell-sm_size_4
        +advantage('Modular')
          | Independent blocks and css selectors plus layer system makes your code reusable and modular.
      .grid__cell-sm.grid__cell-sm_size_4
        +advantage('Flexible')
          | Methodology and tools, that can be recomposed and configured in the way you like BEM.
  .separator
  .grid
    .grid__row
      .grid__cell-xs_size_12
        :markdown
          # Why you should use BEM

          There are plenty of [methodologies](https://github.com/ikkou/awesome-css#architecture) out there which aimed on reducing CSS codebase and organizing programmers cooperation and maintaining of CSS code. This is obvious in large projects like Twitter, Facebook and [Github](http://markdotto.com/2014/07/23/githubs-css/#two-bundles), but other projects often grows into same "Huge CSS file" state pretty quickly.

          Here are [some reasons](http://www.youtube.com/watch?v=GhX8iPcDSsI#t=2729), that can convince you to use BEM or other methodology in your front-end:

           * __Performance__ — smaller number of CSS selectors (because of reusing Blocks) causing better performance and experience of site.
           * __Productivity__ — clear and structured CSS is easier to maintain and develop.

          Feel free to contact us at [![Gitter chat](http://img.shields.io/badge/gitter-bem--talk-brightgreen.svg?style=flat)](https://gitter.im/bem/talk) if you have more questions about BEM methodology.
  .separator
  .grid
    .grid__row
      .grid__cell-xs_size_12
        :markdown
          # Getting started

          We working on step-by-step guide, that will help you understand:

           * [BEM naming](/naming.html)
           * [Folder structure](/structure.html)
           * [Build process](/building.html)

          After reading those — you can read articles, that listed in [awesome-bem](https://github.com/floatdrop/awesome-bem) repository.

          We will be very happy to hear you suggestion about this introduction. Also we accepting requests at [gihub repository](http://github.com/floatdrop/getbem.com) of this site.

          Also we [writing list of projects](https://github.com/floatdrop/getbem.com/issues/1), who uses BEM methodology
  .separator
  a#companies
  .companies
    +edit('https://github.com/floatdrop/getbem.com/edit/master/pages/index/index.jade')
<commit_msg>A little bit of English<commit_after>extends ../layout.jade

block title
  title BEM — Block Element Modifier

block head
  link(rel="stylesheet" href="index.css")

block scripts
  script(src="index.js")

block content
  +header
    | Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end
  .grid.grid_fixed_true
    .grid__row
      .grid__cell-sm.grid__cell-sm_size_4
        +advantage('Easy')
          | To use BEM you literally do not need nothing besides BEM naming.
      .grid__cell-sm.grid__cell-sm_size_4
        +advantage('Modular')
          | Independent blocks and css selectors plus layer system makes your code reusable and modular.
      .grid__cell-sm.grid__cell-sm_size_4
        +advantage('Flexible')
          | Methodology and tools, that can be recomposed and configured in the way you like BEM.
  .separator
  .grid
    .grid__row
      .grid__cell-xs_size_12
        :markdown
          # Why you should use BEM

          There are plenty of [methodologies](https://github.com/ikkou/awesome-css#architecture) out there which aimed on reducing CSS codebase and organizing programmers cooperation and maintaining of CSS code. This is obvious in large projects like Twitter, Facebook and [Github](http://markdotto.com/2014/07/23/githubs-css/#two-bundles), but other projects often grows into same "Huge CSS file" state pretty quickly.

          Here are [some reasons](http://www.youtube.com/watch?v=GhX8iPcDSsI#t=2729), that can convince you to use BEM or other methodology in your front-end:

           * __Performance__ — smaller number of CSS selectors (because of reusing Blocks) causing better performance and experience of site.
           * __Productivity__ — clear and structured CSS is easier to maintain and develop.

          Feel free to contact us at [![Gitter chat](http://img.shields.io/badge/gitter-bem--talk-brightgreen.svg?style=flat)](https://gitter.im/bem/talk) if you have more questions about BEM methodology.
  .separator
  .grid
    .grid__row
      .grid__cell-xs_size_12
        :markdown
          # Getting started

          We working on step-by-step guide, that will help you understand:

           * [BEM naming](/naming.html)
           * [Folder structure](/structure.html)
           * [Build process](/building.html)

          After reading those — you can read articles, that listed in [awesome-bem](https://github.com/floatdrop/awesome-bem) repository.

          We will be very happy to hear you suggestion about this introduction. Also we accepting requests at [gihub repository](http://github.com/floatdrop/getbem.com) of this site.

          Also we [writing list of projects](https://github.com/floatdrop/getbem.com/issues/1), who uses BEM methodology
  .separator
  a#companies
  .companies
    +edit('https://github.com/floatdrop/getbem.com/edit/master/pages/index/index.jade')

{'fraction_non_alphanumeric': 0.08743356763243613, 'fraction_numerical': 0.007200411452082976, 'mean_word_length': 3.0655052264808362, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 10, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3705599', 'n_tokens_mistral': 1731, 'n_tokens_neox': 1644, 'n_words': 560}