• 关于国内某个软件代理商代理的CorelDRAW系列软件,如果各位需要正版请访问corel官方网站,不要访问带有china的网站!!!反正话是放在这里了,听不听随你
  • 如果遇到文章图片不显示请联系管理员处理,谢谢
  • 欢迎访问寡人的吐槽胜地,我们真的只是吐槽,不谈技术,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 版权声明:大部分文章是从网上复制的!并不表示全部都是从网上复制的!
  • 如果遇到文章图片不显示请联系管理员处理,谢谢
  • 关于国内某个软件代理商代理的CorelDRAW系列软件,如果各位需要正版请访问corel官方网站,不要访问带有china的网站!!!反正话是放在这里了,听不听随你
  • 如果遇到文章图片不显示请联系管理员处理,谢谢

15个优秀的 CSS 解决方案和工具

网页设计 解答问题的小白 3年前 (2016-05-10) 373次浏览 已收录 0个评论

CSS 代码是很难管理,尤其是在大型项目。 样式都写在一个全局作用域里,通过复杂的选择器来指向特定的页面元素。冗余、膨胀和维护可以成为前端开发人员的一场噩梦。幸运的是我们有一些 CSS 工具来帮助开发者克服这种情况。这里集合了 15 款个优秀的 CSS 解决方案和工具,分享给大家。

1. Ballon.css

Balloon.css lets you create simple tooltips with pure CSS. It requires only a few lines of CSS to work, and no JavaScript. Also keep in mind that if pseudo elements are already in use on an element, the tooltip will conflict with them resulting in potential bugs.

2. Hugo

Hugo is a static HTML and CSS website generator written in Go. It is optimized for speed, easy use and configurability. Hugo takes a directory with content and templates and renders them into a full HTML website. Hugo relies on Markdown files with front matter for meta data. And you can run Hugo from any directory. This works well for shared hosts and other systems where you don’t have a privileged account.

3. Atomizer Web

Atomizer Web
Atomizer is a tool for creating Atomic CSS. Generate an Atomic stylesheet dynamically from the Atomic classes you’re actually using in your project (no unused styles!), or predeclare styles in configuration – it’s up to you. Atomizer is not opinionated, brings no CSS of its own, and integrates nicely with your favourite task runner.

4. Repaintless

Repaintless.css in a lightweight animation library that consists only of animations that don’t cause reflows and repaints of a website when used correctly. The idea for a library came after seeing the talk by Paul Lewis on animations and FLIP technique. Basic idea is to remove transition from element, not to apply it while animating. It saves user a tiny lag before animation starts and feels super smooth. To understand the concept better you can read a blog post on that or at least this quote from the post:

5. Bemify

Bemify is a set of Sass mixins for writing maintainable, idiomatic, well-structured BEM-style .scss source code. It can be installed as a Ruby Gem, NPM module, or via Bower.

6. Stellar


Stellar is a LESS library that helps you scaffold your web apps. It’s simple to use and supported on most modern browsers.

7. StringBean

The featherweight responsive CSS Framework based on a 24-point system, rather than the traditional 12-point system that other frameworks use. Sometimes, 12 is just too few, especially on a high resolution screen, such as 4K – at 4K String Bean comes into its own! This gives the developer the power to divide the screen up in more finite segments providing you with greater control over the widths of content on your site, especially at higher resolutions (think HD & UHD (2K, 3K, 4K, and above).

8. Min

Min is a super tiny CSS framework, coming in at only 995 bytes. It has exceptional browser support and semantic markup. Min is extremely lightweight and doesn’t prescribe a certain design for you, like Bootstrap. It’s easy to override the default rules since there are so few of them and they are at low specificity levels. This customizability helps you avoid the Yet Another Bootstrap Site phenomenon.

9. Voxel.css

Voxel.css makes it easy to render 3D. It supports all image types and includes GPU acceleration and CSS3 transitions.

10. Timelined

Timelined is a CSS-only vertical timeline that’s fully customizable. You can use it to create static or dynamic timelines.

11. Colorfilter

Colofilter.css lets you easily add duotone filters to photos using CSS. It’s a cool effect, but doesn’t work in every browser, so make sure you don’t use it on anything mission-critical.

12. UnMQ

UnMQ removes media queries from your CSS while preserving rules that match a hard-coded viewport. It’s useful for outputting CSS for older desktop browsers, like IE8.

13. Utlity Open Type

utility open type
Utility OpenType offers simple, CSS utility classes for creating advanced typographic features. It includes common and discretionary ligatures, small caps, case sensitive forms, and much more.

14. Flexbox.help

Flexbox.help lets you test CSS flexbox rules live. It’s a great sandbox for figuring out how best to use flexbox.

15. CSSketch

CSSketch adds CSS support to Sketch 3 to speed up your workflow. Just attach a stylesheet to your designs to quickly change colors and shadows, lay out your design, and more.

本站大部分资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费内容,请在下载后 24 小时之内自觉删除,若作商业用途请购买正版;如果有版权争议,请发送邮件至 master@digac.cc(请留下写明原因和文章链接),我们将及时处理,谢谢!

喜欢 (0)

表情 贴图 加粗 删除线 居中 斜体 签到


  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址