【译】HTML和CSS：在2016年和设计师们仍然是息息相关
【译】HTML和CSS：在2016年和设计师们仍然是息息相关
如果你是一个试图保持现状的设计师，学习一种新的现在非常“火”的网络编程语言（就像React、Angular等等）你可能会感觉到一些压力。不仅因为这些语言越来越受欢迎，而且因为这些设计工作的门槛似乎也变得越来越高。
许多公司都在为那些可以做UI和UX设计、写代码的“全栈”设计师做广告。你也可能读过一些关于为什么设计师需要学习代码文章。
但是在你付出你的时间和金钱去学习React或者一些其他关于JavaScript的进化之类的课程之前，继续看下去。因为以我的经验来看，即使你只会HTML(超文本标记语言)和CSS(层叠样式表)仍然可以让你作为一个设计师在2016年走的更远，并且它可以给你所有跨过设计师新门槛所需要的资格。
以下就是我这样说的5个原因：
1、HTML和CSS是设计工具
嘘…不要告诉任何人， HTML和CSS并不是真正的编程语言。他们不用编译，如果你的HTML和CSS中有错误，浏览器只会跳过它，或者尽可能的找到一个和你想法相近的解释吗，其中也并没有if-then的句式。所以这导致你也不能用HTML和CSS把一颗卫星送入轨道。
HTML和CSS是塑造内容样式和结构的规则，就是这样！
而且，它们并不难（除了在CSS里需要垂直居中-是的，这是CSS的一个笑话） 。它们真的非常酷。
"HTML 并不是一种编程语言; 它是一种标记语言"
把这句话送给所有自称 "我是一个程序员，我了解 HTML" 的家伙…
— Bartłomiej Łazarski (@YoggyShoggoth) 11月27, 2015年
此外，HTML5和CSS3也在以前版本的基础上有了重大提升。特别是HTML5规范，为给网页添加有意义的结构、消除随处存在的丑陋的
最后，学会HTML和CSS会让你的开发人员感谢你，毕竟大多数开发人员需要某样东西并不会真的想去深入的学习它（尤其是CSS）。
一位雇主最近在审查了许多前端开发求职者的申请书后写道：“几乎没人能够展示出渊博的标记编程的能力。”
他继续道：
很多人无法选择正确的HTML元素来解释为什么要清除浮动和如何能清除浮动, 或者说ARIA 是用来干什么的。但是他们可以使用React和Angular. 如果你在接下来的几周内有一些空闲时间，你可以时不时地去学习语义并且重新阅读HTML和CSS的基础（如果你喜欢挑战的话也可以学习它的规格）。
这创造了一个你可以把它填满的技能的真空区。 因此，在你专注于你的HTML和CSS的时候，你的开发人员可以把时间花在真正的编程。
2、HTML是什么浏览器知道
不要被吓到。React和其他的是一些必须要最终输出HTML的语言。浏览器不认识React，但它认识HTML。因此这就是最终的最终。
这意味着你可以仍然和一个开发人员一起用React工作而并不一定要“认识”它。
我们来一起看一些来自官方的React方面的教程。
// tutorial1.js
var CommentBox = React.createClass({
render: function() {
return (
Hello, world! I am a CommentBox.
);
}
});
ReactDOM.render(
,
document.getElementById('content')
);
看到在return后面括号里面的所有内容了吗？那就是HTML。你脑海中唯一需要转换的就是“className”就是指的CSS类，就是这样！你就基本可以忽略其余的部分，并且可以帮你的开发人员编写HTML和CSS而不再需要使用React来编写任何东西。
即使当它变得稍微复杂一点...
// tutorial4.js
var Comment = React.createClass({
render: function() {
return (
className="commentAuthor">
{this.props.author}
{this.props.children}
);
}
});
{this.props.author}“是什么？哪里有某种内容。你可以去问你的开发人员这是什么。你只需要围绕它设计就可以了。
让我们来看看另一种普通的网页语言，PHP。设计一个WordPress的主题？你的标头可能看起来像这样：
从技术上讲，这是一个PHP页面，但它主要还是HTML。再者， 这是写HTML代码。如果你了解HTML和CSS，你大概可以写出80-90%的PHP，特别是如果你从一个已存在的模板开始做。
“认识”一种编程语言并不是万能也不是一无是处。很好的了解HTML和CSS可以帮助你很好的用其他语言交流。这就像在法国生活一年后再参观法国。这已经足够使用了，并且比之前的什么都不知道要好太多！
3、CSS3作为网页上的动画的语言正在逐步替代JavaScript
好吧，我之前说HTML和CSS并不是真正的编程语言的时候其实我撒了个小谎。一些新的东西都是各种旧程序语言的基础上开始的。尤其像CSS动画这一类。但如果你真的想不用学习一门全新的程序语言就能提升你的技能，CSS动画会是一个很好的起点。
Val Head，CSS动画的一名大师，写了一篇名为“UI和UX动画:一个不是秘密的友谊”，在书里面，她解释了为什么CSS动画领域可以属于设计师们，它又是如何属于设计师们的。
随着Flash的消亡和CSS3动画新力量的诞生，CSS正迎合着这个时代动画的潮流。而且也许并不是巧合，动画和动作设计是设计师们正在同时着手做的东西。因此，利用你拥有的CSS技能去加入动画游戏制作吧！
4、CSS的线框图比Photoshop的原型更好
如果你处在一个更传统的、开发人员依然在处理视觉规范或者完美像素排版的环境中，你可能会遇到在模型需要被转换成代码时的一些设计细节问题。
问题的形式可能像这样：
“这里填充有多少像素？“
“这个按钮的边界半径是多少？“
如果开发者们不得不将你在Photoshop或者Sketch中创建的东西转化成CSS属性，你不妨直接把真实的CSS属性给他们，为什么要浪费时间来使你的设计趋于完美像素排版以致开发者们执行它的时候做出一堆的猜测？
我成功地创建了许多粗糙的线框图，这些足够让开发者们能开始做了，当他们建立了一个功能原型之后就可以再补充真实的CSS的代码。这样你就不必一次性或者在同一份文档中详细的写下所有的内容。
这也将开发者们从思考CSS中释放出来，这也就像我们从上文中看到的，是对他们好。
5、最不济，你还可以自定义一个网络框架
如果你在做一个网络产品，而你的开发者们使用引导程序或者类似的东西，这将是一个很好地机会。如果是这样的话，你可以通过自定义框架主题来检验你的CSS技能，并且取得设计的所有权。你也可以从众多的自定义主题中挑选一个开始制作。
通过将功能和外观分离，开发人员可以拥有独立的代码设计团队，也可以给客户看到对整个设计团队的掌控。
这种技术的混合使得以上任意一种情况使用线框模式库和框架也都是有效的。
结论
一个名为“打破UX生涯的神话”有趣的话题出现在UX Mastery论坛。
讨论以“我听到最多的一个声音就是能够编写代码是首要的要求。”拉开了序幕，在我的职业生涯中，我遇到过很多次这种神话。同样的海报以“如果你想学，HTML和CSS的基本知识将是一个很好的起点。“收尾。
如果你是一个“只”知道HTML和CSS的设计师，或者你想成为一个设计师，期待找到属于自己的市场，你不需要学习复杂的编程语言。HTML和CSS–“古老”的技术标准，经考验证明它确实是极为有用的–和以前一样，依然作为网络中不可缺少的组成部分，是现代设计师强力的兵工厂。
现在，骄傲的去展示你的技能！
当然，如果你是一个树屋的成员，想了解更多，看看“HTML和CSS的介绍”或树屋网站中任何其他的HTML或CSS课程。
翻译自：
原文作者未做权利声明，视为共享知识产权进入公共领域，自动获得授权