엔지니어링

Kibana UI의 컴포넌트화 1부 : 확장 가능한 CSS 코드

CSS

CSS . 8 . () !잠시 주목하십시오! ! , Kibana . ! !

? , SCC . Kibana team, CSS .

  • Kibana UI .
  • CSS .
  • BEM CSS .

UI

UI . , form , modal .

CSS CSS .

, CSS .

. .

Our Panel component

, . UI . , , "" .

, Kibana CSS , CSS .

CSS

. .

CSS , CSS JavaScript Python . Kibana CSS .

CSS .

UI . . . , UI .

. 2 . , , . Kibana , , , .

"()" . CSS " " "" , . . Kibana UI (: , ) UI .

. .

<div class="panel">
  <div class="panelHeader">
    <div class="panelHeader__title">
      Panel title
    </div>
  </div>

  <div class="panelBody">
    <!-- Content goes here -->
  </div>
</div>

UI . . Kibana UI .

CSS.

.panel {
  border-left: 2px solid #e4e4e4;
  border-right: 2px solid #e4e4e4;
  border-bottom: 2px solid #e4e4e4;
}

.panelHeader {
  display: flex;
  align-items: center;
  padding: 10px;
  height: 50px;
  background-color: #e4e4e4;
}

  /*
   * FYI, we indent child classes like this to emphasize its role
   * in the markup as a tightly-coupled child of the .panel class.
   */
  .panelHeader__title {
    font-size: 18px;
    line-height: 1.5;
  }

.panelBody {
  padding: 10px;
}

. CSS UI .

, .panelHeader__title . . CSS .

BEM

BEM 2007 Yandex . BEM , Harry Roberts CSS-Tricks .

BEM CSS . , . , , JavaScript . BEM .

BEM .

:

1. . !

Kibana . .