English 中文(简体)
是否最好为每个特别安全局的风格制定成文前规则,还是写出自己的规则?
原标题:Is it better to import a pre-written rule for each CSS style or to write your own rule (OOCSS)?

我正在阅读Nicole Sullivan s theory on 。 CSS。 简而言之,基本想法是,我们不从每当网站时的分数开始,而是最好将一些已成文的基本构件作为班级,然后是extend,以满足我们的需要。 (“外包”包括将更具体的/超重的班级加到超文本,因为CSS班不可能相互继承规则......希望在CSS4?) OCSS原则的启迪是,你不需要再做以下工作:Java Math。 你们每次都需要找到两倍的ine子。 该法典已经由(有人)撰写,因此没有使用?

虽然我认为这是一项抽象的伟大建议,但我从适用的角度难以理解。 [关于我的具体问题,下文重新提出,但我总是想读物,这样,我就感到可以自由停留一分钟,并与监督厅的资源有更密切的联系,例如,好处和批评等]

我的风格如下:

.heading {...} /* for all heading styles */
  .alpha   {...} /* specific changes for h1 */
  .beta    {...} /* specific changes for h2 */
  .gamma   {...} /* specific changes for h3 */
  .delta   {...} /* specific changes for h4 */
  .epsilon {...} /* specific changes for h5 */
  .zeta    {...} /* specific changes for h6 */

现在,第一名选任人负责任何标题,共有财产,如<代码>和家庭<>/代码>、<代码>字母-spacing等。 然后,每个“子类别”(不是子类)都有具体差异,例如<编码>color、font-code/code>、font-rights等。 这些“子类”是书面的<>> > ><>> 代码>。 为了接头1点,我写信:

<h1 class="heading alpha">Contact Me</h1>

事实上,我可以把任何内容如“条形状”和“条形”栏目“标题”改为“条形”。

[当然,我要说:

.heading {...}
  .alpha {
      extends: .heading;
      ...
  }
==============================
<h1 class="alpha">Contact</h1>

but we aren t quite at that point yet.]

我的问题是,如果“<条码>标题字母<>/代码>通常不作调整,那么我会做些什么来把这个例子放在中心位置? Nicole将说,我应当进口她的风格,并使用她的txtC{text-align:center;}。 规则,因此我的法典将变成:

<h1 class="heading alpha txtC">Contact Me</h1>

但是,我认为,基本上只有一对一对一对一对符合安保部的规则和类别才算出。 如果我使用这一方法,那么我就没有必要写一下我自己的风格,而只是把一小类(“列戈斯”)添加到我的超文本代码上,使其变得大体不可读。 想象:

    <p class="ital size-medium sans-ser txtJ med-height dark-blue">This is a 
    size 12pt, italic, Arial, left-right justified, 1.2em line height, dark 
    blue paragraph.</p>

书写一个类别(specialParagraphhttps://stackoverflow.com/questions/1437527/css-camelcase-vs-under-s-分”>(或para-special or whatever),然后在安保部内指定所有这些规则? 不需要腿? 就我而言,couldn t I only Add.alpha{text-align: Center;} to the first of my Liaison page? 或者甚至在线?

最佳回答

中央支助事务厅的路口主要是从其他图书馆借用CSS的幻灯,在你重新做以前没有人做过的事情时,只写新的规则。 显然,这是不可能的,而且可能不会比你自己开张。

妇女地位办公室的目的是尽可能地抽出你的风格。 更具体地说,它们是无法再利用的,而且当你最终撰写更多的特别安全局时。

为了在方案拟定中说明这一点,你不是把一辆汽车和一辆卡车等同各种共同方法,而是用车组,然后开车和卡车。

社会保障局的类似情况是将班级作为组合。 例如,如果你重新使用许多<代码><ul>要素,并且你发现,你不断将差值和胎面打到0,把风格打到零,你或许应该写一个<代码>。 对于你来说,将这一类别适用于你的<代码><ul>,而不是就所有导航和清单项目再写同样的三种规则。

Another point is that you need to think about your abstractions from a visual standpoint, for example, if you find that most of the sections of your site live in boxes with borders around them, you could create a basic class like:

.bordered-box {
    border-style:solid;
    border-width:1px;
    margin-bottom:20px;
    padding:20px;
}

然后,你会创建其他班子,以混合体,这些风格在<代码>上界定。

想把你的剪辑作为工具箱,你将重新用来建造一个场所,而不是仅仅把它当作你能够补充内容的特性清单来看待。

To your point about HTML like this: class="ital size-medium sans-ser txtJ med-height dark-blue", it s important to distinguish between creating CSS classes that define visual objects and CSS classes that simply define CSS properties. The latter is ridiculous. If you re going to do that you may as well just use inline styles.

问题回答

我认为,使用诸如<代码>txtC或>.dark-blue<>/code”之类的东西,是违背国家安全局的精神的,即你应该能够通过使用不同的风格改变网站的整个景象和感觉。

比如,可能出现的问题,你决定,你们希望你们的所有头目都不要 blue。 页: 1 或者,你可以将社会保障局改为<条码>dark-blue{彩色:红色;,但那类名称却没有任何意义。

如果你为每一项规则增加一个课堂,那么你就在每条内容的黑暗时代和<代码>align=“center”上ll。

如果你将使用“面向目标”的中央支助事务,那么这种服务就应当像现在这样使用,那么你有<代码>。 如果你想给你的主页头盔以不同的字面,那么你会增加<条码>。 你们希望你们的社保学会和班级名称能够描述它影响的内容,而不是它所提供的风格。

"Object-oriented CSS" is really just a design pattern for how to get most out of your CSS and is basicly the same approach Jonathan Snooks calls SMACSS.

您是否称呼监督厅或员工和管理当局协调处,这一办法的关键是,你创建诸如nav Digest/a>。 然后,可以通过在元件和(或)集装箱元件中增加课外课,以更具体的特点加强这些元件。 或者,作为一种替代办法,你可以采用身份识别要素或语义课来补充自己的习俗、社会、文化权利委员会规则。

Cascade Framework是基于这一方法的新型CSS框架。 这给你带来了最佳业绩、最佳灵活性和只留下微小足迹的最佳组合。





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

jquery ui dialog opens only once

I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.

Drop down background url in Safari Issue

selectBox.selectCSS { background: url(/Images/replacementSelectBackground.png) top left no-repeat height:auto; } I have an issue in Safari only where the image is not rendering on top ...

CSS specific for Safari

How do you target specifically safari in css with styles?

Aligning textarea in a form

Ive used the following css code to align my form elements: form { position:relative; } form input { position:absolute; left:11em; } However, the textarea element is not aligned correctly with the ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

CSS problem with page footer

I have defined my page footer in the css file as: #footer { position: absolute; height: 50px; text-align: center; background: #66CCCC; bottom: 0px; left: 0px; width: 100%; height: ...

热门标签