seo都用在哪些网站,岳阳市交通建设投资公司门户网站,广州建设银行投诉网站,江苏营销型网站推广atom.css 大家好#xff0c;我写了一个css库atom.css#xff0c;蛮好用的#xff0c;所以忍不住分享给大家。(https://github.com/MatrixAge/atom.css)起因写HTML几年了#xff0c;再到如今的JSX#xff0c;最大的感受不是枯燥#xff0c;而是眼花。写样式的时候#xf… atom.css 大家好我写了一个css库atom.css蛮好用的所以忍不住分享给大家。(https://github.com/MatrixAge/atom.css)起因写HTML几年了再到如今的JSX最大的感受不是枯燥而是眼花。写样式的时候往往需要在HTML/JSX文件和CSS文件之间来回切换眼球频繁转动再加上大屏刺眼很容易引起眼疲劳如果个人有抽烟喝酒或是玩手游的习惯每天早上起床眼睛里都会有血丝时间长了就容易引起眼疾。于是乎经过一段时间的归纳我做了一个写界面样式的新方案—atom.css。事实上从这个想法出来到我做开源项目这之间我还犹豫了很久因为atom.css做的一些事情很平常无非就是把CSS属性写成一个独立的class在这之前很多UI框架基本上都是这么干的所以我也有些怀疑这个开源项目的必要性这之后我开始思考atom.css能带给开发者什么atom.css和那些UI框架有哪些不同凭什么让其他开发者放弃框架来使用atom.css直到我看了GitHub新版首页的源代码GitHub的部分页面也使用了的atom-style CSS这时我才肯定了我的想法我是对的。div classborder rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-searchspan classjs-jump-to-badge-search-text-default d-none aria-labelin all of GitHubSearch/spanspan classjs-jump-to-badge-search-text-global d-none aria-labelin all of GitHubAll GitHub/spanspan aria-hiddentrue classd-inline-block ml-1 v-align-middle↵/span
/div很多东西推演使用到极致它就有了不一样的意义。我将atom.css定义为提供基础类的CSS库一个class对应一个单独的CSS属性与Bootstrap、Ant Design等UI框架提供的块状CSS不同的是atom.css单一属性class将各种CSS块状属性解耦开发者在书写模板时拥有了极大的自由在布局时基本上不要去写单独的CSS而这为后续开发和维护提供了足够的灵活性。atom.css更为强大的一点是它极大地缩短了开发者书写模板的时间也就是说让开发者有更多的时间去关注业务逻辑让许多业务特别重的开发人员可以更快地完成工作任务晚上有更多的时间用来陪家人和朋友。来源atom.css的灵感来源于有机化学。在有机化学中元素作为最小单位构成各种有机物不同的元素经过排列组合可以形成不同的有机物再由这些有机物构成物质。atom.css将常用的CSS属性转换成单一的class比如display:flex转化为.flex {display:flex}当我们在使用HTML写页面骨架的时候你就可以一边写结构一边写样式省去了一部分在写完HTML结构之后再去写界面样式的时间。.flex{display:flex;
}.justify_center{justify-content:center;
}.align_center{align-items:center;
}.left{float:left;
}.right{float:right;
}atom.css符合当下流行的css in js的设计理念当你熟悉它的“表达方式”之后你再也不想用什么框架了而且它还可以加深你对css的理解最重要的是它构建用户界面超快内容atom.css目前有100个单元class,足以应对页面布局的大部分CSS,atom.css的更新频率是每个星期天更新我会搜集同事以及个人还有其他开发者的需求整理衡量之后进行更新我的愿景是让atom.css成为一种标准甚至在未来HTML原生就支持atom.css以下即为大部分class:用法Full example:div classw_100vw h_100vh flex justify_center align_center bg_yellow color_333 font_bold font_64Example
/divOutput:可能有人会觉得这样写看起来不怎么样但是当时熟悉了在HTML/JSX中使用atom.css写CSS那便-一发而不可收拾那相信我你绝对会爱上这种写法这样写是会上瘾的最后atom.css使用的是MIT协议还是很自由的!我的初衷是优化工程架构减少重复性工作让广大攻城狮同胞有多余的时间来享受一下生活。欢迎star,欢迎pull requests,只有两点要求一是要遵循下划线的命名规则二是保持class的单一属性原则。下划线命名规则与驼峰命名相比可辨识度高一些易于语义化不采用中横线是因为中横线会造成视觉障碍对于语义化不是那么友好class的单一属性原则是atom.css的核心这是一定要遵守的不过后续可能会增加私有变量和原子组件的class希望大家继续关注atom.css谢谢!https://github.com/MatrixAge/atom.cssgithub.com
