Модификаторы с условием именования БЭМ - PullRequest
Новая
       68

Модификаторы с условием именования БЭМ

0 голосов
/ 04 марта 2020

Мне нравится использовать соглашение по именованию БЭМ в некоторых моих проектах, и сейчас я работаю над системой проектирования и остановился на своих модификаторах.

Я создал все версии Input, которые мы используем в нашем приложении , и у меня есть этот случай:

Я изменяю этот ввод несколько раз: - недопустимо , - отключено , - имеет -status и у меня есть проблема со статусом has-status. У меня есть больше цветов для этого статуса, и я не уверен, как с этим справиться.

Я бы предпочел, чтобы мой модификатор для статуса был похож на .Input - has-status-load, .Input - has-status и др. c. Но проблема в том, что я не хочу повторять объявление этого модификатора X раз для каждого статуса. Вот почему я добавил классы только для цветов (.success и .warning), но это немного взломало мою систему именования БЭМ, которую я не хочу демоли sh.

У вас есть идеи? Или у вас есть какие-либо примечания к этому коду?

Спасибо, что поделились своими знаниями!

CodePen DEMO 

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Source Sans Pro', sans-serif;
}

::placeholder {
  color: #ccc;
  opacity: 1;
  /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #ccc;
}

::-ms-input-placeholder {
  color: #ccc;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
}

.row {
  margin: 1em;
}

h2 {
  margin-top: 2em;
}


/* ============================================================================
   05 - COMPONENTS - Input.scss
   ========================================================================= */


/* Component structure: 
  .Input {}
  .Input__container {}
  .Input__fake-input {}
  .Input__field {}
  .Input__prefix {}
  .Input__suffix {}
  .Input__icon {}
  .Input--has-status {}
  .Input--is-invalid {}
  .Input--is-disabled {}
 */

// Component local variables
$input-border-color: #D8DADC;
$input-text-gray: #979797;
$input-text-color: #457CCC;
$input-border-radius: 8px;
$input-font-size: 16px;
// Base structure
.Input {
  position: relative;
}

// Input container for all elements
.Input__container {
  display: flex;
  position: relative;
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  height: 40px;
  font-size: $input-font-size;
}

// Input fake input, who replaces real input
.Input__fake-input {
  width: 100%;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  height: 40px;
  font-size: $input-font-size;
  border-radius: $input-border-radius;
  transition: all 0.15s ease-in-out 0s;
  border-width: 1px;
  border-style: solid;
  border-color: $input-border-color;
  border-image: none;
}

// Input text field for add text
.Input__field {
  border: 0;
  -webkit-appearance: none;
  color: $input-text-color;
  font-size: inherit;
  background-color: transparent;
  width: 100%;
  height: 100%;
  z-index: 2;
  padding: 0px 12px;
  flex: 1 1 20%;
  border-radius: $input-border-radius;
  &:focus {
    outline: none;
    &~.Input__fake-input {
      outline: none;
      border: 1px solid #0284FF;
    }
  }
}

// Input type PREFIX
.Input__prefix {
  height: 100%;
  color: $input-text-gray;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  pointer-events: none;
  -webkit-box-pack: center;
  justify-content: center;
  z-index: 3;
  padding: 0px 0px 0px 10px;
}

// Input type SUFFIX
.Input__suffix {
  height: 100%;
  color: $input-text-gray;
  display: flex;
  flex-shrink: 0;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  z-index: 3;
  padding: 0px 10px 0px 0;
}

// Input type ICON
.Input__icon {
  height: calc(100% - 2px);
  color: $input-text-gray;
  display: flex;
  flex-shrink: 0;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  z-index: 3;
  padding: 0px 10px;
  position: relative;
  width: 48px;
  border-left: 1px solid $input-border-color;
  cursor: pointer;
  & img,
  svg {
    width: 25px;
  }
}

// Modificator --has-status
.Input--has-status {
  position: relative;
}

.Input--has-status::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 3;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #1A73E8;
}

// --has-status types
.Input--has-status.success::after {
  background: #37C9AD;
}

.Input--has-status.warning::after {
  background: #FFB000;
}

// Modificator --is-invalid
.Input--is-invalid {
  & .Input__fake-input {
    border: 1px solid #FF0054;
  }
  & .Input__field {
    color: #FF0054;
    &:focus~.Input__fake-input {
      border-color: #FF0054;
    }
  }
}

// Modificator --is-disabled
.Input--is-disabled {
  & .Input__fake-input {
    background-color: #E8EAEC;
    border-color: #E8EAEC;
    color: #868C92;
    ursor: not-allowed;
    border: 1px solid #E8EAEC;
  }
  & .Input__field {
    color: #868C92;
    cursor: not-allowed;
  }
}
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900&display=swap" rel="stylesheet">

<div class="container">
  <form>
    <div class="row">
<h1> Types</h1>
      <h2>Input - default</h2>
      <div class="Input">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder">
          <div class="Input__fake-input"></div>
        </div>
      </div>

      <h2>Input - prefix</h2>
      <div class="Input">
        <div class="Input__container">
          <div class="Input__prefix">
            <span class="Prefix">Prefix</span>
          </div>
          <input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum dolor">
          <div class="Input__fake-input"></div>
        </div>
      </div>

      <h2>Input - suffix</h2>
      <div class="Input">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum dolor">
          <div class="Input__suffix">
            Suffix
          </div>
          <div class="Input__fake-input"></div>
        </div>
      </div>

     
      <h2>Input - icon</h2>
      <div class="Input">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder">
            <div class="Input__icon">
              <img src="https://image.flaticon.com/icons/svg/331/331383.svg">
            </div>
          <div class="Input__fake-input"></div>
        </div>
      </div>

      <br><br>
      <h1>Modificators</h1>
      <h2>Input - Load Success</h2>
      <div class="Input Input--has-status success">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder">
          <div class="Input__fake-input"></div>
        </div>
      </div>

      <h2>Input - Load Warning</h2>
      <div class="Input Input--has-status warning">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder">
          <div class="Input__fake-input"></div>
        </div>
      </div>


      <h2>Input - Invalid</h2>
      <div class="Input Input--is-invalid">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum dolor">
          <div class="Input__fake-input"></div>
        </div>
      </div>

      <h2>Input - Disabled</h2>
      <div class="Input Input--is-disabled">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum" disabled>
                      <div class="Input__icon">
              <img src="https://image.flaticon.com/icons/svg/331/331383.svg">
            </div>
          <div class="Input__fake-input"></div>
        </div>
      </div>
    </div>
  </form>
</div>
...