同様のスタイルを適用するためのCSSのベストプラクティス

Question

私はMVC 5アプリケーション用のCSSを実装しています。類似のコントロールにスタイルを適用する際のベストプラクティスはいくつかのプロパティで異なる場合がありますが、共通のものがある可能性があります。私のアプリケーションでは、いくつかの剣道グリッドを作成しています。幅は変わりますが、残りは同じです。

#grid { 
    margin-top:80px; 
    vertical-align:central; 
    overflow:hidden; 
    margin-left:auto; 
    margin-right:auto; 
    margin-bottom:0px; 

} 

#teamGrid { 
    margin-top:80px;  
    vertical-align:central; 
    overflow:hidden; 
    margin-left:auto; 
    margin-right:auto; 
    margin-bottom:0px; 
    width:900px; 
} 

UI

<div id="teamGrid"></div> 


<script> 

    $(document).ready(function() { 


     var teams = [ 
      { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 }, 
      { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 }, 
      { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 }, 
      { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 }, 
      { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 }, 
      { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 }, 
      { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 }, 
      { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 }, 
      { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 }, 
      { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 }, 
      { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 }, 
      { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 }, 
      { CountryCode: "GB", TeamName: "T1", TeamDescription: "Team1", IsActive: 1 } 
     ]; 

     var teamDataSource = new kendo.data.DataSource({ data: teams, pageSize: 20, sort: { field: "TeamName", dir: "asc" } }); 
     teamDataSource.read(); 

     $("#teamGrid").kendoGrid({ 
      dataSource: teamDataSource, 
      columns: [ 
       { field: "CountryCode", title: "Country Code", width:"50px" }, 
       { field: "TeamName", title: "Team Name", width: "50px" }, 
       { field: "TeamDescription", title: "Team Description", width: "70px" }, 
       { field: "IsActive", title: "Active", width: "50px" }, 
       { command: ["edit", "destroy"], width: "100px" } 
      ], 

      scrollabe:false, 
      pageable: true, 
      sortable:true, 
      //groupable: true, 
      filterable: true, 
      editable: (editable => editable.Mode(GridEditMode.Popup)) 

     }); 

    }); 

</script> 

Answer 1

使用クラスは、クラス.gridsに#gridと#teamGrid

.grids{ 
    margin-top:80px; 
    vertical-align:central; 
    overflow:hidden; 
    margin-left:auto; 
    margin-right:auto; 
    margin-bottom:0px; 
} 

#grid { 

} 

#teamGrid { 
    width:900px; 
} 

を設定する必要が
すべて .gridsに属性を設定します