贵阳网站开发:理解CSS写作方法-极简慕枫

贵阳网站开发:理解CSS写作方法

2019-07-23

在这篇文章里我们会看到CSS编写方法是什么?,一些众所周知的方法,以及它们如何对我们优化CSS代码有用。让我们从最简单的问题开始。什么是方法论?

方法论是方法体系..把一种方法简单地看作是一种系统地做某事的方式,以某种预先设定的方式去做事情来达到我们想要的结果。

为了取得更好的结果,我们通过更好的计划来改进我们的方法。,更改顺序,简化步骤-任何起作用的步骤。更快更多高效率.

CSS方法

现在让我们来谈谈CSS方法。就像生活中的每一件事一样,我们也有一种编写CSS的方法:有些先写重设CSS,有些地方布局样式最后,有些以两到三个类作为元素的样式,还有一些在一个文件中编写所有CSS代码。

我们喜欢的方法要么是随着时间的推移而建立起来的,要么是受其他match人的影响,或者是我们工作场所要求的,或者是由于以上所有的原因。但是随着时间的推移,css退伍军人已经制定了编写CSS的方法更多的灵活的,可定义的,可重用的,可理解的可管理.

我们将研究这些制定的方法,其中包括:

  1. 支助厅

    (面向对象的CSS)
  2. 边界元

    (块、元素、修饰符)
  3. ACSS

    (原子CSS)
  4. SMACSS

    (CSS的可伸缩和模块化体系结构)


:以下任何概念都不应与任何可能具有与这些方法相同的名称和概念的框架、库或工具混淆。这篇文章只是关于写CSS的方法。

1.支助厅

尼科尔·沙利文2008年,面向对象的CSS(OOCSS)的关键概念包括CSS。对象识别、分离结构和视觉风格,避免基于位置的风格。

贵阳网站开发

在OOCSS中,Nicole建议我们做的第一步就是识别CSS中的对象.

“基本上,CSS”对象“是一种重复的视觉模式,可以抽象为HTML、CSS,可能还有JavaScript的独立片段。然后,可以在整个站点中重用该对象。-Nicole Sullivan,Gizub(中央支助厅)

举个例子,这个结构从这个网站。下面是一个重复的可视化模式,它有自己独立的HTML和/或CSS:

贵阳网站开发

我们这里有两种类型的对象,一个更大的标题预览,我们将命名它。post-preview-primary还有一个边栏,上面有我们要命名的标题post-preview-secondary.

我们需要分离结构与表皮(即创建对象外观的样式)。这两种类型的对象有不同的结构,一种是在一个更大的盒子里,尽管它们看起来很相似,左边是图像,右边是标题。

让我们给这两个对象的图像一个类post-preview-image并添加将图像放在左边的代码。这使我们不必重复在CSS中的对象中放置图像的代码。如果有其他类似的对象,我们将重用post-preview-image为了他们。

皮肤分离也可以用于更简单的样式,如边界或背景..如果有多个具有相同蓝色边框的对象,为蓝色边框创建一个单独的类并将其添加到对象中减少蓝色边框必须编码的次数在CSS中。

妮可还建议不根据位置添加样式例如,与其针对特定div中的所有链接来突出显示,不如将这些链接设置为荧光类使用适当的CSS样式。这样,当您需要高亮显示页面其他部分中的链接时,您可以重用荧光笔类。

支助厅的优点可重用的视觉造型代码,位置灵活的代码,减少深嵌套选择器。

反方 支助厅:没有相当数量的重复视觉模式,分离结构和视觉风格代码似乎没有必要。

2.边界与平等问题

由Yandex开发人员于2009年开发,BEM(块、元素、修饰符)的关键概念包括识别。块, 元素 & 改性剂并据此命名。

贵阳网站开发

“块”与“对象”(从前面的示例中)本质上是一样的,“元素”是指块的组件(上图中的图像、标题、预览文本)。preview-post-)。当块或元素的状态发生变化时,可以使用“修饰符”,例如,当您将活动类添加到菜单项以突出显示时,活动类充当您的修饰符。

