应用相似样式的 CSS 最佳实践答案

【问题标题】：Css best practice for applying similar styling应用相似样式的 CSS 最佳实践
【发布时间】：2017-07-23 13:18:46
【问题描述】：

我正在为我的 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;
}

用户界面

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

【问题讨论】：

使用“class:”而不是“id”。
您不能要求最佳做法或偏好，因为这些是个人决定，不会缩小问题范围。
尝试指出一个编码问题以获得答案。

标签： css asp.net-mvc-5 kendo-grid

【解决方案1】：

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

【讨论】：

抱歉，您的意思是创建类和 id 并将它们都分配给网格。你说的是这个吗？
你能给我举个例子说明如何设置
在你有 id 的#grid 和#teamGrid 的地方，向该 div 添加一个类（在 html 中）。该类必须是.grids，然后像我在答案中那样声明css类。或者只是把html代码，我告诉你在哪里。
用 UI 更新帖子
那只是一个剑道网格……你说的是几个剑道网格。但是，您需要像
那样创建 div