AdminLTE 主题：与同事的小分歧（软技能）

Question

我有一个关于在我们的系统中实施一个小改动的快速问题，我想听听你对我与我们公司另一位开发人员的小分歧的看法。

我们的工作环境：

Laravel
AdminLTE
'partner' 和 'staff' 两名 laravel 后卫。每种类型的用户 (partner/staff) 都可以访问一组不同的页面，使用一组不同的控制器和不同的子域。

Admin LTE 附带一些皮肤，您可以将其应用到您的 <body>，例如 'skin-blue' 主题。 This is what our page looks like. Just for a comparison, if you remove the 'skin-blue' class, our website looks like this.

我们的客户要求我们更改员工端顶部导航栏的颜色。所以，因为目前颜色是由 adminLTE 皮肤添加的，我认为最好为员工创建第二个主题，将其命名为 "skin-staff"，然后在我们的基础 blade 文件中，检查正在使用哪个守卫，并相应地添加 class。

<body class="@if(get_guard() === 'partner') skin-blue @else skin-staff @endif" ...>

我复制了原始 skin-blue 文件，将其重命名为 skin-staff，并更改了必要元素的颜色。我认为这是最好的解决方法，但是必须审查我的 github 合并请求的开发人员说，因为这是一个很小的更改，所以没有必要创建新皮肤。他提出的解决方案是简单地在 blade 文件中添加 css classes，例如：

<head>

…

<style type="text/css">
@if (get_guard() === 'staff')
   .skin-blue .main-header .navbar{
       background-color:#bdac3c
   } 
   .skin-blue .main-header .navbar .sidebar-toggle:hover{
        background-color:#ac9b2b
   }
   .skin-blue .main-header .logo{
         background-color:#bdac3c;
   }

   … // and other classes
@endif
</style>

现在，对我来说这是不正确的，因为我们混合了员工和合作伙伴方面的逻辑，而没有明确的方法来区分它们。如果我们使用皮肤，我们可以简单地说"The top navbar is yellow because we are using class skin-staff"。和 "We are using class skin-staff because we are on the Staff guard"。这些提议简单明了。但是，通过将原始 CSS 添加到我们的 blade 文件，我们最终得到类似 "The top navbar is yellow because we are using skin-blue and also we are on the Staff guard and also we have added some custom CSS for the Staff guard" 的内容。我们向系统引入的额外更改不遵循 adminLTE 使用的模式，对我来说它们只是噪音。例如，如果我们不得不再这样做五次，我们最终会在我们的基础 blade 文件中得到很多 CSS，我认为这看起来很糟糕并且会迫使我们最终决定使用adminLTE 的皮肤系统，我们可以马上做的事情。

但是，据我所知，我很固执，我不知道自己的想法是否正确，或者我是否只想按自己的方式做事.

大家怎么看？是创建一个新皮肤更好，即使皮肤文件中的大部分 CSS 代码将被复制，但它允许我们坚持现有的做事方式，还是只添加更好blade 文件中的代码而不考虑更多？

谢谢你的想法

Answer 1

这是一个非常基于意见的问题，这里没有明确的正确或错误答案。

我个人同意你同事的看法，为什么要复制整个主题，长达数百行，只是为了改变一小撮类？

也就是说，我个人不喜欢样式标签下 DOM 中的样式。

为什么不创建一个包含样式的新 CSS 文件：

.skin-blue .main-header .navbar{
    background-color:#bdac3c
} 
.skin-blue .main-header .navbar .sidebar-toggle:hover{
    background-color:#ac9b2b
}
.skin-blue .main-header .logo{
    background-color:#bdac3c;
}

… // and other classes

然后只要您在基本 skin-blue CSS 主题之后包含此文件，您更新的员工皮肤更改将优先。

像这样：

<link rel="stylesheet" href="{{ asset('css/skin-blue.css') }}">
@if (get_guard() === 'staff')
<link rel="stylesheet" href="{{ asset('css/skin-staff.css') }}">
@endif

这会将您的 CSS 的抽象保存在 CSS 文件中（并且在 DOM 之外），但只会覆盖它需要的内容。

这也意味着，如果您需要更新两个主题之间的通用样式，则无需在两个不同的文件中进行更改；你只需要修改 skin-blue.css 文件。

AdminLTE 主题：与同事的小分歧（软技能）

AdminLTE themes: small disagreement with coworker (soft skills)

laravel

laravel-5

conventions

adminlte