所面临的挑战
级联样式表, 简称CSS, 样式表语言是用来描述用HTML编写的文档的表示的吗. CSS的第一个版本是在1994年底提出的. 在接下来的20年里，CSS升级了3次，留下了现在的CSS版本3. 今天，CSS是web的核心编程语言之一，它被标准化 W3C 规范. 它的发展非常缓慢, 这导致了收养的问题, 最后，web浏览器开发者们自己动手了. 这导致了许多跨浏览器兼容性问题，并浪费了web开发时间. CSS3在手 HTML5 已经成为一个不可分割的部分 前端 /UI/UX开发，并且在他们的简历中不缺少CSS的开发人员. 这使得找到全职或兼职CSS开发人员相当容易, 但选择一个完美的人就更有挑战性了. 许多web开发人员会说他们也是CSS开发人员, 但就像任何语言或技能一样, 了解CSS和成为CSS专家是有区别的.
手持的CSS3和HTML5已经成为任何前端开发不可或缺的一部分
这就是为什么招聘CSS开发人员会很困难, 而寻找一个完美的可能是一项漫长而艰巨的任务. 本指南的目标是帮助您找到与您的团队或项目完美匹配的人. 为了这个目标, 这篇文章提供了一些问题的样本，这些问题是评估考生掌握CSS的广度和深度的关键. 下面的指南给了你一些问题，让你在准备顶级CSS开发人员的面试时获得灵感. 你不应该仅仅根据他们“正确”回答每个问题的能力来评估候选人. 那就没有抓住重点, 因为不是每个优秀的候选人都知道所有的CSS细节, 了解所有细节也不能保证你成为最好的开发者. Instead, 利用面试官提供的问题来了解应聘者对手头问题的看法, 通过提供的例子他们是如何工作的, 以及他们如何权衡各种选择并做出判断.
问题与答案
问:什么是“id”选择器，什么是“类”选择器? 解释他们的区别.
HTML元素可以有任何一种 id 属性或 class 属性，或者两个属性都有.
The id 选择器为其应用的元素分配唯一的名称. 要使CSS有效，只能有一个具有给定名称的元素. An id 选择器通常用于将样式规则限制为特定的HTML元素, 或者一个元素块. 根据CSS规范， id 属性定义选择器 # 字符，后面跟着名字.
另一方面， class 属性将类名赋给元素, 该名称可以用于文档中的任意数量的元素. 当您希望将样式规则应用于文档中的多个块和元素时，将使用特定于类的样式. 类似于 id 选择器，类由句号(.)，后跟类名.
总之， id 选择器标识并将样式设置为元素只出现一次，而 class 可以附加到任意数量的元素. CSS的最佳实践是尽可能多地使用类，并保留类的使用 id 特定用途的属性. 这将导致更小的样式表文件，更性能和更容易维护.
问:有多少种方法可以将CSS添加到网页中? 讨论每种方法的优缺点.
有三种方法将CSS包含到网页中:
内联:CSS通过样式属性直接应用于HTML元素.
嵌入式:CSS被添加到 head 元素，通过将CSS代码放在 style element.
外部样式表:CSS被放置在外部文件中，并通过类添加到网页中 link element.
内联样式弊大于利. 内联样式对于少量的样式定义非常有用，而且它们能够覆盖其他样式规范. 缺点是它们不能将样式与内容分开, 风格不能从一个地方控制, 而且很难创造出更复杂的风格.
与内联样式相比，嵌入式和外部CSS共享大多数优点. 可以创建文档中多个元素使用的类, 它们通过使用选择器和分组方法允许复杂的样式化, 样式只从一个地方控制.
通过使用嵌入式样式表，不需要额外下载, 而外部CSS文件提供了一个文件中多个HTML文档的样式控制. 外部CSS文件的缺点是直到外部样式表文件被加载, HTML文档无法正确呈现.
问:请解释什么是RWD. 讨论如何用CSS实现它.
RWD是响应式网页设计的缩写, and it is the practice of building web pages to work on any device and every screen size improving user interfaces and user experience across the board; no matter how large or small they are, 比如手机, tablet, 笔记本电脑或台式机. 响应式设计的好处是你不需要为每个提到的设备创建不同的页面版本. 响应式网页设计师只使用HTML和CSS来调整大小, hide, shrink, enlarge, 或者移动内容，使其在任何给定的屏幕上看起来最好. RWD是通过使用CSS媒体查询实现的-媒体查询是简单的过滤器，它可以根据设备的特征(如显示类型)更改内容样式, width, height, 方向甚至分辨率.
问:讨论一下CSS图像精灵.
CSS精灵 本质上是多个光栅图像合并成一个单一的图像. 使用它们的主要原因是为了提高性能. 浏览器需要发出的不同请求越少，网页加载速度就越快. “精灵”一词最早出现在电子游戏中. 这样做是为了更快地将一张图像加载到图形内存中, 然后一次只显示图像的一部分, 而不是不断加载新的图像. 今天的web也采用了同样的原则.
在CSS中，图像精灵与 背景图像 财产, 然后通过设置背景位置和各个类的尺寸进行调整，以显示单个部分的完整图像精灵.
问:解释一下Less、Sass和Stylus是什么. 讨论他们能提供什么，以及他们的优点和缺点.
Less、Sass和Stylus都是CSS预处理器. CSS预处理程序是CSS之上的抽象层, 用一种特殊的语法编写并编译回CSS.
CSS预处理器在CSS之上提供了强大的功能, 与变量, extends, mixins是最引人注目的. 变量存储以后可以重用的信息，如颜色或其他常用值. 扩展帮助您创建允许规则继承的“类”. mixin，你可以把它理解为"函数". 与普通CSS相比，还有一些其他特性, 比如逻辑语句的使用(条件和循环), 自定义函数, 与其他库(如Compas)的集成, 还有更多.
谈到优点和缺点时, 个人偏好提供了很好的机会与候选人讨论他们自己对CSS预处理器使用的看法，以及为什么可以使用特定的原因. 基本上，没有正确或错误的答案，为什么哪一个可以使用. 要了解更多关于CSS预处理器的信息，可以阅读一篇文章 为什么你应该停止使用香草CSS .
问:解释一下什么是CSS供应商前缀.
CSS厂商前缀是CSS标准的扩展. 浏览器使用它们来提供实验性的和非标准的特性. 由于供应商前缀不包括在官方CSS规范中, 通过添加特定的前缀，浏览器可以防止将来扩展标准时可能出现的不兼容问题.
CSS的厂商前缀有:
Android: webkit -
Chrome: webkit -
Firefox: -moz-
Internet Explorer: -ms-
iOS: webkit -
Opera: -o-
Safari: webkit -
问:请解释一下CSS框模型和它所包含的布局组件. 提供的例子.
CSS框模型是HTML元素的矩形布局范例，包括以下内容:
Content - CSS框的内容，其中出现文本和图像
Padding -内容周围的透明区域(如边框和内容之间的空间)
Border -边框围绕填充(如果有的话)和内容
Margin -边界周围的透明区域(如边界和任何相邻元素之间的空间)
可以为元素的每一侧单独指定这些属性, 即最高, bottom, 左右, 或者可以通过指定更少的参数将它们组合成多个边. 例如:
/*设置上下左右边距*/
Margin: 50px 10px 100px 25px;
/*在所有四个边设置相同的边距:*/
保证金:50 px;
/*将上下边距和左右边距组合在一起*/
填充:100px 25px;
用CSS示例测试考生，或者给他们任务，让他们只用CSS创建HTML元素
你可以通过给他们不同的CSS例子并让他们解释他们是做什么的来测试他们. 这样你可以更好地评估他们的思维方式和对一些CSS细节的了解. 另一种方法是给候选人一个花哨的按钮或进度条的图像, 并要求他们只使用CSS重新创建它们. 下面列出了一些CSS示例，您可以向考生提供.
Q:解释一下哪些元素可以匹配下面的CSS选择器:span, aspan aspan > aspan + aspan ~ a
span, a 将全部选中
span a 将全部选中
span > a 将全部选中
span + a 将全部选中
span ~ a 将全部选中
Q:解释一下下面每个CSS单元的含义:
厘米-厘米
Em -元素，相对于元素的字体大小(e.g.， 2em表示当前字体大小的2倍)
英寸
Mm -毫米
PC - picas - 1 PC = 12 pt = 1/6英寸
Pt - points - 1pt = 1/72英寸
Px -像素- 1px = 1/96英寸
问:在CSS3中，你会如何选择:http.pdfcss
选择每一个 http:
(href ^ =“http”)
选择每一个 .pdf:
美元(href = ".pdf"]
选择每一个 css:
(href * =“css”)
结论
对于顶级CSS开发人员来说，所提供的问题可能有点基本. However, 它们涵盖了CSS的大部分核心概念, 视觉设计与原则, 它们确实为评估个人提供了一个起点. 能够以清晰连贯的方式讨论CSS原理和概念将展示考生的沟通技巧以及他们的理论和外围学科知识. 找到真正的CSS大师是一个挑战. 从WordPress开发人员和移动应用程序专家到Adobe, Magento, Ajax, 对于PSD程序员来说，这个任务并不容易. 我们希望你在这篇文章中提出的问题能成为你在CSS开发人员中寻找少数精英的有用基础. 找到这样的候选人是非常值得努力的, 因为它们无疑会对你的团队的生产力和结果产生重大的积极影响.