一旦确定了组件,就可以相应地命名它们。例如:

  • 一个菜单块将拥有这个类。

    menu

  • 它的项目将有类。

    menu__item

    (块和元素用双下划线分隔)
  • 菜单禁用状态的修饰符可以具有类。

    menu_disabled

    (由单个下划线分隔的修饰符)
  • 菜单项禁用状态的修饰符可以是

    menu__item_disabled.

对于修饰符,我们也可以使用key_value命名格式。例如,为了区分任何链接到过时项目的菜单项,我们可以给它们类。menu__item_status_obsolete,对于指向挂起的文档的任何菜单项的样式,类名可以是menu__item_status_pending.

可以将命名修改为对您有用的名称。我们的想法是从类名中识别、块、元素和修饰符..中列出的一些命名系统。边界点.

BEM的网站也列出了如何将块、元素和修饰符隔离引入css文件系统?..像“按钮”和“输入”这样的块可以有自己的文件夹,这些文件夹包含与这些块相关联的文件(.css,.js),这使得当我们想在其他项目中导入这些块时更容易。

BEM的优点:易于使用的类名和减少深CSS选择器。

BEM的缺点:为了保持名字看起来正常,BEM建议我们保持块的元素嵌套浅。

3.ACSS

著名的雅虎公司,在第一届会议的尾声21世纪十年世纪,ACSS的关键概念包括为最原子级别的样式创建类,即属性值对,然后根据需要在HTML中使用它们。

贵阳网站开发

很难确定ACSS(原子CSS)是什么时候开发出来的,因为这个概念已经使用了一段时间了。开发人员一直在使用类似于.clearfix{overflow: hidden}很长一段时间。ACSS的想法是为几乎每个可重用的、与非内容相关的属性值对设置一个类。我们需要在我们的站点中,并在需要时将这些类添加到HTML元素中。

下面是一个基于ACSS的类的例子,以及它们是如何在HTML中使用的。

1
2
3
4
.mr-8{margin-right: 8px;}
.fl-r{float:right;}
 
<div class='mr-8 fl-r'> </div>

正如您所看到的,使用此方法,类的数量将越来越多,而HTML将被所有这些类所拥挤。这种方法并不是100%有效的,但如果需要的话可以使用。毕竟,雅虎就是这样做的。

ACSS的优点:在不离开HTML的情况下对HTML进行样式化。

ACSS的缺点:课程太多了,不太整洁,你可能会讨厌它。

4.SMACSS

2011年开发乔纳森·斯努克SMACSS(可扩展和模块化CSS体系结构)通过识别5种不同类型的样式规则来工作。类名和归档系统是基于这些创建的。

“SMACSS是一种检查您的设计过程的方法,也是将这些僵化的框架融入到一个灵活的思想过程中的一种方法。-乔纳森·斯努克“

贵阳网站开发

SMACSS标识了5种类型的样式规则,即基地,布局,模块,状态,和主题.

  • 基本样式是指向基本HTML标记的默认样式,如

    <p>, <a:link>.

  • 布局样式是用来定义页面布局的样式,比如编写页眉、页脚和边菜单的代码。
  • 模块样式是特定于一个模块,如图库或幻灯片。
  • 状态样式用于突出显示具有隐藏或禁用等可变状态的元素。
  • 主题用于更改页面的可视方案。

可以使用类名中的前缀来标识不同的样式规则,例如,l-头(用于布局)或t-头(用于主题)。我们还可以通过将这些规则放置在单独的文件和文件夹中来组织这些不同类型的规则。

SMACSS的优点:更好的组织代码。match

SMACSS的缺点:我想不出。

有免费的在线图书您可以阅读SMACSS,也可以购买它的电子书更多地研究它。贵阳网站开发

结语

以上css方法将为您提供一个系统管理和优化CSS代码..它们可以组合在一起,比如OOCSS-SMACSS,或者OOCSS-BEM,或者BEM-SAMCSS,以满足您的需要。

如果您想要一个执行CSS方法的自动化系统,也可以使用框架和库

贵阳网站开发