-[2013-Media Queries Are Not The Answer: Element Query Polyfill](https://www.smashingmagazine.com/2013/06/media-queries-are-not-the-answer-element-query-polyfill/)
-[2016-Element Queries: the Future of Responsive Web Design](http://webdesign.tutsplus.com/tutorials/element-queries-the-future-of-responsive-web-design--cms-26945)
*[2013-Media Queries Are Not The Answer: Element Query Polyfill](https://www.smashingmagazine.com/2013/06/media-queries-are-not-the-answer-element-query-polyfill/)
*[2016-Element Queries: the Future of Responsive Web Design](http://webdesign.tutsplus.com/tutorials/element-queries-the-future-of-responsive-web-design--cms-26945)
*[网易和淘宝移动 WEB 适配方案再分析](https://zhuanlan.zhihu.com/p/25216275)
-[The pro's guide to responsive web design](http://www.creativebloq.com/rwd/pros-guide-responsive-web-design-71515692): Advanced techniques from top web designers to build better sites for any device.
*[The pro's guide to responsive web design](http://www.creativebloq.com/rwd/pros-guide-responsive-web-design-71515692): Advanced techniques from top web designers to build better sites for any device.
-[2017-Fundamentals of Responsive Images](https://www.lullabot.com/articles/fundamentals-of-responsive-images): In this article, I’ll be explaining some of the key concepts for responsive images, as well as providing an overview of a few different responsive image tactics.
*[2017-Fundamentals of Responsive Images](https://www.lullabot.com/articles/fundamentals-of-responsive-images): In this article, I’ll be explaining some of the key concepts for responsive images, as well as providing an overview of a few different responsive image tactics.
-[2017-基于 Shadow DOM 的样式封装](https://meowni.ca/posts/shadow-dom/)：Shadow DOM 是 Web Components 标准的重要组成部分，它能够将 DOM 树进行隔离封装，而本文则是介绍如何利用 Shadow DOM 实现对于样式类的隔离封装。由于 CSS 并没有提供内置的模块化或者作用域机制，而在大型项目中不同组件间的样式又极易引发冲突，因此我们需要选择合适的 CSS 样式隔离方案。目前常用的隔离方案有 BEM 命名策略、IFrame、CSS Modules、CSS-in-JS 等，本文首先盘点了这些方案的优势与不足；然后介绍了 Shadow DOM 的基本原理以及如何应用到样式封装上。
*[2017-基于 Shadow DOM 的样式封装](https://meowni.ca/posts/shadow-dom/)：Shadow DOM 是 Web Components 标准的重要组成部分，它能够将 DOM 树进行隔离封装，而本文则是介绍如何利用 Shadow DOM 实现对于样式类的隔离封装。由于 CSS 并没有提供内置的模块化或者作用域机制，而在大型项目中不同组件间的样式又极易引发冲突，因此我们需要选择合适的 CSS 样式隔离方案。目前常用的隔离方案有 BEM 命名策略、IFrame、CSS Modules、CSS-in-JS 等，本文首先盘点了这些方案的优势与不足；然后介绍了 Shadow DOM 的基本原理以及如何应用到样式封装上。
-[Improving CSS quality at Facebook and beyond](https://code.facebook.com/posts/879890885467584)
*[Improving CSS quality at Facebook and beyond](https://code.facebook.com/posts/879890885467584)
-[Modular CSS with React](https://medium.com/@pioul/modular-css-with-react-61638ae9ea3e#.wwleyppu3)
*[Modular CSS with React](https://medium.com/@pioul/modular-css-with-react-61638ae9ea3e#.wwleyppu3)
-[CSS Naming Conventions that Will Save You Hours of Debugging](https://parg.co/UkE)
*[CSS Naming Conventions that Will Save You Hours of Debugging](https://parg.co/UkE)
# Naming Conventions: 命名规范
# SCSS
-[What are the best CSS preprocessors/postprocessors?](http://www.slant.co/topics/217/~css-preprocessors-postprocessors)
*[What are the best CSS preprocessors/postprocessors?](http://www.slant.co/topics/217/~css-preprocessors-postprocessors)
-[2017-Advanced SCSS](https://gist.github.com/jareware/4738651): 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.
*[2017-Advanced SCSS](https://gist.github.com/jareware/4738651): 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.
-[2017-How Sass Can Save You a Lot of Time](https://codeburst.io/how-sass-can-save-you-a-lot-of-time-f1198b658012): I’ll explain what CSS preprocessors are, how you can install Sass, the 2 different Sass syntaxes, some of the main features of Sass and finish off with some cool examples.
*[2017-How Sass Can Save You a Lot of Time](https://codeburst.io/how-sass-can-save-you-a-lot-of-time-f1198b658012): I’ll explain what CSS preprocessors are, how you can install Sass, the 2 different Sass syntaxes, some of the main features of Sass and finish off with some cool examples.
# CSS-in-JS
-[css-in-js](https://github.com/MicheleBertoli/css-in-js): React: CSS in JS techniques comparison.
*[css-in-js](https://github.com/MicheleBertoli/css-in-js): React: CSS in JS techniques comparison.
-[CSS in JS: The Argument Refined](https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955#.z6czxmcfm)
*[CSS in JS: The Argument Refined](https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955#.z6czxmcfm)
-[2017-A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660): We’re going to take a look at why writing your styles in JavaScript isn’t such a terrible idea after all, and why I think you should be keeping an eye on this rapidly evolving space.
*[2017-A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660): We’re going to take a look at why writing your styles in JavaScript isn’t such a terrible idea after all, and why I think you should be keeping an eye on this rapidly evolving space.
-[2017-CSS in JavaScript: The future of component-based styling](https://parg.co/bNe)
*[2017-CSS in JavaScript: The future of component-based styling](https://parg.co/bNe)
-[2017-Stop using CSS in JavaScript for web development](https://hackernoon.com/stop-using-css-in-javascript-for-web-development-fa32fb873dcc): This article lists common misconceptions (myths) and the existing CSS solutions to those problems.
*[2017-Stop using CSS in JavaScript for web development](https://hackernoon.com/stop-using-css-in-javascript-for-web-development-fa32fb873dcc): This article lists common misconceptions (myths) and the existing CSS solutions to those problems.
-[2017-Styled-Components in Action](https://medium.com/@lvarayut/styled-components-in-action-723852f2a93d): In this article, I will walk you through the main concepts of Styled-Components along with coding examples.
*[2017-Styled-Components in Action](https://medium.com/@lvarayut/styled-components-in-action-723852f2a93d): In this article, I will walk you through the main concepts of Styled-Components along with coding examples.
-[Why We Use Styled Components at Decisiv and why you might consider it as well](https://hackernoon.com/why-we-use-styled-components-at-decisiv-a8ac6e1507ac?source=linkShare-fe48c4221a4c-1508836944)
*[Why We Use Styled Components at Decisiv and why you might consider it as well](https://hackernoon.com/why-we-use-styled-components-at-decisiv-a8ac6e1507ac?source=linkShare-fe48c4221a4c-1508836944)
*[CSS Compatibility in Internet Explorer](https://msdn.microsoft.com/en-us/library/hh781508%28v=vs.85%29.aspx): Microsoft Internet Explorer 6 was the first fully Cascading Style Sheets, Level 1 (CSS1)-compliant version of Internet Explorer. Windows Internet Explorer 8 is fully compliant with the Cascading Style Sheets, Level 2 Revision 1 (CSS2.1) specification and supports some features of Cascading Style Sheets, Level 3 (CSS3). Windows Internet Explorer 9 and Internet Explorer 10 add even more support for many CSS3 modules.
# Syntax: 语法
*[2017-Locally Scoped CSS Variables: What, How, and Why](https://parg.co/bLS): CSS Custom Properties (also popularly called CSS Variables) are here! This is really exciting because we finally have true variables in CSS!
*[Basic CSS Selector Syntax Explained Using Cats](https://robots.thoughtbot.com/basic-css-selectors-explained-with-cats)
*[How CSS pseudo-classes work, explained with code and lots of diagrams](https://medium.freecodecamp.com/explained-css-pseudo-classes-cef3c3177361#.ax2oehufx)
*[2017-Locally Scoped CSS Variables: What, How, and Why](https://parg.co/bLS): CSS Custom Properties (also popularly called CSS Variables) are here! This is really exciting because we finally have true variables in CSS!
*[Basic CSS Selector Syntax Explained Using Cats](https://robots.thoughtbot.com/basic-css-selectors-explained-with-cats)
*[How CSS pseudo-classes work, explained with code and lots of diagrams](https://medium.freecodecamp.com/explained-css-pseudo-classes-cef3c3177361#.ax2oehufx)
-[2017-CSS Glitch Effect](https://parg.co/Uh7): An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.
*[2017-CSS Glitch Effect](https://parg.co/Uh7): An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.
