我一直在尝试采用类似于 Brian 和 Andy 提到的风格。在阅读了一篇关于 BEM 方法的文章后,我开始创建代码段,将 HTML/CSS 代码组合在一起,用于常用的 Block+Element 组合,如上图所示,其中“我们的团队”包含包含图像、标题、文本和按钮元素的块。从一个项目到另一个项目,HTML 和 CSS 几乎相同。因此,我同意重用少量代码段以加快编码过程,并腾出时间进行更多实验和创造力。
目前我正在开发自己的工具。一个用于 WordPress 的框架,一个基于 LESS 的响应式网格系统,以及一个基于 LESS 的灵活 mixin 集合,我试图在每个项目之后改进这些工具。目标是将所有内容都发布为开源,到目前为止,我已经上线了 LESStools.org——这是一个开始,希望随着时间的推移它会变得更加完善。
我确实会重用一些 CSS,但不会像整个布局那样完整。主要是因为我发现每次做的时候都能做得更好,因为我学到了更多……但我也觉得,过度重用代码会导致网站在本质上过于相似。每个设计都应该独一无二,即使它们是由相同的构建块构建的。我确实一直重用组件。
我完全同意。如果我想做一个非常快速的网站,并且它只会使用一周,我可能会使用 Bootstrap 或类似的框架。但是,如果它更重要,我会从头开始设计,也许会实现过去的想法,但绝不会仅仅更改内容。
关于提高网站设计水平:只是为了好玩,我最近打开了我的第一个网站;当时我为此感到非常自豪,但是……它很糟糕。它颜色单调,没有响应性,也不酷,而且完全基于表格,使用字体标签和过时的标准。现在我的网站更好了,但我不知道十年后回头看它们会怎么想。
我也是。特别是你说“每次做的时候都能做得更好,因为我学到了更多”的部分,这正是我对可重用性问题的见解。虽然我每次都会保持一些基本结构方法,但我倾向于从头开始编写每一行代码。这让我从开始到结束都有一个外围的概念!
好的!我不得不说这个讨论很棒!谢谢。
除了 normalize.css 和几次 Bootstrap 尝试之外,我还没有一次重用过一个以上的类。我真希望我能够更频繁地重用 CSS,但它似乎从未奏效。
我也是。
如果你正在做一个有不可理喻的时间线的固定价格项目,不重用一些组件就太傻了。我保留了一个常用资产库,例如带下拉菜单的水平导航栏或基于 CSS 的表格——这些东西从头开始构建需要花费时间,所以为什么还要费事呢?当然,我一直在寻找更好的方法,因此当我找到更好的选择时,我会替换这些组件。
很多时候,我可能会复制一个接近我正在做的新设计的旧网站,然后根据需要添加或删除 CSS。
这基本上也是我所做的。当然,我几乎所有开发的网站的重置 CSS 都是一样的。对于布局样式,我做了一些小的改动,瞧!
我也是!
我也会复制类似的旧网站,然后重建需要更改的部分。我还会发现自己重用按钮、精灵图和其他类似的小东西的代码。当然,我需要更好地定义我的可重用部件,以便将来节省时间。很好的讨论!
没错!在完成几个网站后,我们总是有很多 CSS 可以重用。每个新项目我都会查看样板、normalize 和其他一些项目的最新趋势。**CSS Tricks** 也是我的向导。在将 **LESS** 设置为我的默认 CSS 预处理器后,一切都变得更容易重用。
是的,我会尽可能多地重用我已编写的 CSS。对于这样的网站,我会重用我在其他地方开发的任何模块化部件。对于每个网站,目标都应该是将所有可能重复的部分模块化。当然,并非所有内容都可能重复,因此,我通常会将其放在一个特定的样式表中,仅在特定网站上使用。但每个新网站都应该被用作改进/增强你的代码库的机会。
我不重用 CSS。我记得我之前工作中喜欢的实践,并在我的项目中实现它们。我参与的每个项目通常都与之前的项目不同。但是,我确实发现自己会重用 JavaScript。
当我知道我将重用样式(大型项目,大量模块)时,我通常会创建一个 Compass 插件,以便能够更轻松地在多个项目/工作区中使用这些样式。
我很少复制整个样式表,因为我的计算机科学教授坚持认为重复代码是一场灾难(而且有充分的理由)。
我喜欢重用代码,但不会盲目地重用,因为 CSS 和我的技能会随着时间的推移而发展。因此,我可能不会每次都以相同的方式解决问题。但我尽量避免一遍又一遍地重新发明轮子。但这不仅仅是重用 CSS,还有 JS 和后端代码。
如果开发人员需要一个网站的登录功能,他们会从头开始编写吗?我敢打赌很少。他们会使用现有的项目(例如 WordPress 等 CMS)或框架的模块化组件(例如 Rails gem)。
是什么使后端代码更易于重用?
我认为后端代码更容易重用,因为其功能是具体的、字面上的,并且受到严格的约束。设计功能更加模糊,并且受除了完成一项特定任务而编写的代码之外的更广泛因素的影响。登录功能始终执行相同的操作,但页眉块每次都会执行不同的操作。
我认为 Zak 说到了点子上,它通常更紧凑,更容易驯服。
是的,页眉块在块内可能表现不同,但可重用的东西是诸如导航系统类型、网站的通用布局,一直到遇到的特定问题。代码就是代码,你应该有一个包含用于解决问题/情况的代码的文件夹。(或者你想要如何管理它)。
一旦你做了一次,就没有必要浪费时间从头开始编写所有内容。
无论好坏,大多数代码都旨在执行一项操作,并且通常只以特定方式在特定上下文中执行该操作……想想 OOP 类中的方法。
但是,CSS 应该以多种方式在多种上下文中使用。CSS 必须更灵活,因此应该更多地被认为像 Lisp(或者更好……Scheme,其中你有一组有限的基本结构,并且所有更复杂的结构都必须组合而成)。如果你能以这种心态来思考,CSS 就和可重用一样。
问题是 CSS 不仅仅是三个基本结构,它有很多。此外,虽然渲染方式有文档记录,但它很难学习,并且学习曲线很高。因此,人们需要很长时间才能足够舒适地以抽象的方式思考 CSS,从而促进代码重用。
是的!这就是我喜欢 OOCSS、媒体对象、抽象等理念的原因。你可以构建一个结构库并将其应用于你的设计,而不是重用设计本身。
汽车制造商有时会在不同的汽车上重复使用相同的引擎、框架、变速箱等,但他们不能重复使用相同的车身并称之为不同的汽车。
但话虽如此,我倾向于重用标记模式和类名,但由于设计的原因,CSS 总是以不同的方式结束。
我同时开发前端和后端。我更多地重用后端代码而不是 CSS 的最大原因是 CSS 更容易记住。与其从过去的项目中提取代码片段,不如我自己编写可能更快。
我认为代码更容易重用,因为没有人真正关心它最终是什么样子。前端是每个人都能看到的,每个人都想对它的外观发表意见。后端有如此多的客观工作方式,只要使其工作即可(显然,它可以进行调整和优化以使其工作得更好更快),前端则更主观——并且依赖于内容。每个网站都希望拥有不同的内容,因此外观也将有所不同,并且应该具有不同的前端代码。我认为我们可以在前端重用技术,但是重用代码?不,我每天都选择手工制作。
我构建的大多数网站在许多方面都非常不同,并且,就像@Zak提到的那样,我喜欢认为我正在改进我的工作,使代码更加独特。但是,我最常重用的技术或“技巧”。有时我发现自己试图记住如何实现某种效果或任务,然后返回到我以前的一个网站。
无论哪种方式,如果我们只是像所有相同的东西一样复制 CSS,那么当 CMS 可以做到这一点时,为什么要雇用一个人呢?我的两分钱。
对于诸如阴影、文本效果、按钮和其他小型项目之类的实例,我认为重用代码完全可以。
在重用完整的样式表时,我认为您冒着不了解代码每一行的风险——这是我尝试做的事情(在大多数情况下)。您还可以减少潜在的浪费代码量,从而潜在地减小文件大小。
同意,像阴影、渐变等特定的“效果”一直被重复使用。当我们开始从一个设计到下一个设计一起重用布局和“氛围”(使用@malarkey的术语)时,我们就会陷入麻烦的境地。
模块化对象是重用 CSS 的一种好方法,它也易于快速重新设置样式以变形或适应新的环境或上下文。
例如,Twitter Bootstrap 下拉菜单。实际上,它只是一个包含链接的容器。如果您想更改从一个站点到另一个站点的下拉菜单的外观,请使用完全相同的标记和 CSS,但将“skin”类添加到父对象,然后砰的一声,您就得到了一个完全不同的东西。
很少有对象/模块具有高频使用率,可以使普通用户能够快速识别、导航和与之交互?而且,如果这些高频对象发生太多突变,则会降低转化率、易用性、参与度等风险。
我完全赞成重用 CSS。然后让它看起来好像我完全没有重用。
这通常也是我的做法。当我发现自己重复使用一小段代码时,我会将其放入 Coda 中的代码段库(如果很重要,甚至为其分配一个 Tab 键)。这样它们总是很方便,我不必翻阅过去的项目来找到它们。
重用整个样式表对我来说感觉不对,就像我违反了创新和原创性的原则。我想它属于使用模板的同一类别。我只是无法让自己这样做。
我一直在尝试采用类似于 Brian 和 Andy 提到的风格。在阅读了一篇关于 BEM 方法的文章后,我开始创建代码段,将 HTML/CSS 代码组合在一起,用于常用的 Block+Element 组合,如上图所示,其中“我们的团队”包含包含图像、标题、文本和按钮元素的块。从一个项目到另一个项目,HTML 和 CSS 几乎相同。因此,我同意重用少量代码段以加快编码过程,并腾出时间进行更多实验和创造力。
我认为 CSS 永远无法像面向对象编程中的类那样“可重用”。当您设计一个新站点或任何内容时,无论它与您之前的项目有多相似,您都需要更改此处和那里的某些细节的可能性都很大。
当然,如果您需要,您可以将旧代码复制到新项目中,但这并不是我们所说的真正的可重用性。也许在 CSS 中引入整个 OO 范式?我不太了解,因为我没有时间玩 SASS 和此类工具。
如果时间通常是一个问题,那么您负担不起不使用 SASS 或 LessCSS 之类的东西以及 Less Elements 之类的集合。设置需要一些时间,但最终可以节省大量时间。
后端是一个函数,登录函数在很大程度上都是一样的。CSS 是样式——根据我的经验,没有人希望拥有与其他人相同的样式,但同样,如果他们确实如此,不妨获取预先打包的模板。
我确实会重用某些通用模块——导航、按钮——但在大多数情况下,我都会重写我的 CSS,尤其是在我遇到我想尝试的新技术时。但是,我确实会从 HTML5Boilerplate 开始。
没有,除非它写得更干净。我尝试划分我的 CSS 以使其更具可重用性。使用不同的部分,可以轻松地为不同的站点更改一种字体或颜色,或者只使用适用的部分。
我从不编写特定于我正在处理的站点的 CSS,除非有一个一次性自定义页面及其自己的样式。否则,它真的会违背目的,并且雕刻相同的东西会变得非常无聊。我不使用 LESS 或 SASS 来“加快开发速度”,我只是编写可以一次又一次使用的正确 CSS!
CSS 不是“代码”。就是这样,尽管我并不是说它不能发展或其他什么。
我不同意。仅仅因为它没有 for 循环或逻辑并不意味着它不是代码。代码只是一组抽象的书面指令。
与其说不是代码,不如说它不是图灵完备的?
它缺少许多让你重用东西的功能,而且,除非你想让东西看起来完全一样,否则你不能仅仅重用东西。这个项目可能需要 5px 半径,而另一个项目需要 10px 半径和绿色边框……
像 Sass 和 Less 这样的东西使混合和其他内容可重用。
我认为我们需要组织编写 CSS 的方式。然后您可以考虑重用代码。SMACSS 和 OOCSS 是不错的做法。结合 LESS 或 SASS 等 CSS 预处理器的强大功能,重用代码非常容易。
胡说。CSS 由浏览器读取并执行。那就是代码。
问题在于 CSS 实际上是汇编语言,也很难重用。
重用问题的答案是更高级别的编程语言。查看 Less CSS。变量、混合、函数、导入、编译。
这似乎更多地与工具而不是目标或工件有关。
像任何设计编码一样,一切必须从头开始(意味着使用像 html5bolierplate 这样的模板),但永远不要从另一个布局中复制/粘贴大量 CSS,我认为 CSS 不应该被重用——重用它只会让你变得懒惰,并且不会给你在编写布局时发挥创造力的空间。
我相信通过从头开始编写代码,有时你会发现新事物,编写同一行的新方法,或者可能是一种不错的意外效果,但这是我的观点……无论如何,这是一个好问题!
重用 CSS 是懒惰的吗?
这就像告诉房屋框架工使用钉枪是懒惰的。我敢打赌他会回答,是的,我就是那个懒惰的家伙,在我花在你建一堵墙的时间里建了 4 座房子!
我怀疑大多数设计师不重用 CSS 的原因有很多。但也许那些指责他人懒惰的人是在掩盖他们自己的懒惰。如果您仍然使用原始 CSS 编码,而不是使用 Less 或 Sass 或 Stylus 或其他一些预处理器,我敢打赌这是因为您还没有尝试过。现在这才是懒惰! :)
从重置开始是一种简单的重用形式。大多数网站都有页眉和页脚。带有站点树的长页脚对于 90% 的网站来说是一个极好的设计。看看您的浏览器历史记录。挑选出您访问的前 100 个站点。您访问的 99% 的布局和视觉功能工具都在 Twitter Bootstrap 中。您学过这个了吗?如果您不使用它,因为您认为它会限制您的创造力,那么也许您并没有那么有创造力。一切都可覆盖。它是 CSS!为什么还要再次编写“鼠标悬停时突出显示行”(这也是极好的设计实践),因为它内置在 .table 类中?
使用 Twitter Bootstrap 的另外两个好处是
1. 您将学习编写更好的 CSS。您真的认为您比发布 Twitter Bootstrap 的人更优秀吗?好吧,发布你的东西吧,你这个自私的混蛋!世界需要它!
2. 团队合作。我敢打赌,我可以接手任何基于 Bootstrap 的项目,并且比在其他人的手工项目上工作的最佳设计师的生产力高出一个数量级。任何使用过一周的人都知道以下代码的作用。
.row
.span3
.span9
我挑战你在你的项目中发布类似的 CSS 代码,这些代码能够传达上面 15 个字符信息中的 1%。
如果你认为所有基于 Bootstrap 的项目看起来都一样,那是因为它们在做好时,确实不一样。那些没有做好,看起来比它们不使用 Bootstrap 时要好。
如果你在项目中编写超过 10% 的 CSS 代码,那么你没有花足够的时间学习如何更好地完成它。(可能是因为你没有时间)
“好的程序员编写好的代码,伟大的程序员复制伟大的代码”——一位比我聪明的人。
(看看代码复用有多有效!)
后端代码和 CSS 的可重用性之间的差异很小。
更重要的是,编程是一门更古老的技艺,所以我们有大师可以学习。学习似乎也更加根深蒂固。
此外,代码无法工作的影响通常是完全无法运行,而不是审美上的边际损失。(并不是说损坏的 CSS 无法使网站完全难以理解)。
但最重要的是,直到最近,随着 CSS 预处理器出现,我们才拥有了良好的工具来组织我们的 CSS 以便于重用。预处理器将编程的可重用性带到了 CSS 中。
很有可能,如果你是从事一些设计的程序员,你会发现很多方法可以重用你的 CSS 来增强你的创造力。如果你是设计师,从你的同行或编程同事那里学习重用模式可能同样具有赋权作用……也许更多。
我认为尝试将 CSS 打造成可重用块最大的风险在于,你可能会发现自己试图将设计限制在你的“可重用”构建块中,这只会导致网站看起来模板化且乏味。
你说得对!
我确实重用了很多代码。事实上,我有一个基础框架,我从它开始构建新的网站。编写可重用代码比人们想象的要难。重要的是针对功能进行重用,而不是设计或结构。需要考虑继承,并确保可重用代码不要太贪婪。最后,可重用代码需要有适当的命名空间,这样其他框架和自定义代码就不会受到污染。
编写旨在重用的 CSS 是否意味着它对任何一个网站的服务都比它本来可以提供的差?
这确实取决于很多因素。在项目中引入新的框架可能会影响其他框架。这可能是因为框架实现不当,或者需要某些 HTML 结构,而这些结构与现有框架不兼容。在为 WordPress 实现新插件时可以看到这个问题。你可能最终需要修改插件。
我认为最大的因素是 HTML。CSS 与 HTML 紧密耦合,而 HTML 与内容紧密耦合。不同网站的内容各不相同。因此,不同网站的 HTML 也不同,因此很难在不同网站中使用相同的 CSS,即使是少量部分。
非常正确,尤其是在涉及多个开发人员时。但我们想要这样吗?我认为内容和表现形式的紧密耦合是一个真正的优势。将我们的 CSS 分解成应用于所有地方的块可能对大规模的全局更改(全局字体切换、背景颜色)很有用,但我认为除此之外都是有害的。
该声明完全取决于你是否拥有 HTML。如果你拥有,那么不重用你的样式就太愚蠢了。
在你的示例中,HTML 保持几乎相同,你提到你一遍又一遍地重新制作类似的布局,并希望重用一些 CSS。如果你既是网站的设计师又是编码员,并且你没有更改你的 CMS,那么有理由认为你可以重用很大一部分 CSS。
显然,你可以重写它,并可能使其更好或重新思考某些东西,但这需要更多时间,本文的目标是尝试重用。我们将为你测试这个理论;我们正在完成一个网站的设计,其中博客部分与我们过去制作的另一个网站的不同博客部分的布局几乎相同,我们将尝试重用该部分/模板的 CSS。我会让你知道结果如何。
另外,如果你有一分钟时间,请查看 html5.mimoymima.com——我们为 WordPress 提供的样板——我们是代码重用的忠实粉丝:D
b r e n t
HTML 与 CSS 紧密耦合,但由于预处理器等(允许我们创建“函数”)的存在,它不会成为一个大问题(从 IE9+ [1] 开始)。
面向对象的 CSS 是一种非常有用的重用方式,但是有了预处理器,我开始欣赏其他编码方式。
例如,假设我们使用语义类和标签编写语义 HTML。然后我们可以在网站的 less/sass 中定义影响语义 HTML 的样式。这些样式将负责调用我们的 less/sass 库/基本框架的 mixin。
这样,我们可以维护一个庞大的有用内容库(就像 compass 作为基础一样),并且可以在任何地方重用它。最棒的是,这样做我们解耦了 HTML 和 CSS,因为 HTML 是语义化的,并且不定义样式。所以我们最终得到了如下所示的层
HTML 语义 – 从内容角度定义 HTML,而不是基于样式
应用 CSS – 为内容定义样式,新的样式或链接到我们库中存在的函数
库和基础框架 – 库和函数组(compass、我们自己的等)
这样,我们可以使用相同的 CSS,但它引用了不同项目中的不同 HTML。
我们可以继续讨论这有多难,以及你将如何分离你的库。
这种编码风格需要大量的纪律,并且库必须被清晰地分离、参数化和记录。
在某种程度上,Bootstrap 就是这么做的,但他们的视角是将纯函数与应用于 HTML 的 CSS 混合在一起。
我当然希望看到一个类似 Bootstrap 的库,它具有更好的配置选项,并且不会将单个样式应用于 HTML。此外,它将结构与样式分离。
这样,我们就可以将其用作可重用的基础,保持 HTML 和 CSS 解耦,只需将语义 HTML 与我们首选的函数/样式/结构链接起来。
[1]:
为什么从 IE9+ 开始?新的 CSS3 选择器和功能使我们能够为语义 HTML 设置样式,而无需将 HTML 与样式混合。IE 是最大的罪魁祸首,从 IE9 开始是关于这些问题的最不可用的版本。
那是一个精彩的陈述,它让其他所有内容都变得有意义。
我认为代码重用是最重要的事情。它有助于保持项目的可维护性和一致性。
在我看来,CSS 是最难重用的东西之一,因为(如前所述)每个应用程序/网站都需要有完全不同的设计,更不用说不同的 HTML 结构了。
但我确实有一个我通常使用的“样板”,它非常非常基本
http://pastebin.com/EnuWRXNX
没什么太花哨的。
对于 UI,我通常使用另一个特定于目的的 CSS 文件。
我也保留每个组件的样式表,即——如果我有一个可重用的 widget,我会将其 CSS 提取到一个单独的文件中并重用它。
我是一名开发人员,也是一名设计师,
我认为我遇到的情况是,功能和编程开发人员模块比 CSS 更容易以抽象和可重用的方式进行思考……
对我来说,CSS 很快就会变得很具体,当我意识到这一点时,我已经有一些东西只适用于网站的那一部分,并且在不修改的情况下无法在其他网站中重用……
我想在学习计算机科学和开始学习模块化和抽象思维比简单地复制粘贴更难之前,我在开发和编程方面也遇到了同样的问题……但你最终节省的时间是巨大的。
问题是 CSS 不容易重用、模块化、混合等……直到现在!
感谢 less 和 sass,我开始拥有越来越多可重用的抽象类来解决常见问题。
我认为可重用 CSS 代码的时代才刚刚开始,预处理器的强大功能正在发挥作用。
出于好奇,你认为你会在更多时间后开始考虑重用,还是 less/sass 帮助你克服了这个陡峭的学习曲线?
我已经知道我需要开始更多地重用我的 CSS……但在预处理器出现之前,它并不容易或好用。
我确实尝试过重用我的 CSS,但必须转到最新的项目并复制一大块 CSS 并不好,使用其他文件导入很好……但必须在网站准备好投入生产时连接它们,或者有大量 http 请求并不好。
现在我可以使用我的可重用 mixin 和样式并使用 sass 导入它们……并且在任何优秀的自动编译应用程序的帮助下,每次我保存时都会将其全部包含在一个可工作的 CSS 文件中。
上面那个网站设计?它来自 ThemeForest:http://themeforest.net/item/barbara-html-and-css-template/
我认为这在某种程度上影响了这场讨论=)。
哇,对作者没有不敬的意思,但这怎么可能被批准?:)
在过去的几个月里,我已经看到十几种更好的模板被拒绝了。
“更好”是主观的。
看起来链接不起作用。@rkoma 我觉得这个模板没什么不好的。虽然不是最好的,但可以用。
我通常会将我在各种项目中最常用的 CSS 代码片段保存起来,并在需要时重复使用。除此之外,我都是从头开始编写。显然,当你开发一个新网站时,你会使用不同的 CSS 类名,因此重复使用代码可能会比较麻烦,除非你有一种好的方法以通用方式保存代码以用于重命名。不过,我确实经常使用 SASS,这使得重复使用 CSS 非常方便,因为你只需将其扩展到新项目中可能存在的任何新类上。我只是保留一个我喜欢的常用 mixin/变量文件,并以此为基础进行构建。
我完全同意 Zak 的观点。
此外,我更喜欢重写一些 CSS 代码。这是一个新项目,即使我稍微重复了一些内容,整个过程仍然感觉新鲜且有所不同。它巩固了一些东西……建立了一种几乎是“反应式”的编码风格,就像呼吸一样。我不必考虑代码……只需想象我想要什么,我的手指就会完成 CSS 的编写。
在与拼写检查/自动更正的战争中,我已经承认自己在写作技能方面失败了,我不想在编码方面也这样做。
这似乎只有在时间敏感的项目中才有意义。
我认为可重用 CSS 应该在许多项目中成为必备。
我同意,随着我学习新的技巧,我会尝试将这些技巧添加到新项目中,但这并不意味着这将是我唯一使用的项目。我有一套基本变量和 mixin(我使用 LESS),这些变量和 mixin 用于我的大多数项目。如果我需要更改颜色、字体等,我会更改这些元素,而不是命名约定等。
这使我能够重复使用大部分以前的 CSS,同时仍然创建自定义网站。
不仅可以跨项目重用 CSS,在项目内部也可以重用。当你有时间为网站创建漂亮的样式指南时,这很有用,你可以将目标定位到能够利用 CSS 可重用部分的区域。是的,CSS 本身就是模块化的,并且旨在以这种方式使用,但是很多时候我会看到相同的 CSS 代码块在页面中重复出现。
是的,我重复使用我的 CSS。我非常努力地创建它,以确保它具有面向未来的特性、跨浏览器兼容性,以及它所设置样式的 HTML 的语义和结构良好,那么为什么不呢?但是,我不会简单地复制粘贴其他人的作品(即使是样板或框架),因为我觉得在使用任何东西之前,你必须首先检查它,以确保 1)你理解它,2)它与你正在处理的内容相关且合适,以及 3)没有不必要的膨胀。(此外,工匠 [或手工艺人] 会打造自己的工具。)
我在一家代理机构工作,我们同时进行许多项目,并且一直有新项目启动。我们必须高效地工作,但也必须保证质量(工艺)。我保留自己的样板文件(HTML、CSS、JS;受 HTML5 样板文件很大影响),我已经对其进行了自定义和增强,以适应我的工作和我定期处理的项目。这是我每个项目的基石。我努力使这个样板文件尽可能地保持最新(如果我从基于其基础构建的项目中发现了一些新东西,它就会进入样板文件)。这让我能够快速开始新项目。我知道我的布局钩子可能是什么,并且我已经为我开始工作准备了 CSS 基础(一个可靠的重置、一些布局组件和辅助工具)。
此外,在我工作的地方,我们为每个项目创建样式指南(或样式图块),并且通常,我们尝试在项目之间保持一定程度的设计一致性,以帮助提高模块化和开发速度。我主要讨论的是标准 HTML 组件(音频、视频、列表、简单的表格和表单等),而不是布局。通过这种方式,我们可以广泛地自定义外观和感觉(布局),同时保持语义相同并节省常用组件的时间。根据设计,可能会有巨大的样式变化,但我发现即使在这种情况下,我也有很多机会重复使用我的 CSS,尤其是在编写时考虑了模块化和通用最佳实践(我们都见过很多这方面的文章,例如 OOCSS 和 CSS 选择器意图)。毕竟,禅意花园的想法不就是这样吗?
由于我现在在一个所有新网站都应该看起来相同的工作环境中,我仅使用 30 行非库代码就重新设计了整个网站。
然而,在之前的职业生涯中,通常比例是 40%-60%(旧代码与新代码),但那是在网格系统等出现之前。
如果可以,我想问大家,目前你们“感觉”(不精确)重复使用代码与新代码的比例是多少?
除了重置之外,我每次都从头开始。我这样做才一年,所以从学习的角度来看很有帮助,但我也希望将每个项目都视为一个新的起点,没有任何限制,希望创造一些新的和有趣的东西。
我不重复使用,也不建议任何人重复使用 CSS。你可以重复使用整个模板和已经用 HTML 和 CSS 编写的布局,而重复使用仅 HTML 或 CSS 则没有意义。
我一生中所做的每个网站都始于同一个模板文件,我随着新技术的出现不断更新它。它类似于 HTML5 样板文件,但包含了更多我认为我被要求开发的大多数网站都具有的内容。
我还发现,一旦你熟悉某个特定设计师,你会发现他们开始更多地重复自己,你可以更多地使模板适应他们自己的设计风格。
我还有一些常用的下拉导航文件,我会尽可能地使用它们。
这是我自己的模板文件 – http://www.nealgrosskopf.com/sites/dev/template/html5.html
我会复制粘贴一些 CSS 代码片段,但从不复制粘贴大型模块化代码块,尽管我过去曾尝试过这样做——我发现复制大型代码块会导致一些未使用的和/或混乱的代码。
每个项目都不同,所有客户都倾向于有一套完全独立的需求。除了这里和那里的少量代码片段之外,重复使用 CSS 并不是一种选择。
我使用用 LESS 构建的库重复使用所有内容——因此,当我需要特定的样式模式时,我只需在我的主 LESS 文件中调用它。保持事物新鲜是一个挑战——我们的客户在文化领域,因此尽可能高效至关重要——因此我们一直在发展(添加和减去样式模式)。
自从我开始使用 SASS 以来,我的可重用 CSS 确实增加了。在此之前,我会重复使用相同的基本概念,但下一个网站中的足够多的内容会发生变化(填充、颜色、背景等),以至于我最终会重写它。但现在有了 SASS,我可以将发生变化的部分作为 mixin 中的变量。现在,我只需更改变量,就可以轻松地在多个网站中重复使用。
然而,随着技术的快速发展和语言的进步,我确实发现自己经常使用新技术,并嘲笑自己一年前如何拙劣地处理类似的问题。
我必须不同意这里大多数人的观点。我有一个主要的 CSS 基础和 HTML 基础,我将其用于我们所有的项目。它包含许多核心框架,可以轻松地针对每个设计进行调整。
每个网站当然都是独一无二的,但是有很多东西,比如主要文本样式、主列、菜单、内容列、表单、表格等,我都有一个基本的简洁格式,这使我的团队能够节省大量时间并确保更好的浏览器兼容性。CSS 非常易于重用,没有理由不为你的项目建立一个基础。
是的,我同意 Jesse 的观点,我们有一个 WordPress 代码库,它让我们能够在每次创建新网站时都以极短的时间编写网站,我们对基础进行调整:WordPress 的 html5 外壳
我也同意,我们的大多数网站都是基于 WordPress 构建的,并使用我们自己的自定义默认主题和可以重复使用的类,主要用于快速处理一些小事,例如左/右浮动、宽度和清除,甚至一些圆角等。它没有什么设计上的强度,但无论如何它们都将在每个构建中使用,因此在每个网站上都有它们是值得的。
好吧,说实话,每次我开始做一些事情时,我都会拿起我以前的 CSS 文件并开始处理它。添加和删除东西。并且显然会根据需求更改样式、类等。它比从头开始编写要好。基本的东西。
因此,我没有明确的公式来使 CSS 可重用,但在一天结束时,当我开始在其他 CSS 样式之上工作时,大部分工作都完成了。
在 eBay 的内部工作中,我一直在重复使用很多代码——主要是 SASS 和每个项目都需要的一些文件,例如
Mixin
Normalize
Font-Awesome
然后根据总体布局,如果我之前已经构建了基础布局,我通常会直接复制过来。
但所有这些代码都是相对较新的代码,我很少深入研究旧的代码库——相反,我倾向于利用新的想法或实现来重写代码。这让我保持警觉!
我会重用代码片段,但我经常发现,当我开始一个新项目时,从上一个项目中学到的许多经验教训意味着我旧的 CSS 似乎很,“我在想什么?!”
我编写了许多非常相似的网站,但我发现,如果我尝试重用主要的 CSS 代码块,我花费在微调以使一切完美的时间比从头开始更多。我会重用一些代码片段/代码块,但在 CSS 中很少。
CSS 是一种最容易上手的语言,也是一种最难掌握的语言。我尝试过采用 SMACSS、OOCSS 和 MVCCSS。我发现 OOCSS 是一种让我编写最少 CSS 代码的方法,并且由于其模块化方法而倾向于重用 CSS。但是,缺点是您的标记充满了 CSS 类。但话又说回来,如果 Facebook 采用了这种方法,它一定有其优点。想法?
是 MVCSS 而不是 MVCCSS。
我观看了一位负责 Facebook 重制版本的 CSS 专家接受的采访。她说,通过使用模块化方法,她能够消除大量代码。这是基于无论如何都要添加类,但每个类都是单独编码的。她所做的是编写一个样式规则集,然后将所有受其影响的类附加到它,从而消除大量重复代码。
我发现,多年来,我积累了一本各种 CSS 规则的“食谱”,这些规则充当各种界面模式的基础类,我可以简单地复制粘贴到项目中。
最初,这是一种记住各种 CSS“技巧”的方法(想想“clearfix”之类),但多年来,它开始更多地关注可重用的代码片段。
这几乎可以用于任何东西;导航元素、可主题化按钮、缩略图列表、输入字段。
我发现,通常情况下,存在一些重复的模式,我可以在早期就利用这些模式,从而在网站开发中获得先机。
目前,这些模式还远未“完成”,但它们是一个有用的库,可以用于我参与的各种项目,并在此基础上进行构建。
可以把它想象成一个高度个性化的 Twitter Bootstrap!
大多数程序员使用西方风格的布局(导航、滑块内容和侧边栏)。似乎大多数网站都是复制的。最近我读到一篇文章,说朝鲜政府网站使用美国风格的网站。网站的风格需要重新研究。
从头开始编码很棒,当程序员从头开始编写代码时,它会给他带来很多知识和经验。
嘿,chris,你完全正确,但我认为标准化这些 CSS 代码非常困难,不是吗?也许可以创建标准主题。但这些“空白”主题已经存在,所以只需使用空白主题,一切就都好了?!:-p
我保存了我之前的所有项目,通常对于新项目,我会从不同的项目中选择我认为必要的 CSS 部分。
我还创建了自己的“CSS-base”文件。除此之外,我还使用带有 Compass 的 SASS。
由于我们团队的设计师经常一遍又一遍地提出类似的布局,因此多年来我一直重用代码,因为我构建了一些小型框架,该框架不断更新,为我们的项目提供了完美的起点。
大家好,
我对这一切还不太了解,我认为重用是正确的,但每次都要赋予它不同的风格,使其与您当前的项目相匹配。
每次从网上复制时,我都会尝试加入自己的风格,并且我习惯于从头开始。
我还没有开发过很多网站,所以必须承认我总是从头开始,以前从未使用过框架。这并不让我害怕,但我感觉设置框架比自己构建所有内容需要更多时间。
我最近尝试使用 Twitter Bootstrap 进行了一个非常小的项目,但事实证明我的内容不足以让我觉得需要它,所以我自己构建了它。无论如何,我发现它非常易于使用,并且在设计方面非常棒。
无论如何,即使我不经常使用框架,我每次肯定都会重用代码片段。
我不太重用 CSS,因为即使布局相似,许多其他东西也会发生变化,最终样式表由 70% 的你不需要并且与你需要的规则混合在一起的规则组成。
因此,很难将这两部分分开。但是,您可以编写一个 CSS,其中布局规则是分开的,但这会使您的样式表更大且难以维护。
这很简单,我们可以使用另一个网站上的属性,但对于那些认为我们可以像在不同网站上进行后端编码一样使用 CSS 的人,我有一个问题。
问:我们也可以在不同的网站上使用 CSS 的值吗?这就是为什么我们称之为“设计”,我们称之为前端编码。CSS 开发人员是“开发人员”,他们不是复制粘贴设计师,或者也许我们应该称他们为编辑?前端设计师的含义不同于仅仅在文档中复制粘贴一些单词和代码,还包括开发。感谢大家提供的评论。
此致
Hamid。
我正处于 CSS 学习阶段的初期,所以我尝试从头开始编写所有内容,这样我就可以通过这种方式学习更多。
重用 CSS 是一个好主意。因为它可以节省大量时间。如果我们有简单或类似的布局,那么我们可以利用 CSS 的强大功能。
感谢您的帖子。
取决于标记,我通常会尽可能地重用 CSS。
是的,我重用我的 CSS。实际上,我创建了一个框架,在其中我放置了基本的和高级的 CSS,例如重置、通用、默认 WordPress 样式(例如:.alignleft、.alignright、.caption 等)、基本表单样式、下拉菜单样式以及最重要的是我已预定义的响应式 CSS。
当我使用自己的框架时,它可以节省我大量宝贵的时间和精力。
我经常在项目之间重用一些类,例如元素重置、隐藏类和浮动类,但发现几乎不可能重用 CSS 的整个部分,例如主导航,而无需进行一些调整。一方面,项目的唯一内容和设计不可避免地会渗透到该项目的 CSS 中。此外,我一直在努力改进我的 CSS,尝试新的选择器和技术。因此,如果内容和设计没有产生新的 CSS,那么我追求专业成长的兴趣肯定会产生。
我是否重用 CSS?好吧,这取决于“重用”的定义。
我不做的事情:我不抓取旧网站并删除和添加 CSS 代码行。为什么我不这样做?1) 因为存在危险,我的网站看起来非常相似(我不喜欢这样,客户也不喜欢)。2) 将会保留大量无用的代码,从而增加文件大小。3) 由于自上而下的工作方式,可能会出现一些疯狂的选择器(https://css-tricks.cn/crazy-town-selectors/),导致需要覆盖特异性。
但我所做的是:我在屏幕左侧编写代码,在右侧放置旧代码(自己的代码或来自此类网站的代码片段),并使用旧代码作为新代码的模型(我通常不会复制粘贴,因为那样我就不够思考了)。
我认为这种方法最适合我的目的。
我认为预处理将通过 mixin 带来更多 CSS 的重用,我已经有一个 mixin 文件,我将其导入到每个新项目中。由于它们都采用参数,我可以对所有内容进行唯一定制,同时仍然使用相同的代码。
我为网站中的每个页面都重用相同的 CSS。这就是重用的范围。
如果我必须开发一个类似的网站,我可能会从以前的项目中复制/粘贴 CSS,但很快,就没有重用了,只有共性。不幸的是,我从未费心分析这种共性并制作模板。我想我从未想过这个问题。
一个不错的项目想法:可热链接、可重用的通用 CSS 文件——你知道的,就像你可以使用 jQuery 而无需自己托管它一样。你能想到这个项目永远无法实现的任何原因吗?将它们作为你回答为什么我们从不共享/重用 CSS 文件的原因。
编写 CSS 的行为确实感觉像是在编码,但 CSS 文件是代码吗?我不确定。如果你将 CSS 视为一个包含 HTML 页面样式规则和参数的结构化数据集合,那么这或许可以解释为什么在实践中 CSS 的复用并不常见。这就像复用 JSON 对象一样。
当然有复用 CSS 的地方,但当涉及到本质上是设计的任何东西时,我更希望从一个全新的起点开始。面向对象范式适度使用是有帮助的,但 CSS 的美妙之处在于你可以定位一个元素并随心所欲地对其进行样式设置。
就像 Zak 和其他一些人一样,我不倾向于复用 CSS,因为我认为每次构建网站时我的水平都在提高(而且我认为我的 CSS 质量仍然存在问题,所以每次都需要改进)。
话虽如此,我正在开发一堆布局模块,希望能够复用它们,因为布局可能是最容易复用的东西。如果我用 SASS 来做模块,那么它们就可以变得灵活且可复用。
重用 CSS 是一个好主意。因为它可以节省大量时间。如果我们有简单或类似的布局,那么我们可以利用 CSS 的强大功能。
我几乎每次都是从头开始构建,这意味着事情以不同的方式构建,并且每次都能发现新的错误,从而让我更多地了解如何解决更大的错误和问题。这意味着我构建的每个网站都只是更大学习曲线的一部分。 :)
我每次都从头开始构建每个网站,并使用不同的布局和设计,但我几个月前开始的一件事让我觉得非常宝贵,那就是个性化的代码库。我不会复制整个页面布局,但我反复使用这些代码片段,它们是我个性化的,并且只在需要时以小块复制粘贴到新网站中。这尤其有用,因为我 99.9% 的网站都是基于 WordPress 构建的,我一直在做大量的自定义代码工作,所以当我有一些复制粘贴样式需要应用时,它可以节省很多时间。
一些例子,比如“阅读更多”链接和水平居中的导航链接的样式。我还使用 Zurb 的 Foundation 框架,因为它使为移动设备布局网站的速度快得多,而且很容易根据我的需要进行修改……所以这部分每次都使用复用的 CSS。
除了保存的代码片段之外,我认为这取决于你复用 CSS 的原因,才能真正体现其好坏。如果你复用它是为了解决一个复杂的问题并且不想重新遇到这个问题,我认为这是一件好事。但如果你纯粹是为了节省时间并尽快完成工作而这样做,我不确定这是否是构建网站/应用程序的最佳方式。它助长了我们现在所处的这种敏捷文化,在这种文化中,使某些功能上线比质量和尝试新事物更重要。时间就是金钱,对吧?胡说
不要误解我的意思,我不反对复制粘贴代码(我们都使用过 jQuery 插件),但只能到一定程度,否则你就不是设计师/开发者,而是在拼凑一个拼图。当你使用像“.input-text”这样的类而不是 input[type=”text”] 时,你可能已经将 OOCSS 模型应用得有点过头了。
我的一些想法
我从未复用过我的 CSS,但随着我白天工作和自己项目之间变得越来越忙碌,我一直在考虑这个问题。
不过我有一个问题……在为公司工作并为他们设计网站代码时……自己保留一份工作副本会怎么样?
使用你为雇主制作的代码为自己服务……?合法?合乎道德?你对此有何感受?
我不会复用任何样式属性,只会复用结构属性,为此他们创建了网格系统:) 非常棒的讨论!
我复用 CSS 以避免在空白文档上不得不开始痛苦地盯着闪烁的光标。正如 Chris 所说,内容会发生变化,这意味着 HTML 会发生变化,这意味着 CSS 会发生变化……但拥有一个可以借鉴的模板会带来巨大的帮助。
我认为,这可能是它在实践中的表现方式。不是整体复用,而是复用然后微调。这是预制和自定义之间很好的平衡,也使工作不那么令人望而生畏。 :)
我的想法是,代码复用是一个用于避免在不同项目中一遍又一遍地重写常见“功能”(如返回字符串的一部分(substr))的概念。你这样做是因为项目 A 所需的 substr 方法与项目 B 所需的 substr 方法绝对没有区别。
但 CSS 在大多数情况下不用于功能,而是用于表示,而且大多数情况下,项目 A 的外观应该与项目 B 完全不同……哦,等等,
……大约 100 人在我之前大致说过同样的话。
继续 =D
我发现随着我的学习,我复制的 CSS 越来越少,尽管我使用 TextExpander 在空白文件中每次都设置一组基本的 CSS,以便为我提供一个“框架”,其中包含常用的东西(注释、重置等),这样我就不必每次都重新输入它们。
我使用 normalize.css 和几个 Bootstrap 元素,仅此而已。我认为复用 SASS 将有助于所有其他项目。
复用代码意味着对其他项目使用相同的“肖像”。这意味着在设计中,当你使用它时,你可能会得到两个结果
– 编码时间更短
– 从创建新代码中学习的知识更少
复用 CSS 的人可能会稍微改动一下,例如列表项颜色、边距等。这样做,你会发现自己花费几乎相同的时间来查找和测试这些微小的更改,而不是创建一个新的。
此外,有多种方法可以得到相同的布局。所以,如果你不想花时间去弄清楚哪种方法适合你的特定项目,并获得更多这方面的经验,那么我可能会觉得你很懒惰。
这次讨论的一个有趣的衍生话题可能是,“你最喜欢使用的五个 CSS 代码片段是什么?”
我认为 CSS 绝对是可以复用的,并且应该在可能的情况下(明智地)复用。不久前,Chris 发布了一篇关于电子邮件 UI 模式的文章。好吧,对于许多主要功能,包括登录等,都可以有 UI 模式。许多 UI 模式会导致形成标准的小部件,例如电子邮件配置区域或登录区域,这些小部件可以直接“放置”到网站的某个部分。
大多数这些模块或小部件不需要太多自定义,可能只需要更改颜色主题。这时,使用现有的 CSS 以及经过测试的 js 插件及其相应的 HTML 就会变得非常强大。
有些人还提到了使用“面向对象”CSS 的想法。这也证明了复用 CSS 的好处。想象一下重做现有网站的大部分内容。如果你每次都要重写代码,最终结果将是一个糟糕的网站,没有人会认为它是专业的/权威的。但使用面向对象的方法,你可以使用相同的 CSS 快速重建大块内容,同时保持相同的外观和感觉。此外,任何代码复用(前端或后端)都可以节省开发、测试、部署和维护时间——从而节省资金。
我认为这与你在前期做出的设计有很大关系。如果你之前(为另一个网站)制作了一个很棒的搜索输入字段,你可以复用这个旧的输入设计并将其适应你的新设计。这样你就可以复制所有内容并进行一些调整。
我还为各种按钮有一个不错的 .css 库,但我发现自己一遍又一遍地从头开始创建它,仅仅是因为我忘记了我拥有它或者我以为从头开始创建它会更快 :p
我在多个样式表中使用了几乎相同的重置。
复用为具有特定概念和布局的项目设计的样式表也很方便。
但我觉得从头开始创建所有内容更自由。
^^
我一直试图获得良好的 CSS 复用性。到目前为止,我一直觉得大型项目之间的变化太大,以至于无法真正复用太多东西。在标准更改、浏览器更改、我的知识和开发经验,甚至只是不同的网站布局原则之间,除了 initialize.css 和类似的东西之外,我还没有发现其他可以在任何地方复用的东西。
是的!
我认为有些人过于执着于我认为的艺术而不是设计。
“你可能已经编写过类似的东西,对吧?”
类似的东西。
他没有说:你可能已经每次都使用完全相同的设计和完全相同的颜色样式编写过这个完全相同的设计,没有任何变化。
关键是不要关注颜色和部分名称:推荐、我们的团队、我们的客户等。当然,颜色、字体、边框和图像会发生变化。你始终可以扩展你的样式。
减去额外的内容包装器
我们的团队:.col-3, .col-3, .col-3.end
我们的客户:.col-4, .col-4, .col-4, .col-4.end
页脚:.col-4, .col-4, .col-4, .col-4.end
明白这将走向何方了吗?
可见结构
我非常希望能更频繁地重用我的 CSS,但它似乎总是随着我正在处理的网站或项目而有机地增长。
我相信这是 CSS 代码和后端代码之间最根本的区别。由于它是一个呈现对象,所以本能反应就是根据设计的需求来开发它。
也就是说,这听起来像是 CodePen 之类服务的绝佳机会,并且最终将带来更可靠、经过充分测试的 CSS 代码。
Sublime Text 2 代码片段,足够了。
是的。Sublime Text 代码片段!
还有这个!;-)))
以前,我每次都会从头开始编写 CSS,除了使用 normalize.css 和网格之外。自从我在工作流程中添加了 Sass 以来,我一直在寻找模式。如果我发现我在多个项目中的多个元素上使用了某种样式,那么它就会成为混合重用的候选者。
字体栈也适用相同规则。我考虑过为这些字体栈保留一个中心“_fonts.scss”部分文件,然后只调用混合。
例如
然后将其用于我的每个主力字体栈。我想 Compass 已经涵盖了类似的混合。
我通常会将许多通用代码块保存为 Sublime Text 中的代码片段,并使用简单的标签来输出它们,因此对于博客条目,我会输入 htmlentry+Tab 以输出 HTML,然后对于 CSS,我会输入 cssentry+Tab 以输出相关的 CSS。这在 99% 的情况下都能正常工作。我还有自己的 Bootstrap 文件,用于定期使用的组件。我建议大家更聪明地工作。
伙计,我已经做了大约十年了,我不得不承认我几乎从未重用过 CSS。我不确定这仅仅是
-一种偏好和对新事物的需求(我喜欢新的空白样式表)
-能够构建我上次学到的东西(我总感觉我为每个项目或设计学习了一种新方法。足够新,以至于以前的无法简单地修改以适应它)
-或者也许是个人心理障碍(关于第一点 ->我恰好患有成人 ADHD,并且在大型现有 CSS 文档中重新路由电源耦合会严重导致我的大脑发出威廉尖叫声并关闭)。
话虽如此,感谢 Sass + Compass,我确实会大量使用预构建的 CSS 代码片段和概念。对于可重用性方面,预处理器确实取得了很大的进步。
还有其他人有类似的经历吗?
注意:在顶部,“重用 CSS”是指整个样式表。我总是从一个新的空文件开始。
@Andrew:您应该将结构和皮肤视为单独的 SASS(或 CSS)文件。您是否使用了任何 OOCSS 原则?
我过去一直手动编写所有 CSS 代码,但如今我尽可能地使用库。这是许多人测试过的代码,它使我的工作效率大大提高。我的目标是尽可能减少自定义 CSS 代码。
Bootstrap/Compass/SASS 是我目前的首选。
我获得报酬是为了创建优质的网站,而不是代码行。
我重用了很多代码。我的意思是,我从头开始编写代码,因此大部分代码可以在页面上以模块化方式使用,而不是无谓地重复代码。
哦。我们在讨论将一个站点的代码用于其他站点吗?如果是这样,那么不,我没有这样做。
Compass 和 Bourbon 都是 CSS 重用的经典示例。Zurb 的 Foundation 和 Twitter Bootstrap 也是如此。CSS 网格框架(如 960gs 和“320 及以上”)也是代码重用的示例,normalize.css、各种重置等等也是如此。因此,当您说“理论上我认为 CSS 应该是我们可用的最可重用代码之一,但实际上似乎并非如此”时,我真的不明白您指的是什么。在实践中,它绝对是正确的,不是吗?我猜我可能在某个地方误解了您的观点。:-)
HTML 非常可重用,我已经做了很多年了。每个新网站的 80% 都是现成的组件。
对于 CSS,如果您想重用它,则必须将其拆分为布局 CSS 和纯图形 CSS。颜色、圆角、阴影……诸如此类的东西您无法重用。但是,将元素布局成列是完全可行的。因此,4 列页脚代码可以在不同的站点之间完美重用。
当然,您可以“重用”较小的代码片段(例如 .clearfix、.hidden 或 .corners(9px); 在 Less 中,但仅作为快捷方式,而不是作为直接渲染的 CSS。
对我来说,我不重用 CSS 的主要原因是我不太习惯盲目复制代码然后修改它(希望我没有遗漏任何东西),并且我错过了“结构”。
我的意思是,我 90% 的项目至少与所有其他项目略有不同(一些基础知识相同,例如 .wrapper 类,我从一开始就将它们保留在我的修改后的样板模板中),并且通常从头开始编写比复制、修改、获得一些意外结果、重新深入(重复)要快得多……
我确实认为框架甚至预处理器可以帮助最大程度地减少您需要“从头开始”完成的工作量,但是前端代码比后端代码变化更大,因此(对我而言)“标准化”它永远不会真正带来回报。
此外,如果您有一个包含“可重用”代码的相当大的模板,则可能会最终在特定项目中使用从未使用过的代码。
底线:我喜欢从“头开始”(样板文件已经是一个非常好的开始)有条理地构建我的 CSS,以保持结构感。
我完全理解我们都一遍又一遍地重建了那个网站的事实……
我现在几乎每天都在构建 WordPress 网站。最近,我一直在使用我自己的 Bones 分支版本,它开箱即用地具有一些不错的功能,包括一个 Twitter Bootstrap 网格、一组混合以及 Less 中的其他一些不错的功能。我想说我现在比以往任何时候都更频繁地重用 CSS。免责声明 - Bones 处于持续开发中,并不适合所有人;请查看您能够使用和不能使用哪些功能。
与其说重用 CSS,不如说开发一种您坚持使用的系统化构建网站的方法。
为了做到这一点,可以从样板文件开始。(我相信我们已经在这里讨论过样板文件了。)如果您使用 H5BP,那就太好了。它并不是唯一一个,但它很可靠,而且许多非常聪明的人参与了它的创建。
下一步是选择并保留一个网格系统。当然,960gs 是先驱,但现在有流体网格、自适应网格等。据说 1140 是新的 960。
实际上,归根结底,它是将一组代码组合在一起,以便当您需要一个三列段落作为第一个网格元素并具有 60% 透明黑色背景和白色文本时,您可以执行以下操作
<p class="white-text threecol first black-60">
如果您发现自己一遍又一遍地做同样的事情,那么您可以为它创建一个类。
<p class="widget-paragraph">
Nicole Sullivan 的 OOCSS 方法改变了我编写 CSS 的方式。作为一个团队,我们现在已经发展成为将此作为编写 CSS 的日常流程。
1. 为集中的(视觉)库构建可重用的对象。
2. 在创建和引入库的新对象时,查找现有对象之间的相似点和不同点。考虑某些东西可能不是新的,而可能是现有形式和功能非常相似的对象的更新或必要的扩展。
3. 在执行步骤 1 和 2 时,协作讨论至关重要。构建每个设计师都希望使用的功能。
4. 将您网站的个性抽象成主题。将 OOCSS 的主题概念应用于整个网站和/或对象本身。也要讨论主题想法——您不希望立即进入开发过程。您团队中的其他人也有很棒的想法。这也会使他们成为更强大的前端开发人员。
5. 文档至关重要。如果没有人知道库提供了什么,那么您就没有构建任何东西。我们花时间为设计师和前端开发人员构建了一个内部模式库。我们正在不断调整和修改它。
为什么 CSS 会成为最可重用的代码之一?
这并不是一门编程语言,它在真正意义上并非代码,因此无法实现代码复用。
它是一种配置“语言”(我在这里非常谨慎地使用这个词),用于定义标记的样式。
我从未见过程序员讨论其实际程序的 .ini 或 .config 文件的可重用性。我的意思是,当然,你可以为某些东西使用相同的名称,但这甚至不是在 CSS 级别决定的。
现在像 SASS/LESS/或其他类似的东西确实在一定程度上改变了这种动态,你可以定义可以而且应该非常可重用的 mixin。
我有一堆 CSS 代码片段,我会从中挑选并选择用于许多网站(我不断地向该列表添加内容)。但我发现 CSS 是最不容易复用的代码。原因是,从一个网站到另一个网站,功能往往大体相同(出于可用性的考虑,这是有意为之的),但设计却差别很大。在我工作的环境中,基于网格的网站极其罕见——而且这是有充分理由的。设计往往比功能更具销售力,而自定义 CSS 是真正维护这种利基市场的唯一方法。
我发现,我越了解如何使用 OOCSS 原则,我的代码就越具有可重用性。虽然我大部分时间仍然使用空白画布(保存一些样板文件和重置),但我的标记和样式模式通常在各个网站之间非常相似。有时我会回头窃取之前编写的 CSS 代码块,但我不可能从另一个网站获取 CSS 文件并使用它。我将花费更多时间筛选和编辑,而不是从头开始编写代码。
嗨,**几年前,我每个项目都是从头开始的**,但这花费了我大量的时间,也产生了很多 bug。
**现在我总是依赖于 CSS/JS 框架**。在我的例子中,我使用的是我基于几个流行框架创建的框架:paraGRIDma
**这个框架非常轻量级,并且或多或少地满足了我所有的基本需求**。我用它来构建页面的结构,然后创建一个新的 CSS 文件来覆盖当前项目的特定设计需求的 CSS。我需要改进它,并制作一份好的文档,但时间不足始终是一个问题。
我发现它非常有用。**从一个项目切换到另一个项目非常容易**,我不必记住你是如何编写那个项目的代码的。
此外,我认为如果你总是使用相同的 html+css 结构,**那么查找新的 bug 就更加困难**,如果你发现了一个 bug,你可以覆盖框架代码,它将在每个项目中得到修复。
从头开始,宝贝!
我认为复用整个网站然后修改它们很棘手。因为你的编码可能已经改进,或者自从你编写上一个网站以来你可能学习了新的技术。但我确实认为拥有一个常用的代码片段的小型库非常方便。特别是对于那些似乎需要花费大量时间的棘手的 CSS 部分,例如样式导航、分页和表单。
为此,我使用了一个名为Pears的天才作品,我认为它是 simplebits 开发的。它将常用的 html 与 css 配对。因此,你可以将你自己的库中的部分复制粘贴到正在构建的网站中。
为我节省了大量时间。
Joe
是的,我复用 CSS。好处是,当我学习新的技巧或发现我之前做错的事情时,我可以让其他网站受益于这些代码片段。当然,风险在于,如果在一个网站上应用对该代码片段的维护,我可能会觉得我应该对与我共享该代码片段的网站应用类似的维护。
是的,我喜欢复用并检查其他网站的 css,因为这让我学到了很多关于新技巧的知识。在我的特定情况下,我总是用整洁的注释保存我的新技巧,这也可以帮助其他人学习。
这真的取决于网站的外观。如果它是一个非常标准的网站,我倾向于复用很多已经写好的 CSS。如果它是一个与我之前做过的任何东西都完全不同的网站,我将不得不重写大部分内容。
不过,某些特定的元素,比如 reset.css 或 base.css,是我在制作的每个网站上都作为基础使用的。
有时我会从头开始重写整个 CSS,以便从一个干净的画布开始重新构建。有点像重新发明轮子,一个永远不需要推动就能滚动的轮子。
我不复用 CSS,因为浏览一个已经完成的 CSS 文件并找出到底要复用什么太耗时了。
你总是在上一次 CSS 编码中做了一些你知道可以改进的事情,所以这一点就否定了 CSS 复用这个概念。
我**确实**复用的是我的 CSS 注释结构,例如
一级标题看起来像这样
二级标题像这样(缩进自一级标题)
三级标题(缩进自二级标题)
我使用这些
LESSCSS(变量、函数和嵌套 CSS)
语义网格系统(基于 LESSCSS 构建的响应式语义网格系统)
Twitter Bootstrap(尤其适合后端构建)
你认为我们还应该使用什么?
例如,是否有任何针对 CSS 的优秀命名约定?
我认为这就是 CSS 网格系统和样板文件发挥作用的地方。
当我看到给定的布局时,首先想到的是——与每个“部分”关联的“列”的数量。元素的基本样式无论如何都是由样板文件提供的。剩下的就是特定于项目的 CSS。
我最近开始考虑在每次处理新项目时不要重新发明轮子。通过这样做,我开始思考我添加的重要内容,这些内容可能在其他设计中重复使用。我还检查了我工作过的大部分大型布局,并检查了哪些内容是相同开发的,就像你在担任后端开发人员时所做的那样(就像我的教授曾经在课堂上说过的那样——尝试找出你曾经使用过的模块并复制粘贴它们,看看会发生什么。它们可能无法立即工作,但经过一些调整,它们就会工作!始终取决于工作的内容)。
使用 SASS/Less,完全可以复用 CSS,因为你可以创建 mixin 之类的东西。但其他东西也可以复用!如果它之前在一个项目中有效,为什么不节省一些时间并复制粘贴它,看看会发生什么。
当然,你可以称之为懒惰,但你并不懒惰,因为你复用了代码(在我看来,css 就是代码),而且你只写过一次!
当使用 WordPress 时,你也可以称自己为懒惰,因为你没有从头开始。我没有像这里其他人那样经验丰富,但我绝对会考虑复用 CSS,而且我确实在这么做。当然,某些布局会让你使用红色边框,下一个使用黑色边框或根本没有边框,但为什么不只是更改这一行呢!?在 PHP 中并没有什么不同!一个类可能没有你所需的所有数据,但你会怎么做!?你调整你的代码。(节省时间)而时间管理是开发过程中最重要的几点之一!
最近我开始创建我自己的样板文件,并在完成布局和所有内容后,删除我不需要用于加载时间等的那些东西。
我的观点是,CSS 是可复用的,这取决于你的工作方式,每个人都有自己的风格,应该这样,但说真的,如果你每次都从头开始编写登录表单,你会浪费很多时间。
在为响应式网站设计时,我总是从一个框架开始(我更喜欢 Skeleton 框架)。一切都井井有条,你可以将你复用的 CSS 代码片段放到正确的位置。节省了重新发明轮子的时间!
跑题——
之前从未听说过 Skeleton,我刚刚去查看了一下,它似乎很有前景。
没有 LESS – SASS+COMPASS 这种垃圾,基于 960gs,也基于 HTML5 Boilerplate,没有 JavaScript 需要处理,这意味着你可以实现你自己的框架和方法,CSS 代码非常易于阅读/适应。
感谢你的提及。
仅供参考,http://www.getskeleton.com/
我之前尝试过一些不同的框架,但我每次都回到编写自己的代码。
我有一些 CSS 代码放在所有网站的顶部,其中包含重置、修复以及我在几乎每个项目中都使用的大量通用和常用选择器。
至于我网站的大部分 CSS 代码……它们开始看起来很相似,因为我在各个网站之间使用了大量的相同命名约定,但由于没有两个网站是(应该)完全相同的,所以我无法完全重用相同的 HTML 和 CSS。
我唯一重用 CSS 类的时候是使用框架的时候。每个设计都非常不同,但当我开始编码时,在编码过程中我发现确实有一些类已经被重用了,尽管它们的样式不同。
重用 CSS 听起来是个好主意,但在实践中似乎效果不佳。除非你在做一些非常复杂的事情,否则查找旧代码并对其进行编辑所花费的时间几乎等同于重新编写代码所花费的时间。虽然 CodePen.io 可能会加快这一过程,它可能是一种存储和重用旧代码的不错方法。
上面的模板之所以获得批准,是因为性感女孩的图片。
这是一个“炫耀”的时代 :)
同意吗?
大家好.. :),
我不明白这篇文章的目的是什么?请有人能告诉我吗?先谢谢了。希望尽快收到你们的回复。 :)
——Ravi。
10年前我刚开始的时候什么都不重用,现在我不仅重用整个样式表,还重用名称和技巧,我相信这是成熟的标志。如果你重用,这意味着你已经很好地命名和组织了你的 CSS。请注意,我甚至不是设计师,我让其他人设计,而我每次都使用几乎相同的集合来创建 CSS。
我有一些经常使用的模式,我觉得每次都需要重新编写它们效率不高。这就是我使用 CSS 模式库的原因:SimpleBits 的 Pears 非常不错:http://pea.rs/。你可以使用它来设置公共库或你自己的私有在线库。你甚至可以使用 XAMPP 将其集成到你的开发环境中。
模式可以节省大量时间。而且你并不一定不能在你的库或模式集合中开发代码。如果你遇到问题,或者在项目开发过程中改进了代码,你始终可以更改模式以适应你的需求,或者——更好的是——适应所有可能的情况。使用模式甚至可以让你有更多时间专注于改进,因为你不需要每次都需要导航栏时都重新发明轮子。
我们倾向于从头开始构建每个网站(因为我相信这会让我们变得更好,因为我们会尝试新事物),但通常会重用像网格列表、下拉菜单、表单布局、输入字段和错误消息等项目的 CSS 样式。巧妙地编写代码并编写用于重用的 CSS 只会让我们更有效率,并成为更好的开发者。很棒的话题!
我一直在项目中重用一些 CSS 代码片段,但由于上面列出的许多原因,很难对整个布局进行重用。
预处理器正在改变一切。总的来说,我过去编写“反应式”CSS,主要与 HTML 耦合,但同时也会尝试在其中挤入一些可重用的模块。预处理器现在允许我们,甚至鼓励我们进行重构和抽象。我们现在正在应用程序或后端代码的基本原理。
重点现在已经转移到与 HTML 解耦以及在我们的项目中尽可能地重用事物。自然的发展方向是在其他项目中复制它们。最好的部分是,现在有了变量,我们就可以鱼与熊掌兼得。我们可以编写可以设置上面基本模板的内容。此外,我们可以使其足够灵活,以便只需更改值而不是重写即可更改其他项目中的几个宽度。
我可能会使用以前网站的一些 CSS 代码片段,但总的来说我都是从头开始。从一个空白的 CSS(或 HTML)页面开始一个新网站,这会激励我做得比以前更好。
重用 CSS 来处理常见网站功能(如通用网站结构、导航栏和页脚)似乎合乎逻辑,但除此之外,大多数网站似乎都需要自定义 CSS 解决方案。
也就是说,作为一名设计讲师,我担心设计师(那些不理解 jQuery、SASS 和 COMPASS 等内容的右脑型人士)可能无法跟上所有左脑型技术的发展。如果编码变得越来越复杂,响应式布局和功能变得比呈现内容的外观更重要,我们可能会遇到问题。我们都见过由开发者构建的看起来很糟糕的网站,以及由设计师构建的看起来很棒但只是在那里静止不动的网站。那么解决方案是什么?那些无法理解复杂编码问题的设计师应该退出这个领域吗?
就我个人而言,我很高兴看到如今 Web 设计领域正在发生巨大的变革。看到开发者和设计师以创造性的方式为旧问题提供新的解决方案并实施新想法,这令人兴奋。希望随着事物进一步转向响应式 Web/移动优先模块化/可重用,模块化 CSS 将会发挥更大的作用。
我使用过一些框架、LESS 集合和网格系统。
目前我正在开发自己的工具。一个用于 WordPress 的框架,一个基于 LESS 的响应式网格系统,以及一个基于 LESS 的灵活 mixin 集合,我试图在每个项目之后改进这些工具。目标是将所有内容都发布为开源,到目前为止,我已经上线了 LESStools.org——这是一个开始,希望随着时间的推移它会变得更加完善。
所以,是的。我重用了大部分代码和框架。设计可能会发生巨大的变化,但我不知道为什么人们要一遍又一遍地重新发明轮子。除非目的是重新定义整个流程或其相关部分。
我认为最可重用的 CSS 是我们拥有的许多框架(如 Bootstrap 和数十个可用的网格系统)的 CSS。或者是在同一公司(如 Envato)下的网站系统/网络中,其中许多相同的元素将被略作修改后重用。
否则,我认为,在为每个特定网站微调手动编码的 CSS 所花费的一点点额外时间和精力,会增添我们设计师最擅长的匠心,我们的客户也会欣赏这一点。
我确实经常构建这样的网站,并在过去几年里花时间构建可重用的 CSS。这主要归结于使用智能类,这些类可以在其他项目中使用。甚至在某种程度上,HTML 也可以被重用,或者至少可以参考它来影响你构建项目的方式。
对我来说,可重用的另一面是能够利用 CSS3 功能来替代生成用于细微效果的图像的需要。如今,我用于阴影、圆角等的小图像更少了,这意味着我可以依靠仅使用 CSS 来实现我的目标。
“智能类”……这就是关键。
我看到了很多可重用的 CSS 框架。能够拥有我自己的可重用 CSS 将是一件很棒的事情。
我一直在重用我的代码,我不确定重用代码有什么问题?我来自一代人,他们认为“如果它没有坏,就不要试图修复它”……这并不是说“停止进步或创造力”,而是要节省时间,不要在每个模型中都重新发明轮子。
如果你需要一个 960 像素宽的框架,并且你已经有一个健壮的框架代码,那么在我看来,不重用你的代码完全没有意义……你实际上是在浪费本可以用于创造力/进步的时间。
另外,请原谅我如果我错了,但我认为使用“CSS”的主要优势之一就是能够重用你的代码并简单地重新设置样式/主题元素……这不是 CSS 的唯一目的,但它绝对是主要优势之一。尤其是在你谈论的是改版而不是重新设计的时候。
这确实是一个主观讨论。如果你觉得重用你的代码会削弱你的创造力,那么你需要做让你感觉好的事情。如果你像我一样,多年来已经为许多网站设计了主题,那么预定义的类等并不会以负面方式影响我。萝卜青菜,各有所爱。 :)
提交
我发现自己经常将经常使用的 CSS 代码收集到一个组织良好的笔记部分。如果是我经常使用并且已经意识到的东西{例如:CSS 重置},我会使用代码片段。
我正在使用一个内置于 PHP 中的 css-sourcemerge 构建工具。
通过它,我可以使用相同的代码基础(如重置、框架等)。
作为单独的文件,以及当前项目中其他相同的 CSS 文件,如字体和布局。
这样,重用有效的 CSS 样式非常容易,在其他网站上也可以轻松节省时间。
这绝对是一个有趣的讨论。代码重用是我有时会做的事情。除了 CSS 重置之外,我还重用了基本框架,设置容器等,然后我所要做的就是调整一些 px,然后就大功告成了。
我过去常常将 CSS 分成以下几个部分。
Normalize
网格 (Grid)
模块 (Modules)
辅助类 (Helper classes)
第三方样式*
标准化、网格、辅助类——将应用于所有项目。
辅助类 -> 常用的可复用类 [alignleft, alignright, clearfix, fleft, fright 等..]
第三方样式包含来自其他插件开发人员的样式。例如:轮播图、日期选择器等。
(合并前需考虑 -> http 请求、大小、性能、站点范围内模块的出现频率等)
模块包含特定于该网站的 CSS 代码。
根据我的经验,你无法复用所有的样式,但半可复用的代码可以用来节省时间并在项目之间保持一致性。
几乎所有项目都有——搜索、面包屑导航、联系方式、新闻邮件、分页、列表等。识别这些重复出现的模块将有助于创建原始的 CSS 代码块,例如:
/*搜索*/
.search form{}
.search input{}
…
/*面包屑导航*/
.breadcrumb a{}
.breadcrumb span{}
…
等等。
将这些基础代码块创建为代码片段可以节省时间并提高所有项目的一致性。
关于 CSS 的可复用性,我从 http://zhangxinxu.com 那里得到了一种叫做“属性导向”的方法。
他写了一个 CSS 库:http://www.zhangxinxu.com/study/css/zxx.lib.css
他在 http://www.xiaomishu.com 工作。
我认为这非常酷。
我的英语不太好,也许我的英语让你感到困惑。
如果你想将一个“p”标签设置为 14px,你可以这样做
CSS
HTML
attribute-oriented是做什么的?它用于什么?我有一个通用的 CSS 文件,每次开始新项目时都会复制粘贴它。
很长一段时间里,我拒绝使用框架,总是从头编写 CSS,主要是因为我不想花时间学习它们,我有自己的一套做事方法。
最近这种情况发生了变化,我相信 CSS 复用是唯一可行的途径。我可以通过复用/自定义 Bootstrap 等框架来满足 90% 的设计需求。如果我有一些无法使用 Bootstrap 等框架实现的自定义需求,那么编写一些“项目特定 CSS”就非常容易。
复用 CSS 的好处是,你对其非常熟悉,结构化变得自然而然,你消除了创建通用结构的整个过程,这节省了大量时间。
最后,如果你可以开始构建一个包含你经常使用的元素的库,然后使用 Less 或 Sass 编译站点特定的样式,你就可以避免未使用的样式,并且不必每次构建新站点时都重新创建元素。随着时间的推移,你将拥有一个可供使用的酷炫 CSS 代码片段库。如果做得好,它将成为一个宝贵的工具箱,不复用至少一部分,如果不是大部分工作,那真是太疯狂了。