CSS 在…

去年年底出现了一个有趣的趋势，即公司发布了他们的 CSS 方法。 包括所涉及的工具、方法、思路以及背后的数据和数字。 Mark Otto 率先发布了，据我所知。 我主要想在这里发布一份清单，因为这对 CSS-Tricks 来说是完美的素材。 最后我把它放进了一个表格，并添加了一些易于比较的数据，纯粹为了好玩。

公司 预处理器 前缀 # 源文件 # 选择器 样式强制 备注

公司：
Github

预处理器：
SCSS

前缀：
自定义 @mixins

# 源文件
100+

# 选择器
7,000

样式强制：
SCSS-lint, styleguide

备注：
由于 IE 选择器限制，存在 2 个最终样式表

 

公司：
Buffer

预处理器：
LESS

前缀：
Autoprefixer

# 源文件
93

# 选择器
5328

样式强制：
LESS lint

备注：
2 个最终样式表

 

公司：
CodePen

预处理器：
SCSS

前缀：
Autoprefixer

# 源文件
171

# 选择器
1186

样式强制：
.editorconfig

备注：
资产管道

 

公司：
Ghost

预处理器：
SCSS (libsass)

前缀：
Autoprefixer

# 源文件
36

# 选择器
1609

样式强制：
一般 指南

备注：
开源

 

公司：
Groupon

预处理器：
Sass (语法不清楚)

前缀：
Compass

# 源文件
?

# 选择器
?

样式强制：
SMACSS

备注：
Toolstrap

 

公司：
Lonely Planet

预处理器：
Sass

前缀：
Autoprefixer

# 源文件
150+

# 选择器
1527

样式强制：
Rizzo，无 lint

备注：
BEM / OOCSS, Normalize.css, SVG 图标

 

公司：
Medium

预处理器：
LESS

前缀：
自定义 @mixins

# 源文件
50-100

# 选择器
?

样式强制：
指南

备注：
无嵌套，自定义命名方法

 

公司：
Trello

预处理器：
LESS

前缀：
自定义 @mixins

# 源文件
44

# 选择器
2,426

样式强制：
预处理器

备注：
1 个最终样式表，命名空间

另一个非常常见的主题：.js- 类前缀，用于不混合 JavaScript 挂钩和样式挂钩。

另外，我尝试使该表格具有响应性…

我希望它

• 在有空间时成为一个外观正常的表格。
• 在小屏幕上折叠成块。
• 在没有 CSS 的情况下也能正常工作（电子邮件、RSS）。

以下为结果

该概念的根源是使用“正常”HTML 元素（section、div、p、span）并强制它们成为一个表格。 我对它们进行了不同的命名，但您也可以直接使用辅助类

.table    { display: table }
.tr       { display: table-row }
.thead    { display: table-header-group }
.tbody    { display: table-row-group }
.tfoot    { display: table-footer-group }
.col      { display: table-column }
.colgroup { display: table-column-group }
.td, .th  { display: table-cell }
.caption  { display: table-caption }

然后在某个媒体查询中，您强制它们恢复到正常状态

@media (max-width: 700px) {
.table    { display: block }
.tr       { display: block }
.thead    { display: block }
.tbody    { display: block }
.tfoot    { display: block }
.col      { display: none }
.colgroup { display: none }
.td, .th  { display: inline-block }
.caption  { display: block }
}

但这只会导致一些奇怪的句子，所以我添加了一堆<br> 标签以根据需要进行间距，这些标签使用 CSS 隐藏。 我还使用了一个<span> 为每个单元格添加标题，同样也使用 CSS 隐藏，因此如果没有 CSS，您会看到每个数据位的标题。

这很冗余且混乱。 在需要将其放入 WordPress 时情况更糟，因为自动段落行为会添加额外的段落，您需要小心处理。 我只是在一个 Pen 中做了整个事情，然后压缩了 HTML。