Css应用类似样式的最佳实践

我正在为我的MVC 5应用程序实现css。对于将样式应用于类似的控件时，最佳做法有何疑问，这些控件在几个属性中可能会有所不同，但可能有其他共同的控件。在我的应用程序中，我将创建几个kendo网格。宽度各不相同，但其余部分相同。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; 
}

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

来源

2017-03-03 Tom

我们e“类：而不是”id“。 –

您不能要求最佳做法或偏好，因为这些是个人决定，并且不会缩小问题范围。 – Ahmad

尝试指向一个答案的编码问题。 – Ahmad

使用类属性设置为所有.grids
你必须设置类.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; 
}

来源

2017-03-03 12:52:55 Roy

对不起，你的意思是创建class和id，并将它们都分配给网格。那是你在说什么？ – Tom

你可以给我一个例子，说明如何设置 – Tom

如果你有id的#grid和#teamGrid，向该div（在html中）添加一个类。该类必须是.grids，然后像我放入答案一样声明css类。或者只是把HTML代码，我告诉你在哪里。 – Roy

Css应用类似样式的最佳实践

回答

相关问题