GithubHelp home page GithubHelp logo

zxx.lib.css's People

Contributors

sunshuzhou avatar zhangxinxu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

zxx.lib.css's Issues

小小建议

您好。建议您的文件名使用 zxx.css 和 zxx.min.css,这样更短且和 jQuery、Bootstrap 这种常见库相匹配,且一般没有哪一个库文件自己给自己贴一个 lib 的哦,是画蛇添足了。-min 改成 .min 也是为了统一。

另外建议把库文件推送到 staticfile.org、cdnjs.com 这一类的公共 CDN 上去,方便大家直接调用。

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

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

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

透明度

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

几个小建议

前言(废话):
-- 最近在用node写一个后台的统计信息系统,架子在重新搭,以前也写过一些general的样式,主要是为了把一些手贱写在标签style中样式抽离,也有一点省事、节省css代码的考虑。
-- 这两天看布局,偶然看到你这个lib.css,基于造轮子的想法,直接拿来用了,用了这两天发现一些小问题,提供几个意见,能提供思路最好,不成熟的话就当个吐槽随便看看。

  1. 建议将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。

  2. 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应该算是大势所趋,太多的框架已经做出了选择。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.