Semantic：来自未来的CSS布局框架

CSS网格框架可以让你享受轻松的生活，但这依然无法掩盖它们的不足。让我们感到幸运的是，先进技术为我们引入了新的方法去布局网页。在我们前往了解先进技术前，我们必须首先了解当前影响CSS网格样式的三个看似不可克服的缺陷。

解读问题

问题1：它们不是语义架构

这是我从“纯化论者”口中听到过的最大的抱怨，自我在两年前创建1KB CSS Grid框架开始，CSS网格系统就规定标记和描述必须在一起。从grid_x的CSS类到HTML元素，表象信息与其他语义标记都是混合在一起，这些，都需要网页设计师自行添加。

浮动元素也必须同时清除，因为它常常会把不必要的元素添加到网页上。下图中的“clearing”DIV标签就是引用960.gs这套CSS框架：

问题2：它们是固定的

在固定宽度的布局下，CSS网格布局表现出色，在处理浮动元素的百分比时比较麻烦。然而，大多数的网格系统都提供浮动属性选项，这非常糟糕，当我们在网格中插入列时，网格样式常常因此而扭曲变形。在下面的1KB CSS Grid的例子中，“.grid_6”的宽度百分比被设置50%，而“.grid_3”则被设置为25%。

但是，当“.grid_3”出现在“.grid_6”单元格内时，这个定制的百分比就必须重新计算。虽然典型的网格系统只需要12条CSS规则就能指定所有列数的宽度，但一层的浮动网格就已需要144条规则(合理，但并不人性化)。

问题3：他们不会“响应”

响应交互的网页设计在今年甚为流行，虽然140 CSS Grid和Adapt.js等新工具能够让设计师根据屏幕尺寸或设备类型调整页面布局，但目前业内依然没有找到最优的布局方案。

错在工具

造成上面三大问题的直接“元凶”就是我们现有工具的局限性。或是通过给表现类添加标记，向我们的原则妥协；或坚守自我立场，完全放弃网格系统，这就是CSS留给我们的最后通牒。但是，我们并不能这样做，你说是吧？

确实是风云突变，虽然我们等待浏览器厂商为这个有缺陷的网格布局模块添加原生CSS语法支持，但我们期待的未来CSS技术现在已经降临了，通过LESS CSS框架，每个浏览器都可以支持所有CSS语法。

LESS给CSS带来了强劲的新功能

LESS是什么？

你或许听说过LESS框架，但却可能从未真正接触并使用过。它跟其他工具(如SASS 和CleverCSS)不同，LESS完全是为重塑CSS语法而生的。与其说是在造物，我们更愿意说LESS是CSS的集大成者。LESS的CSS让你可以在CSS里使用变量、执行运算操作，甚至是可重用的Mixins语法。下面就是LESS的一些样例。

变量

一旦定义了某个值，你就可以在样式表中定义变量来重用这个值。

上面的例子，编译后显示如下：

运算

在CSS里对颜色或者其他数值进行加减乘除

在这个例子里，1px乘以3的等同结果如下：

Mixins语法

Mixins语法是最强大的一个功能点，它可以让整段CSS语句被重用。使用简单，你只需在另一个类中引用一个mixin的类名，更让人惊喜的是，LESS还能让你向mixin语句中传入参数。

繁琐，浏览器新标准专属的CSS3语法充分证明mixins给我们带来的优势：

LESS的不足

刚接触LESS时，我对它也是抱有许多不信任的想法，但现在，我已经是它的忠实支持者。LESS样式简洁易读，而且支持代码重用。然而，LESS也存在一些需要注意的不足：

1. 必须被编译。为保证CSS代码不出任何差错，这是额外的一步。

2. 依赖LESS 文档和结构，已编译的CSS文件的体积可能比传统的CSS文件偏大。

编译LESS注释

若要编译LESS样式到CSS内，有三种实现方法。

• 让浏览器负责执行编译工作
  正如它的命名，LESS.js 就是用JavaScript编写的，所以它可以在用户的浏览器直接编译成CSS代码。虽然这个方法让开发者很便利，但在作出决定前，我们不妨继续了解接下来的另外两种方法，这会比较恰当，因为在浏览器编译代码需要耗用一定的加载时间。

• 在服务器端预编译代码
  我们可以使用Node.js在服务端预编译LESS.js，并且这已经移植到好几种服务端语言中。

• 使用桌面应用编译
  LESS.app是一款Mac系统应用，它可以编译保存在你电脑中的本地文件。

介绍“The Semantic Grid System”布局框架

LESS框架对CSS语法的改革为更强大的网页布局方法的到来打下了坚实基础。而这个强大方法就是The Semantic Grid System框架。它就是CSS网格布局的新星。

1. 具备语义特征；

2. 布局方式，既可固定，也可浮动；

3. 可响应的；

4. 允许实时直接在样式表中修改列宽和列间距。

The Semantic Grid System使用 LESS的CSS方法提供一种新的页面布局方式.

配置网格样式

听起来不像是真的？我们来了解它是怎么运作的吧！

首先，导入“Semantic”网格框架到你的LESS样式表中。

接下来，为列、列宽、列间距定义变量，并为它们设置一个初始值。这个初始值，最终将变成960像素宽。

网格已经配置好后，我们在页面布局时就可以使用了。

使用网格样式

现在，网格已经配置好了，假设，HTML页面上有两个标签元素(如下)，而你希望它们是并排布局的。

要实现并排布局，我们只需向.column()的Mixin语句中传入“列数”即可。

上面的LESS编译后的代码样式如下：

点击这里查看最终效果。这种方法的最大不同点在于它没有在标记中使用丑陋的.grid_x 类。取而代之，列宽直接在样式表中被设置好，完全将陈述标记和表现样式表独立开来。这也是它被称为semantic 的一大原因。

那么，这套框架的幕后秘密是什么呢？

为了满足你的好奇心，下面就是一些关键的mixins代码。幸运的是，这些函数都是隐藏在 grid.less文件里，所以无需，也永远不必进行编辑。

浮动布局的实现

上面的例子展示了Semantic框架的固定布局功能，而百分比的浮动布局方式也同样很简单。为了从像素跳转到百分比，我们需要在原来的代码中增加一个变量：

无需更多操作，编译后的CSS代码如下：

响应布局的实现

没有一套先进的网格布局框架是完整的，除非我们能根据用户屏幕或者其他设备的大小调整页面布局。现在通过Semantic.gs，我们可以先查询设备信息并设置极值，点击查看效果图：

亲自尝试

就在几天前，Twitter推出了一个名为“Bootstrap”的项目，这个项目提供类似于Semantic的网格布局框架，这套框架也是使用LESS变量和Mixins构建。未来的CSS布局似乎越来越清晰了。

The Semantic Grid System给我们带来了最好的：强大且便利的CSS网格布局，以及将标记和表现分离的新想法。你也来下载“Semantic”吧，分享你的“Semantic”到GitHub，让我们知道你的想法！

Via：smashingmagazine