Sharepoint CSS 开发策略

Question

我在一家采用 Sharepoint 的大公司工作。我的任务是使用 CSS 对网站/子网站进行定制和品牌化。我对 sharepoint 的经验很少。

开发周期如下：
1. 可用性要求和设计交付给 sharepoint 开发人员。
2. sharepoint 开发者提出了 HTML
3. 我必须设置该 html 以及共享点生成的 HTML 的样式。
4. 进行测试

这让我发疯——这个循环背后的主要原因是“sharepoint 开发人员”不了解 CSS。开发环境本身就是疯狂的。 css 开发不是集中的，它是基于虚拟机的......所以，我必须逐个开发人员，登录到他们的虚拟机来处理他们的代码。

TI 逐行使用一些自定义代码和一些开箱即用的代码来对其进行样式设置。我正在开发的网站需要大量的定制——这就是我的账单，所以我只是努力工作——但我在这个过程中快要疯了。

你们能分享一下你们是如何进行共享点定制的吗？ sharepoint CSS 使用了什么样的开发方法和流程。您认为开发人员应该进行 CSS 定制吗？为什么？

没有答案是没有用的，所以请分享。谢谢。

Answer 1

事情就是这样……我从未见过典型的开发人员擅长 CSS 工作。 （是的，也有例外，但我从未见过任何一个非常擅长从 PhotoShop 文件制作 CSS 的人，同时也是一名开发人员。我很高兴将这份工作让给更擅长的人。）

我的设计师与 SharePoint Designer 合作，有权访问 _layouts 文件夹以放入工件。我确保这些工件最终出现在我的可部署 Visual Studio 解决方案中。他在 SPD 中所做的任何事情都是手动复制的，只是保留在原处或由我放入功能中。

这确实意味着我们有很多虚拟服务器，每个项目/客户都有一个。我从未见过这是一个问题，因为如果您开始跨项目共享服务器，这比必须处理所有其他项目的垃圾要好。此外，这些计算机可在网络上使用，并可使用 SPD 和文件共享轻松访问。设计师从不使用远程桌面。

关键是我促进设计师的工作，使其尽可能简单。您的开发人员也应该这样做！
他们应该：

• 尽可能为自定义代码使用开箱即用的共享点样式（如果他们使他们的产品看起来合理，您将更容易完成它们）
• 向您询问完全自定义代码和内容的 html 模板。网络部件。这样你就可以给他们你已经设计好的html，放入正确的结构并添加适当的css。当他们交付时，你会得到一些很容易完成的东西。

Answer 2

有两种方法可以进行共享点品牌化（样式化）。

• 以开发人员为中心

• 以用户为中心

• 以开发人员为中心意味着除了设计人员/开发人员之外没有人通过 SharePoint Designer (SPD) 等工具接触 CSS。任何更改都是通过部署解决方案等进行的。

• 以用户为中心意味着您只需通过 SPD 或 UI 添加文件。

我猜你使用第二个，而我总是使用第一个，因为这样可以控制品牌（样式）并且更改是集中/可部署的。我创建了一个完整的 xhtml strict 1.1 母版页（但是当实际使用时，垃圾 SharePoint 输出当然否定了这一点:-D），我在所有项目中使用它，并且基线 css 是预先定义的并且非常通用它几乎可以适应任何布局形式。任何功能特定的样式都放在单独的文件中并添加到母版页中。

要回答您的实际问题：恕我直言，对于 sharepoint 开发人员来说，深入了解 css 并不是必需的，当 css 实现为 CSS 中的 C 所暗示的那样（即级联）时，开发人员甚至不需要将 css 添加到他们的控件/Web 部件中，他们需要将其中的所有内容放入周围的容器（div 或 span 等）中，该容器获得一个类。控件内部使用的任何类（例如使用交替行类的表）都应该与该容器类相关，并且也应该有一个默认实现。

这看起来像：

/* default alternating row class */
.row-alternating
{
  background-color:red;
}

在一个单独的文件中，当设计需要时定义此类的覆盖。开发人员只需要知道用于交替行的类称为 .row-alternating

/* a developer adds a new control and wants the style to differ */
.newcontrol-container .row-alternating
{
  background-color:blue;
}

该控件将看起来像PS。

<div class="newcontrol-container">
  <table>
    <tr>
      <td>bla</td>
    </tr>
    <tr class="row-alternating">
      <td>bla</td>
    </tr>
  </table>
</div>

如果您希望我的主页 + css 留下评论，