面向对象的CSS:应该吗? [英] Object oriented CSS: should it matter?

查看:95
本文介绍了面向对象的CSS:应该吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我刚刚发现这个有趣的简报 面向对象CSS的概念。这似乎是一个好主意,但演示是相当短,并没有给出很多例子。

I've just found this interesting presentation about the concept of "object oriented CSS". It seems to be a good idea but the presentation is rather short and doesn't give a lot of examples.

我的问题:


  • 这个概念是相关的吗?

  • OOCSS的好处是什么?


也许你认为这个概念并不重要

Maybe, you think this concept doesn't matter


  • 为什么?

  • 您使用什么样的工作流程(和规则)?

推荐答案

是否相关?



为CSS作者使用的方法命名,与创建styleguides的方式大致相同。它有用吗?是。是否容易继承别人的OOCSS工作?

Is it relevant?

I think so, it's basically putting a name to an approach used by the CSS author, in much the same light as creating styleguides. Is it useful? Yes. Is it easy to inherit someone else's OOCSS work? Probably not.

某个组件的抽象风格属性总是好的在整个网站的风格一致性。假设您想要更改组件的边框样式以获得全新的外观:通常,您可以更改边框样式主风格的几行。

Abstracting style attributes of a certain component is always good for style consistency over the whole of the site. Say you want to change the border style of the components for a fresh new look: You'd typically change a few lines concerning the border-style master style.

我在网络应用程序中创建了一个关于所有小部件的UI开发人员风格指南(或风格词汇表)。每个小部件将根据其预期内容分类。每个小部件可以具有任何数量的预定义的盒子样式,背景样式。

I created a UI Developers styleguide (or style vocabulary) concerning all the 'widgets' in our web app. Each widget would be classified according to its intended contents. Each widget could have any number of predefined box-styles, background-styles. Each widget could also lay out its contents different depending on what parent element it was placed under.

这样的代码如下:< div class =free bg_neutral form_search> 用于每个包装器/容器,每个类分别是:Box Style,Background Style,Content。
然后,处理HTML / Views的开发人员可以轻松地切换任何预定义的样式,并用更合适的样式替换它们。例如以 bg_neutral 替换为 bg_gradient_fff_eee 代替渐变背景。

This amounted to code like: <div class="free bg_neutral form_search"> being used for each wrapper / container, with each class being: "Box Style, Background Style, Content" respectively. The developers working on the HTML / Views could then easily switch out any of the predefined styles and replace them with more appropriate ones. e.g. replacing bg_neutral with bg_gradient_fff_eee for a gradient background instead.

我认为我们保存了无数的CSS代码,因为我们可以在几个核心的小部件上使用可互换的属性,而不是定义每个小部件的每个独特的化身。它还使得跨浏览器修复更容易,因为你可以独立处理小部件样式。 (大多数浏览器错误与框尺寸和位置/布局相关)

I think we saved countless lines of CSS code, because we could use interchangeable properties on a few core 'widgets', rather than defining each and every unique incarnation of each 'widget'. It also makes cross-browser fixing much easier, because you can tackle the 'widgets' styles independently. (Most browser bugs are related to box dimensions and position/layout)

在我看来,更多的UI人员需要通过StyleGuide / Style Vocab练习来设计和实现他们的网站的前端。在网站上使用的可视元素中创建一致性。一致的视觉效果通常会产生一致且高效的CSS!

In my opinion, more UI folks need to go thru a StyleGuide / Style Vocab exercise when designing and implementing the front-end of their sites. Create consistency in the visual elements used on the site. Consistent visuals usually result in consistent and efficient CSS!

希望有帮助,
nd

Hope that helps, nd

这篇关于面向对象的CSS:应该吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

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