Componentizing the Kibana UI, part 1: CSS that Scales | Elastic Blog
工程

实现 Kibana UI 组件化,第 1 部分:可扩展的 CSS

CSS

CSS !important Kibana Web CSS Kibana CSS

  • UI
  • CSS
  • BEM CSS

UI

fields

CSS CSS

CSS

Panel

Our Panel component

使 UI 使Panel

CSS Panel CSS

CSS

CSS CSS 使 JavaScript Python 使 Kibana CSS

使 CSS

UI UI

使 CSS font-sizecolor UI UI

Panel Panel

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

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

使 UI Panel 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 class Panel CSS

BEM

Yandex 2007 BEM BEM Harry Roberts CSS-Tricks

BEM CSS - JavaScript BEM

BEM

1