Componentizing the Kibana UI, part 1: CSS that Scales | Elastic Blog
エンジニアリング

Kibana UIのコンポーネント化、パート1: スケーラブルなCSS

CSS

CSS8() !important ! KibanaWeb

CSS KibanaCSS

  • UI
  • 使CSS
  • BEM使CSS

UI

CSSCSS

CSS

1Panel

Our Panel component

UIPanel

CSS PanelCSS

CSS

CSSCSSJavaScriptPythonKibanaCSS

使CSS

使UI UI

1 1

使 CSSfont-sizecolorUI()使UI

PanelPanel

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

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

UI使PanelKibanaUI

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;
}

1CSSUI

.panelHeader__title PanelCSS

BEM

BEM2007YandexBEM Harry RobertsCSS

KibanaBEMCSSJavaScriptBEM使

BEM

:

1!

Kibana