关于类型模式和样式指南

在过去的六年中，我利用了网页设计中所谓的“类型模式”，取得了积极的结果。本文探讨了这些模式，它们在CSS中的实现以及它们如何简化您的版式工作流程。

将其视为桌面出版软件中的“段落样式”的html/css等同于Quarkxpress，Indesign或Coreldraw。在书籍设计中，您可能需要动态地调整整本书的标题版本。这需要对印刷模式的中央控制。

尽管它们的接口各不相同，但大多数设计软件都提供此功能。通常存在“基础”段落样式，从中得出其他段落。段落样式管理块级元素，而字符样式处理内联元素（粗体，独特的跨度）。

核心原理保持一致：键：值对，镜像CSS属性：值对。

 H1 {
  字体家庭：“ Helvetica Neue”，sans-serif；
  字体大小：20px;
  字体重量：大胆；
  颜色：紫红色；
}

定义后，将样式应用于文本。 “”符号通常表示样式修改。重新定义样式应用于项目范围内更改。

尽管这类似于CSS课程，但网站设计呈现出复杂性。屏幕尺寸差异很大，要求相应适应的上下文感知样式。

基本的印刷控制

早期发展通常引入语义HTML：

<h1 id="标题">标题1</h1>
<p>段落文字。</p>
<h2 id="标题">标题2</h2>
<p>更多段落文字。</p>

与针对这些元素的CSS配对：

 H1 {
  字体大小：50px;
  颜色：＃ff0066;
}

H2 {
  字体大小：32px;
  颜色：RGBA（0,0,0，.8）;
}

p {
  字体大小：16px;
  颜色：DeepskyBlue；
  线高：1.5;
}

这起作用，建立了视觉层次结构。用户代理样式提供默认样式，即使没有CSS，也可以确保基本的层次结构。

大型项目的复杂性

随着网站的增长，复杂性的提高。最初，独特的类可能就足够了，但这变得不可持续。特殊案例课程出现：

<h1 id="主要标题">主要标题</h1>
<p>段落<em>重点</em>。</p>
<p>常规段落。</p>

然后，课程扩散：

<h1 id="主要标题">主要标题</h1>
<main><h2 id="副标题">副标题</h2>
<p>段落文字</p></main>

新开发人员可能会在默认字体大小和边距上遇到困难，从而导致诸如margin-top: -20px之类的黑客。这通常是由于用户代理样式不了解，这通常会与CSS级联反应。

真实的情况

想象一下，收到具有多种颜色，布局和印刷样式的Phothop Photoshop文档。确定跨众多页面的可重复使用样式需要大量的努力。小屏幕的考虑通常被忽略，不同屏幕尺寸的模式不一致，这使事情变得更加复杂。风格指南可能存在，但缺乏前端开发所需的特殊性。

即使是详细的样式指南也可能与设计文档不匹配，从而导致混乱。在您职业生涯的早期，您可能有义务破译所有内容，将像素价值转换为CSS。但是，这导致了重复的规则：

 .blog文章p { / * ...样式... * /}
。
/ * ...更多重复的样式... */

您可能会尝试在body选择器中合并样式，但这可能会变得过于广泛。

设计修订

设计更改需要更新许多CSS规则，从而导致冲突和进一步的复杂性。该解决方案通常涉及创建类并将其应用于元素，将布局和键入模式分开：

 .Standard-Text { / * ...样式... * /}
.heading-1 { / * ...样式... * /}
.Medium-头{ / * ...样式... * /}

这可以提高可维护性并允许插入式样式，但不能解决不可能修改HTML的情况（例如，CMS）。

与CMS合作

在处理CMS时，您缺乏直接的HTML控制。诸如SASS这样的预处理器中的Mixins提供了解决方案：

 @mixin standard-type（）{ / * ...样式... * /}
.context .thing {@include standard-type（）; }

但是，仅将混合蛋白与标题水平相关联可能是限制的。取而代之的是，考虑通过“声音”（例如， calm-voice ， loud-voice ， attention-voice ）来组织样式，反映了内容的所需音调。

 @mixin calm-voice（）{ / * ...样式... * /}
@mixin loud-voice（）{ / * ...样式... * /}
@mixin coative-voice（）{ / * ...样式... * /}

这种方法增强了意义并促进跨学科的交流。在article中应用这些混合素：

文章 {
  h1 {@include loud-voice（）; }
  h2 {@include activation-voice（）; }
  p {@include calm-voice（）; }
}

这需要处理各种内容结构和潜在的不一致。可能需要其他CSS规则来管理间距和其他元素。

另一位预处理器手写笔提供了简洁的语法，但目前缺乏强大的工具。

类型模式：解决方案

无论是通过Mixins还是类实现的类型模式，都提供了一个插件系统，以构成一致的样式。它们可以与公用事业类结合。现场风格指南，结合类型的模式，促进团队协作并减少像素编组。这种方法有益于各种规模的项目。

可以使用clamp()和vmin单元来管理可变字体尺寸，以进行响应设计。尽管这种方法会产生更多的CSS，但优先考虑可维护性和团队协作至关重要。

超越CSS：协作

类型模式促进了设计师与开发人员之间的协作。视觉设计师可以专注于美学，而开发人员管理结构和布局。现场风格指南是真理的单一来源，简化了设计过程。这种方法减少了对广泛的像素完美的模型的需求，从而可以进行更多的迭代设计探索。 Indesign和Illustrator的段落和性格风格提供了灵感，但缺乏响应能力。全面的样式指南可能包括填充率，颜色和线条宽度，从而促进设计一致性。最终详细信息是在真实设备上协同完善的。

以上是关于类型模式和样式指南的详细内容。更多信息请关注PHP中文网其他相关文章！