我为什么以及如何建立 css.gg - 一个人生故事。

好的，我从哪里开始呢？

• 首先感谢Peter Thaleikis提出这个建议。
• 第二，技术性不太强。
• 第三是个人方面。

为什么？

有时候，这并不是你认为推动项目前进的原因。

为了让您了解css.gg出现的原因，我需要告诉您，我喜欢的少数事物之一就是 CSS，所有这些都是我在没有受过教育的情况下自学的，所以您可能会在这里或那里看到一些不寻常的东西。

2018 年 12 月，我不得不做出当时人生中最重要的决定之一，那就是辞去我共同创办的公司，因为它已经变成了一个有毒的、追逐金钱的工作环境。

我感觉自己已经不适合担任 CTO 的角色了，我感觉自己已经忘记了自己最初开始从事网络工作的初衷。

我想再次回顾最基础的内容。

我小时候对网络充满热情，幸运的是，网络成为了我的职业，而我对世界上任何事物的热情都不会消失。

结果我确实辞职了，开始以自由职业者的身份从事这个项目。

怎么办？

版本控制：
全天使用 Github，界面和功能集对我来说只是顶级的。

工具：
VS Code——无需解释。

名称：
最初它被命名为“CSSpod”，我会在其中以 codepen 风格发布 CSS pod，但只有 CSS，当我看到css.gg是免费的时，我决定使用它，并且应用程序将被命名为相同的名称，因为无论在哪里共享，域名都会在品牌上，并且不会失去访问者，特别是 CSS 作为关键字的竞争力。

Stack：
我首先挑战了自己，这个项目不会受潮流驱动，也不会基于 React、Vue 或其他任何框架构建。
我希望它只包含 CSS、HTML 和 PHP。

设计：
然后我开始直接用 CSS 一个一个地设计图标，没有用 figma、sketch 或任何其他工具。当时我脑子里全是我想做的事情，但并没有制定任何具体的计划。所以，你懂的，我可以撒谎说我做了一个样式指南页面和它背后的系统。不，我没有。

开始时间：
在对我会遵循的风格进行了大量研究并考虑了我可以使用的属性之后，我决定做一个轮廓简约的集合，灵感来自 Cole Bemis（这个人真是个很棒的人）的feathericons.com

标记：
标记是需要克服的障碍之一，但最终结果很好。最初我使用了空标签，例如

<!-- 
This was a no go since you must have nothing after it
or it would wrap it. Stupid. 
-->
<gg-icon-name /> 

<!--
Then did this which was simply ugly for icons with long names
-->
<gg-long-icon-name></gg-long-icon-name> 

<!--
In the end decided to do it like font-awesome with the <i></i> tag.
--> 
<i class="gg-icon-name"></i>

为什么没有自闭合的 void 标签 >> https://github.com/w3c/webcomponents/issues/624

另一个条件是，只能有 1 个元素带有伪选择器。

命名：
为了避免重复，我给图标添加了“gg-”。由于它是普通的 CSS，因此可以与其他样式混合使用。此外，每个图标上都添加了一点品牌标识。

为什么是类：
因为在 Id 之后，类的具体级别最高，更多信息：https://dev.to/emmawedekind/css-specificity-1kca

没有通用类：
我当时决定的一件主要事情是，我不会为每个图标添加一个通用类，例如“gg-style”或包含重复属性的内容，例如：

.gg-icon-name {
    display:block;
    box-sizing: border-box;
    position: relative;
} 

这会使事情变得非常复杂，当您只选择一个或几个图标而不是包时，图标将不会像现在这样依赖。

数据库：
这种项目当然需要一个数据库，我这里没有。我把每个图标都放在一个单独的 php 文件中，其中包含标签、名称、模板等主要内容。我确实会从 .json 文件中列出图标，所以实际上它是一个平面文件系统，或者说是静态文件系统，随便你怎么称呼它。

着色：
为图标着色是一个非常重要的问题，因为如果我应用 hex、rgb 或 hsl，其他人更改每一个图标、替换或禁止使用 !important 覆盖都会成为一场噩梦；

/* currentColor to the rescue */ 
.gg-icon-name {
   color: currentColor; 
   background-color: currentColor; 
   border: 0 solid currentColor;
   box-shadow: 0 0 0 currentColor;
}

这样，无论您为父级着色到什么位置，它都会继承该颜色，我们就可以开始了。

人们会根据图标的颜色调整其大小，因此我的解决方案是创建一个自定义 CSS 变量，并使用 transform 调整其大小。

