没想到我只是学了个 CSS,就能感受到垃圾代码的恶臭了

本贴最后更新于 979 天前,其中的信息可能已经时异事殊

并没有系统地学习 CSS 的我虽然能写出来勉强能用的主题,但是我那混乱的代码已经堆积起来,让我难以修改问题、增添功能。没头没脑地用选择器和!important,还有每次手动用拾色器选个颜色弄出个新颜色代码用来声明,感觉整个主题的代码混乱不堪,我自己都快绷不住了。

虽然 pink-room 下载量也几百了,但没什么人反馈,github 上也没有 issue。感觉不到使用者的存在,着实有点没有修复缺陷和改进的动力。

过段时间(指不知道啥时候)一定得重构,不然这主题没法写了。

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    26093 引用 • 108343 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 加油

  • soltus

    ❤️

  • Bard

    特意下载了下,支持楼主

    但我个人的确对这个风格不是很感冒

    1 回复
  • Zhangwuji

    提点意见,楼主需要多收集点反馈

    1 回复
  • Bard

    我最近在用 notion-theme,备用 Rem craft

    我喜欢这种看起来极简,用起来功能丰富度一点不弱的吧

    前者的隐藏顶栏,我也很喜欢,隐藏后也是极简

    两侧栏可以鼠标触发,感觉也是很不错

    或许楼主可以朝着这个风格方向改一下

    可以一件切换颜色这个功能挺好

    1 回复
  • Achuan-2 via Android

    其实我觉得主题首先是自己用,在有余力的情况下再考虑别人的需求。

    所以就不要想太多啦,像我现在更新主题,纯粹就是为了方便我自己多个设备下载用,也不太管别人的反馈。

    当然如果你是想通过做主题学习 css,然后再学前端 js 开发的话,那确实得花点心力。如果只是想好好做一个主题,就不要想太多啦,社区优秀的主题都是花了很多时间一点点迭代的

    1 回复
  • 页签栏可以优化一下

    1 回复
  • AMBERWIN

    ❤️ ❤️ ❤️

  • 主题还是很不错的,提两个小建议,这个颜射设置这里,下面那些数字是不是不要更简洁?下面的 1,2,3,4 和 I,II,III 等。

    image.png

    另外,就是折叠标题后,太不明显了,比如我这个

    image.png

    2 回复
  • soltus

    你好,Sofill- 主题很重视折叠标题效果,正在优化折叠标题文字立体感增强 ,你有什么好的建议吗 ❤️

    1 回复
  • Bard

    多合一是趋势,考虑一下不trollface

    1 回复
  • Achuan-2 via Android

    不考虑,trollface 欢迎 pr

  • Nofood

    已经做得很不错了 👍 写代码确实磨人。改来改去的都不知道心中的完美是什么样了。。。

    image.png
    楼下某位主题开发者的注释huaji

    不是不想提建议,奈何水平太低提不出好建议。要不加个打字机模式?
    说到颜色拾取 vscode 有个插件可以让代码展示颜色。notepad3 也有这个功能。比从其他地方复制代码略微方便些。
    颜色拾取.gif

    1 回复
  • wickysi via macOS

    pink-room 主题用了快 1 个月了,挺好的,没有遇到什么问题。😄

  • StarDustSheep
    作者

    我想要的是把某个文件夹中使用过的所有颜色代码汇总起来,在修改颜色代码的时候能跳出它的界面,这样我就能看看之前是不是有用过很相似的颜色了。我还没找到这样的插件。或许在最开始选色的时候就应该按照某种设计规范来。

    1 回复
  • StarDustSheep
    作者

    之后会看看有什么好的样式能用的。有过很多想法,但苦于自己对 css 掌握得不够好的原因只选了目前这个比较保守的方案。

  • StarDustSheep
    作者

    加上这个数字是因为……思源默认的字色和下面的背景色啊,有些难以区分。尤其是背景色,太浅了,在白色的菜单背景上很难找到自己要找的那个颜色,有个数字就能比较方便地定位用。

    不过我最大的疑问就是,有多少人是在用思源这个默认的字色和底色,如果用,那用哪几个比较多呢……由于思源默认字体样式的局限性很大,不少主题都搞了自己新的标准。而我怕使用默认样式的人很多,且已经做了不少标注了,所以就没修改默认的字色和底色的标准,以免用户被主题的字体样式标准“绑架”。

    最近加入的公共 CSS 片段应该能解决这个问题,我会再研究研究其他主题的标准,看看要不要也将我自己的标准变成默认。当用户能容易找到自己想要的样式的话,也就不需要这什么编号了。

    image.png

    image.png

  • StarDustSheep
    作者

    我之前也做过立体感很强的样式,最后我自己用起来都难受。如果立体感很强,注意力很容易被吸引,这导致在阅读其他部分文本的时候会受干扰。如何做好这个平衡是件很困难的事。

    1 回复
  • StarDustSheep
    作者

    我并未学过计算机,对 CSS 的学习了解很浅,很多功能和效果不知道怎么做才好。所以是尽量不在原版上做过多修改,一加功能,就有可能有各种问题需要解决(我在群里看他们经常为了这些功能做了很多工作),我觉得目前我是没能力和精力加上太多功能。

    隐藏顶栏有个问题是鼠标直接移动到屏幕边缘试图点击页签的时候,其实会点到顶栏,故不能进行页签跳转。这和使用浏览器时轻松拖动鼠标滑到顶部就能切换页签的体验不一样,所以我一直觉得这个设计还是有很大缺陷,体验不是很好,所以没想去做过。

    至于侧栏,新版本思源可以在右下角手动隐藏了。

    一键切换颜色的功能是 Dark+ 作者帮我弄的 😂 ,我不会 JS。因为有些人不是很喜欢粉色嘛,实际上粉色界面确实容易让人思绪躁动起来,有些难以专心。所以我就做在界面结构没变的情况下又做了两套配色。

  • soltus

    确实很难平衡,现在的设计趋势都是扁平化

  • Nofood 1

    比方说编辑 蓝色.css 的时候,它会提醒你这个颜色(或代码)在 绿色.css 里用过?我不知道是否有编辑器能支持。现在大多数编辑器都支持重复项高亮。但应该满足不了你的需求。

    说到先定义选色规范。VS code 的插件 Color Manager 或许能帮到你。它可以自建调色板,这样不管是编辑哪个文件都能插入设定好的颜色。也能搜索代码中的颜色导入调色板。

    颜色拾取 1.gif

    你的主题配色很好看,不愧是学美术的。尤其使卷轴模式配上背景图。
    但是我的眼睛觉得太亮了。所以。。。暗色主题什么时候出,来个五彩斑斓的黑huaji

    1 回复
  • StarDustSheep
    作者

    我现在手里有之前的宇宙风格暗色主题 Stardust 的代码还没整理。暗色主题是全新的一套设计了,需要花不少时间去调整至能用的状态,而 pink-room 就已经让我有些猪脑过载了,所以就一直没重构它的代码。

  • profox

    哈哈 我也常用粉色主题的,那也说两句:

    标题与上下块的间距,可否不要搞成目前的等距?我建议尝试一下上宽下窄。

    逻辑是这样的:标题是向上分断,向下包含的。距离上块距离宽,有分离分段感;距离下块距离稍窄,有引领聚合感。

    1 回复
  • StarDustSheep
    作者

    下个小版本给标题加大外部上边距

请输入回帖内容 ...

推荐标签 标签

  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖 • 2 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    7 引用 • 28 回帖 • 2 关注
  • AWS
    11 引用 • 28 回帖 • 8 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 189 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 312 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    730 引用 • 1282 回帖
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    268 引用 • 666 回帖 • 1 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 350 关注
  • RemNote
    2 引用 • 16 回帖 • 25 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 677 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 441 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖 • 1 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 567 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 766 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖 • 1 关注
  • 导航

    各种网址链接、内容导航。

    45 引用 • 177 回帖 • 3 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 4 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    24 引用 • 242 回帖
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    86 引用 • 165 回帖
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 1 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    180 引用 • 3879 回帖 • 2 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 59 回帖