zhangxinxu / zxx.lib.css Goto Github PK

a css library for quick layout, especially for flow layout

License: MIT License

CSS 100.00%

zxx.lib.css's Introduction

zxx.lib.css - a quick CSS layout library

If the UI of your page is simple, meanwhile, you want to construct web pages quickly, this CSS library is very useful for you! Introduction

As you known, some CSS styles are used very frequently. For example, display:none - the most commonly used method for hiding elements, visibility:hidden - a very useful method for hiding elements, and so on.

Actually, zxx.lib.css is a collection of these styles. It includes display, margin, padding, color(web safe color), font refer, vertical-align, float, ..., and many other common styles. In addition to these styles, some group styles that I think useful are also in.

All the names of the CSS in zxx.lib.css are short names. For example, .dn instead of display:none, .db instead of display:block, ...

Note

I recommend that zxx.lib.css should put behind after other CSS file! As shown below:

<link href="a.css" rel="stylesheet" />
<link href="b.css" rel="stylesheet" />
<link href="zxx.lib.css" rel="stylesheet" />

License

MIT

Donate

支付宝	微信

zxx.lib.css's People

Contributors

Stargazers

Watchers

Forkers

kingxsp googleask woofgl double-lv sevenzqi sjmlsxp bennyzhao asklaterzaneli kpbiao cowboy13 lcco c2ye sisihuisi xiaoxie110 jinzhengdu bigmuffin killsos mayte1990 sqqihao zhengjunwei woodennail knight-peter penguin-star paddingme neallin liuguofeng719 liuwei3230 baozheliu ifa6 gavinhans fucssjs fujscss bh032 wannasing hhhgame ihaveyou lipeng449210230 zhuqiuyang xyeig shach1990 wuxuejian wukejiong yimi-shan joykuang sunshuzhou yunlulu zzsoszz kevin1220 xiaojinbao xinyeweiliang luyongfugx woaijorden liyunxu362802482 chanyanping yymmlin yy201506 akan webin zchuhui annykai jsupot trickyedecay leizhengzi zhaobi muacoding younyzhu kulee9527 penghuajun2016 amamatthew lolipop99 liuxiaomin922 aben1188 nasosinusitis pdap msi1979 jekin6 weiqihao willhu85 ryli dhj2020 bb36241189 hanxyan liuwqgit tianfeiweb yousetme bobycode jutleo cynqu mj1283217 caobr swallowlong liuyu666 wenjie-rb2 studyzhb sunday-web mashubin lion-git numlock1541723923 yaoxiaojuan michaelwty

zxx.lib.css's Issues

透明度

.opa0{opacity:0; filer:alpha(opacity=0);}
是不是应该.opa0{opacity:0; filter:alpha(opacity=0);}

对具体的表现性class类的观点

个人任务通过类来构建的具体样式的框架，比如.mb20{margin-bottom:20px;}这种具体样式，只适用于特定的公司或者项目，其他公司可能不会有如此多的具体样式需要调用，而且现在有sass等预编译语言了，如果是出于快速开发的考虑，可以通过sass来引入具体的样式，这样可以避免过多的具体的样式嵌套在html中。张老师的git库都很值得小辈学习，我会继续研究

张老师，发现一点点小错误

在单一样式中，设置高度部分，高度设为14px的类应该是.h14。

感觉是不错的，不知道张老师把用在大型网站上过吗？

说直接点，就商业应用案例不？如果有，能不能贴几个出来学习下

几个小建议

前言（废话）：
-- 最近在用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删除或者改为其他的。
-- 建议：
- 早期我写general.css的时候，基本都是最简单的style抽离，即把<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的鸡肋很烦。
- 再后来，看了sass和bootstrap的less写法，发现很多东西可以构造为模块化（或者叫做组件化），于是开始各种类'bg-danger/bg-primary'这种代表一定聚类的写法，然后用sass或者less的变量去动态编译到对应的css，再用起来比较舒服。而且可以把一些通用的单体样式（你的这种signal-css）聚合成一些集合去用。发现效果不错，只不过一个最大的缺点就是很难做的通用，整体sass切换到另一个系统后，如果风格不同，就需要改变较为多的变量。

跑偏了有点远，说点有用的：
这种 .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 上去，方便大家直接调用。

个人的小小建议，不一定对，仅仅是个人观点。希望考虑，谢谢！