小编Kus*_*our的帖子

我在编写CSS时已经开始使用BEM方法,并且很少有我努力找到做特定事情的最佳方法.

我想在这里举一个简单的小组例子.

让我们说我正在使用BEM风格编写面板组件CSS.所以我的CSS可能如下所示:

.panel {}

.panel__titlebar {}

.panel__content { display: none; }

面板可以是无铬的或带铬的.所以我为面板定义了另一个修饰符类:

.panel--with-chrome {
 border: 4px solid black;
 border-radius: 4px;
}

现在假设,面板可以处于全屏/最大化状态,铬和标题栏也会消失.不是为面板和标题栏定义修改器,而是在父级(例如面板 - 全屏)上定义修改器是明智的,并且其余元素应相应地改变.所以现在我的CSS成了:

.panel--fullscreen {
 /* something has to be done here */
}

.panel--fullscreen .panel__titlebar { display: none; }

要在全屏模式下删除镶边,我可以:

1. 切换面板 - JS中的chrome类以及面板 - 全屏类

2. 覆盖面板内的chrome CSS - 全屏类.

首先是不好的,因为理想情况下我只想在JS中切换一个类(.panel - 全屏)来切换全屏模式.

第二个是糟糕的,因为我将不得不覆盖以前的CSS,这是一个不好的做法.

那么最好的方法是什么呢？感谢您的评论.

谢谢

我正在拦截并从 Service Worker 缓存中返回一个资源。根据 Google Chrome devtools 下载内容大约需要 300-400 毫秒。我检查了 Firefox，下载是即时​​的。

由于不涉及网络，我预计下载时间会小得多。我用通常的match函数拦截了 fetch ：

event.respondWith(
        caches.match(event.request).then(response => response)
);

我在拦截和从缓存中返回资源的方式上有什么问题吗？

我正在尝试创建一个组件，其任务是简单地在任何元素上添加一个类，当它只有一个节点时作为插槽传递给它

用法：

<my-component>
 <button>hello</button>
</my-component>

输出：

<button class="added-by-component">hello</button>

我尝试使用<template>标签，但<slot>不允许在根上。

即使使用render()函数，我也尝试在修改class属性后返回传递的插槽的 vnode ：

render (createElement) {
 var vnode = this.$slots.default[0]
 vnode.data = vnode.data || {}
 vnode.data.class = { 'added-by-component': this.someCondition }
 return vnode
}

即使这也不能按预期工作。即使条件为真，我也不会添加课程。

firestore.FieldValue.serverTimestamp使用Date.now()（从中央服务器）之间是否有任何性能或功能差异？