组织CSS代码的结构化方法 [英] Structured way to organize CSS code

查看:100
本文介绍了组织CSS代码的结构化方法的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当建立一个相对较大的网站时,CSS结构应该从头开始进行适当的范围和组织。如果没有使用CSS框架,那么一切都可以集成到一个庞大的样式表,但这将很快失灵,并可能成为一个巨大的维护责任。

When building a relatively large website, the CSS structure ought to be properly scoped and organized right from the begininning. If no CSS framework is used then everything can be lumped together into a massive stylesheet, but this will very quickly get out of order and can become a huge maintenance liability.

在过去的几年里,我把我的样式表分成了各种文件,包括:base.css,layout.css,fonts.css,elements.css,但是很容易的样式定义可以在文件之间跳转,这种方法需要更严格。我没有使用框架,因为我不是预置列和预定义元素的风扇在我的CSS代码。

For the past few years, I've broken my stylesheets into various files including: base.css, layout.css, fonts.css, elements.css, but very easily the style definitions can jump between files and this approach needs to be more strict. I haven't used a framework since I'm not a fan of preset columns and pre-defined elements in my CSS code.

你可以使用什么方法,模式或提示家伙建议保持组织?什么样的命名约定,可重用性实践和模式是有用的?这是一个框架应该用于?

What approaches, patterns or tips can you guys suggest for keeping things organized? What kinds of naming conventions, reusability practices and patterns are useful? Is this something that a framework should be used for?

推荐答案

我曾经喜欢 LESS ,但现在我是 Stylus 的忠实粉丝,因为我认为它

I used to love LESS, but now I'm a big fan of Stylus because I think it makes even cleaner code than LESS/SASS/CSS -- no semicolons, colons, or brackets.

因为Stylus(和LESS和SASS)允许你定义变量和模板和函数,我有以下文件,应该按照以下顺序:

Because Stylus (and LESS and SASS) allow you to define variables and templates and functions, I have the following files, which should be in this order:


  • 重置 - Stylus版本 Eric Meyer的CSS重置

  • 变量 - 颜色,字体等变量。

  • 模板 - border-radius ,转场和清除
  • 的模板
  • 服务条款等)

  • reset - A Stylus version of Eric Meyer's CSS reset
  • variables - Variables like colors, fonts, etc.
  • templates - Templates like border-radius, transitions, and clearfix
  • Stylings for each page (homepage, app, terms of service, etc)

这些都是使用简单的构建脚本连接和编译到CSS。

These are all concatenated and compiled to CSS using a simple build script.

你可以看到这些样子;我为此内容 gitHub repo

You can see what these look like; I made a GitHub repo for this stuff.

这篇关于组织CSS代码的结构化方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