.gg-icon-name {
    transform: scale(var(--ggs),1);
}
/* 1 is for fallback reasons if some one is mad enough to use this on IE* /

对于我来说，使用 em 或其他单位在当时是不可行的，并且取决于段落的图标大小，希望有一些东西可以直接控制它，因为可以在父级、正文或：root 上添加变量。

免责声明：本文https://css-tricks.com/css-gg/在撰写时，我认为其大小调整方式不是很清楚，因此我现在在https://css.gg/app上添加了一个框，直接说明如何调整大小。

主页：
我尽可能简化页面，重点明确解释这个库的用途，每次刷新页面时都会按随机顺序显示图标。

应用页面：
或者我可以称之为网页应用，它构建为一个简单的网格，提供选择单个图标的选项，例如 Google 字体样式、阅读标记或下载带有筛选器和简单搜索功能的相同图标。
顺便说一下，侧边栏和筛选器使用 CSS 隐藏，它会通过 CSS 设置 Cookie，下次访问时会根据 Cookie 样式应用。

我强烈建议检查来源。

颜色预览：
这个功能不是必须的，但可以很好地补充，只需检查它们与其他颜色搭配的效果，而且它就像一个定制证明和一个为什么不呢的时刻。

单个图标页面：
该页面设计了尽可能多的信息，您会在进入页面之前看到图标，但在这里您将看到所有规格，并在右侧预览它是如何完成的以及为什么不直接复制样式。

将来我会添加一些视频，介绍如何为初学者制作教程。

页面上还包含与图标部分相关的内容，以获得更好的体验。

NPM
对于那些使用 react、vue 或任何其他框架的人来说可以利用 CDN 可用性。

API 或 json 对象，XML
这不完全是一个 API，而有点像公共的，因为它是公共的，没有令牌，只是以 json 的形式提供数据，并且可以轻松地在应用程序之间传输数据，适用于 React、Vue 和 Angular 项目。https
://css.gg/json是一个 php 页面，而不是真正的 json 文件。

<?php
  header('Content-Type: application/json');
  $data = array();
  $i = 0;
  $cont = array();

  // icon loop

  echo json_encode($data);
?>

同样适用于“CSS” - https://css.gg/c和“XML” - https://css.gg/xml

CDN
我知道我无法提供高端服务器来托管它，所以我选择了这些替代方案，这些替代方案在你在 NPM 上发布后无论如何都会出现。

JSON
https://unpkg.com/css.gg
https://cdn.jsdelivr.net/npm/css.gg

CSS
https://unpkg.com/css.gg/icons-compressed/icons.css
https://cdn.jsdelivr.net/npm/css.gg/icons-compressed/icons.css

XML
https://unpkg.com/css.gg/icons-xml/icons.xml
https://cdn.jsdelivr.net/npm/css.gg/icons-xml/icons.xml

动画
嗯，它们仅限 CSS，因此最终可以进行动画处理，因此请查看一些示例：

• https://css.gg/loadbar
• https://css.gg/loadbar-alt
• https://css.gg/loadbar-doc
• https://css.gg/loadbar-sound

追踪：
好的，这是这个项目中最棘手的部分。
我一开始没有用到 JS，所以现在是时候开始做了。正如我在第一篇文章中提到的，我使用了 Crooked Stylesheet 方法，将 PHP 中的 cookie 设置为 css 的内容。

像这样：

/* Track download: increment on a .log file */  
a:active::before { content: url(/action?=download-icon-name); }

/* Track selection: set a cookie */ 
#icon-name:selected~main .gg-icon-name::before { content: url(/action?=select-icon-name); }

/* Track sizing: set a cookie */
#size-xl:selected~main [for="size-xl"]::before { content: url(/action?=size-xl); } 

当您调用 url 时，页面浏览量、json 调用、xml 调用、css 调用都会记录在日志文件中，单页示例：

    $namer = pathinfo($_SERVER["SCRIPT_FILENAME"], PATHINFO_FILENAME);
    $counter_name = $_SERVER["DOCUMENT_ROOT"] . "/one/log/" . $namer . ".log";
    if (!file_exists($counter_name)) {
        $f = fopen($counter_name, "w");
        fwrite($f,"0");
        fclose($f);
    }
    $f = fopen($counter_name,"r");
    $counterVal = fread($f, filesize($counter_name));
    fclose($f);
    $counterVal++;
    $f = fopen($counter_name, "w");
    fwrite($f, $counterVal);
    fclose($f);

缩小
我确实使用 php 函数以及 htaccess 上的 gzip 压缩缩小了所有内容：

function ob_html_compress($buf){
    return preg_replace(
        array('/<!--(.*)-->/Uis',"/[[:blank:]]+/", '/(\>)\s*(\<)/m'),
        array('',' ', '$1$2'),
        str_replace(array("\n","\t"),'',$buf));
}
ob_start("ob_html_compress");

营销：
启动这个项目时，我所做的就是保持在 dev.to、indiehackers.com、reddit.com 等社区的活跃度。就是这样，没有推广帖子，没有付费文章，什么都没有。

这也可以在 Product Hunt 上找到：https://www.producthunt.com/posts/css-gg

再次，这篇文章：https://css-tricks.com/css-gg/清楚地展示了主标语“🌎 的第一个由代码设计的图标库”是如何写的。显然，现在已经删除了，因为我意识到这根本不公平，感谢 Chris Coyer 提出这个问题。

向 Nicolas Gallagher 点赞 - http://nicolasgallagher.com/pure-css-gui-icons/demo/他 10 年前做过类似的事情，但并不完全相同。

描述
我在每个图标的末尾都添加了一个自动描述，它会根据所使用的属性和一些花哨的词语进行旋转，以达到 SEO 的目的。

适用人群：
热爱 CSS 的人、关心页面速度并希望获得一些与众不同的东西的人。

我追求的：
不需要浏览量，不需要点赞，不需要认可，什么都没有，只需要展现自我，做我自己。但我得到的远不止这些。

结果

• 这完美吗？当然不完美，有些人可能会说这太蠢了。我欢迎大家提出建议。
• 我从这个项目中学到了很多东西。
• 300+ 星 - https://github.com/astrit/css.gg
• 来自独一无二的Cole Bemis 的反馈- feathericons.com “设计和执行看起来非常出色💯”
• Product Hunt 上超过 100 个赞
• Twitter 上大量分享
• 还有更多我无法在此列出的内容。

我之所以说这是个人的事情，是因为这确实是一段旅程的一部分

说到底，这只是 CSS 中的另一个图标集，当然不是第一个，也不是最好的，但它是我的一部分，它让我轻松地手动编写了 17,000 多行 CSS。

如果您愿意，请考虑成为 Github 赞助商
https://github.com/sponsors/astrit

和平✌️
阿斯特里特