CSS使用沒有經過規範，Global CSS沒有依照style guide 建立

在大C的專案架構中有使用了 Local CSS的概念，讓大部分的UI畫面是由component 自己管理決定但牽涉到全局CSS 布局的Global CSS 並沒有精準的依照style guide 建立且在引用上也沒有明確規範使用情境，導致混用、引入外部css相當混亂

index.html

<link rel="stylesheet" href={clientConfig.params.staticPlatformUrl+"/css/reset.css?_="+renewTime} />
<link rel="stylesheet" href={clientConfig.params.staticPlatformUrl+"/css/ui/icon/icon.css?_="+renewTime} />
<link rel="stylesheet" href={clientConfig.params.staticPlatformUrl+"/css/ui/button.css?_="+renewTime} />
<link rel="stylesheet" href={clientConfig.params.staticPlatformUrl+"/css/ui/dropdown.css?_="+renewTime} />
<link rel="stylesheet" href={clientConfig.params.staticPlatformUrl+"/css/ui/transition.css?_="+renewTime} />
<link rel="stylesheet" href={clientConfig.params.staticPlatformUrl+"/css/ui/loader.css?_="+renewTime} />
<link rel="stylesheet" href={clientConfig.params.staticPlatformUrl+"/css/ui/dimmer.css?_="+renewTime} />
<link rel="stylesheet" href={clientConfig.params.staticPlatformUrl+"/css/ui/draft.css?_="+renewTime} />
<link rel="stylesheet" href={clientConfig.params.staticPlatformUrl+"/css/ui/cropper.css?_="+renewTime} />
<link rel="stylesheet" href={clientConfig.params.staticPlatformUrl+"/css/ui/componentcommon.css?_="+renewTime} />
<link rel="stylesheet" href={clientConfig.params.staticPlatformUrl+"/css/global.css?_="+renewTime} />
<link rel="stylesheet" href={clientConfig.params.staticWapUrl+"/css/draft.css?_="+renewTime} />
<link rel="stylesheet" href={clientConfig.params.staticWapUrl+"/css/global.css?_="+renewTime} />
<link rel="stylesheet" href={clientConfig.params.staticWapUrl+"/css/category_org.css?_="+renewTime} />
<link rel="stylesheet" href={clientConfig.params.staticPlatformUrl+"/build/c_platform/client.css?_="+renewTime} />

引入了大量外部套件的css code，這點跟local css的概念有衝突

global.css

.clearfix:after { 
    content: "\0020"; 
    display: block; 
    height: 0; 
    line-height: 0; 
    font-size: 0; 
    clear: both; 
    visibility: hidden; 
    overflow: hidden;
}
div::-webkit-scrollbar-track,
ul::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #eee;
}
div::-webkit-scrollbar,
ul::-webkit-scrollbar {
    width: 5px;
}
div::-webkit-scrollbar-thumb,
ul::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ccc;
}
.tabs {
    display: flex;
    border-bottom: 1px solid #d5d5d5;
}
.tabs li {
    padding-bottom: 10px;
    font-size: 16px;
  color: #8A8A8A;
    font-weight: bold;
    cursor: pointer;
}
.tabs li.active {
    border-bottom: 1px solid #ffa500;
    color: #000;
    font-weight: bold;
}
.tabs li:not(:first-child) {
    margin-left: 20px;
}
.hide {
    display: none !important;
}

.search_hightlight {
    color: red;
}
.wrap {
    transition: transform 400ms ease;
}

global css 變成單純拿來方便使用的工具，而沒有達成建立布局跟結構的功能所以在component 裡面也出現local css 跟 global css混用而沒有規範的情況這會導致接手的人其實很難查找css 錯誤的來源以及不確定修改css會改動的範疇是相當危險的寫法

Incubator-104-frontend / sherlock

CSS使用沒有經過規範，Global CSS沒有依照style guide 建立 #3