AdminLTE主题:与同事略有不同(软技能)

对于在我们的系统中实施一个小的更改,我有一个快速的问题,我想听听您对我与公司另一位开发人员的不同意见的看法。

我们的工作环境:

  • Laravel
  • AdminLTE
  • 两个laravel守卫“伙伴”和“工作人员”。每种类型的用户(合作伙伴/员工)都可以使用不同的控制器集和不同的子域来访问不同的页面集。

Admin LTE随附一些皮肤,您可以将其应用于<body>,例如“皮肤蓝色”主题。 This is what our page looks like.仅作比较,如果您删除“皮肤蓝色”类,our website looks like this

客户要求我们更改“员工”端顶部导航栏的颜色。因此,因为当前颜色是由adminLTE皮肤添加的,所以我认为最好为员工端创建第二个主题,将其称为“皮肤员工”,然后在我们的基本刀片文件中检查哪个使用防护,并相应地添加类。

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

我制作了原始的皮肤蓝色文件的副本,将其重命名为skin-staff,并只是更改了必要元素的颜色。我认为这是解决问题的最佳方法,但是不得不审查我的github Pull Request的开发人员说,由于这是一个很小的更改,因此不必创建新皮肤。他提出的解决方案是简单地在刀片文件中添加css类,例如:

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

现在,对我而言,这是不正确的,因为我们在混合员工和合作伙伴方面的逻辑时没有明确的区分方式。如果使用皮肤,我们可以简单地说“顶部导航栏是黄色的因为,因为我们使用的是皮肤工作人员”。并且“我们使用班级职员,因为我们在职守卫”。这些主张是明确而简单的。但是,通过将原始CSS添加到刀片文件中,我们最终得到的结果是“顶部导航栏为黄色,因为,我们正在使用皮肤蓝色的,并且员工警卫,并且我们还为员工警卫添加了一些自定义CSS”。我们对系统进行的额外更改并未遵循adminLTE所使用的模式,对我而言,它们就像是噪音。例如,如果我们不得不再执行五次,则最终在基本刀片文件中会有很多CSS,我认为这看起来很糟糕,并迫使我们最终决定使用adminLTE的皮肤系统,可以马上做。

但是,就我所知,我固执己见,不知道自己是否有正确的主意,还是只是想以自己的方式做事。

你们怎么看?即使皮肤文件中的大多数CSS代码都将被复制,还是创建一个新的皮肤还是更好,但这使我们能够坚持现有的工作方式,还是仅在刀片中添加代码更好?文件,不要再考虑了吗?

感谢您的想法

wangxd624565586 回答:AdminLTE主题:与同事略有不同(软技能)

这很大程度上是一个基于观点的问题,这里没有明确的对与错答案。

我个人同意您的同事,为什么要复制整个主题,即数百行,只是为了更改少数几个类?

也就是说,我个人不喜欢样式标签下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文件即可。

本文链接:https://www.f2er.com/2530986.html

大家都在问