zhangxinxu / zxx.lib.css Goto Github PK
View Code? Open in Web Editor NEWa css library for quick layout, especially for flow layout
License: MIT License
a css library for quick layout, especially for flow layout
License: MIT License
说直接点,就商业应用案例不?如果有,能不能贴几个出来学习下
在单一样式中,设置高度部分,高度设为14px的类应该是.h14。
.opa0{opacity:0; filer:alpha(opacity=0);}
是不是应该.opa0{opacity:0; filter:alpha(opacity=0);}
前言(废话):
-- 最近在用node写一个后台的统计信息系统,架子在重新搭,以前也写过一些general的样式,主要是为了把一些手贱写在标签style中样式抽离,也有一点省事、节省css代码的考虑。
-- 这两天看布局,偶然看到你这个lib.css,基于造轮子的想法,直接拿来用了,用了这两天发现一些小问题,提供几个意见,能提供思路最好,不成熟的话就当个吐槽随便看看。
建议将css迁移或者重构为sass:
-- 原因:zxx.lib.css中"single CSS"里面,多是一些很碎,很杂的style,一般得需要三个以上的组合才能达到自己想要的效果。
-- 栗子:就拿字体来说,为了实现白色宋体24号字(就不考虑背景色的问题,不然又需要叠加),这样这个元素的class必然需要class='f24 fs wh',再加上一些需要自定义的属性,就需要更多的class,整个结构看起来就很烦。
-- 建议:将css迁移到sass中,或者用sass重写,比如一些明显循环的f0-f24就可以用sass里面的【@for】实现循环,简单明了。关键是sass可以自动编译为min.css,也实现了另一个issues提出的压缩css。
class的长度和构造:
-- 原因:你里面大多是吧每个样式单词的首字母拼接构成一个class,固然使每个class的长度减短,便于快速代码编写,但是不可避免的出现的常见的问题:命名冲突。
-- 栗子:.fa{font-family:Arial;}。图标库Font Awesome中,v4.0后,图标库的使用class的标示就是"fa",这个class刚好跟他冲突,如果使用Font Awesome就必须把这个class从css删除或者改为其他的。
-- 建议:
<div style="display:none;"></div>
改为<div class="dispaly-none"></div>
,后来发现这种写法只是将style抽离、减少了回流、增强了代码的可读性,并不能真正的快速代码编写,因为最简单的看,字母和字符的数量并没有减少。..ml-05em {margin-left: 0.5em;}``.ml-10em {margin-left: 10em;}``.ml-8 {margin-left: 8px;}``.ml-40 {margin-left: 40px;}
,这样基本降低了代码量,而且基本能在mobile和pc端通用,毕竟mobile中px的鸡肋很烦。跑偏了有点远,说点有用的:
这种 .dn{display:none;} .di{display:inline;} .db{display:block;}
,我认为是class过短了,很容和其他的库或者未知人的代码冲突,建议使用-连接或者添加整个单词来作为class,比如dnone,这个样重复的概率明显降低,而且可读性比'dn r tl'略高(dnone,fring,ta-left)。
其实每个人/项目,每个css都有基于业务的独特解读,如果要通用就必须牺牲一些东西。
所以取舍在于你,但是css转向sass应该算是大势所趋,太多的框架已经做出了选择。
您好。建议您的文件名使用 zxx.css 和 zxx.min.css,这样更短且和 jQuery、Bootstrap 这种常见库相匹配,且一般没有哪一个库文件自己给自己贴一个 lib 的哦,是画蛇添足了。-min 改成 .min 也是为了统一。
另外建议把库文件推送到 staticfile.org、cdnjs.com 这一类的公共 CDN 上去,方便大家直接调用。
个人的小小建议,不一定对,仅仅是个人观点。希望考虑,谢谢!
个人任务通过类来构建的具体样式的框架,比如.mb20{margin-bottom:20px;}这种具体样式,只适用于特定的公司或者项目,其他公司可能不会有如此多的具体样式需要调用,而且现在有sass等预编译语言了,如果是出于快速开发的考虑,可以通过sass来引入具体的样式,这样可以避免过多的具体的样式嵌套在html中。张老师的git库都很值得小辈学习,我会继续研究
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.