前端开发入门到实战:六种组织CSS的方式

澳门澳博集团app

17990800-aa7da58d00d88fb2.jpg

OOCSS意味着面向对象的CSS。这种方法有两个主要观点。

结构和设计的分离

容器和内容分离

通过这种结构,开发人员可以获得可以在不同位置使用的通用类。

在这一步中,将有两点(通常是好的和坏的):

Good:通过重用(DRY原则)减少代码量。

坏:组合使用。当您更改特定元素的样式时,您需要更改的不仅仅是CSS(因为大多数类是公共的),并且将添加新类。

另外,这种OOCSS方法本身没有明确的规则,而是抽象的建议,因此这种方法的结果在生产中会有所不同。

最终的结果是,这个OOCSS的想法激发了其他人创建属于他们的更具体的代码结构。

17990800-138d0ef329f5d792.jpg

SMACSS意味着可扩展和模块化架构的CSS。此方法的主要目的是减少代码量并使代码维护更容易。

Jonathan Snook将风格分为5部分:

基本规则。这些是主要的网页元素样式 - 正文,输入,按钮,ul,ol等。在这部分中,我们主要使用

HTML标记和属性选择器,在特殊情况下 - 类(例如,您有JavaScript样式选择);

布局规则。这些是全局元素的样式,例如

大小等等。 Jonathan建议在这些元素中使用id选择器,因为它们在页面中不会出现多次。但是,本文作者认为这不是一个好习惯。 (在样式文件中,无论何时出现id,都会在其他地方引起一些麻烦。)

模块规则。在单个页面中,块被多次使用。对于模块的分类,不建议使用id和tag选择器(分别用于重用和上下文独立)。

国家规则。在本节中,指定了模块的不同状态和网页,这是唯一可以使用关键字!Important的地方。

主题规则。设计您可能需要更改的样式。

还建议为属于特定分组的类设置名称空间,并为JavaScript中使用的类使用单独的名称空间。

这种方法使编写和维护代码变得更加容易,并吸引了许多开发人员。

17990800-b31d0e6889faabf5.jpg

使用Atomic CSS为每个可重用属性创建单独的类。例如,margin-top: 1px;你可以创建一个类mt-1,宽度: 200px;你可以创建一个w-200。

这种样式通过重复声明允许尽可能多的代码,并且在更改技术任务时更改模块样式相对容易。

但是,这种方法也有很大的缺点:

类名是描述性属性名,而不是元素本身的语义描述,有时使开发复杂化。

直接在HTML中显示设置。

由于这些缺点,这种方法受到了严厉的批评。但是,这种方法对于大型项目仍然非常有效。

此外,Atomic CSS还用于不同的框架中,以指示校正元素样式,以及一些其他表示方法。

17990800-84cf855cc31bb80f.jpg

MCSS是一个多层CSS。这种编写代码的方式建议将样式分成几个称为图层的部分。

底层(零层或基础)。这层代码负责重置浏览器样式(例如reset.css和

Normalize.css);

基础层包含网站重用的元素样式:按钮,文本输入框等。

Project层包含单独的模块和“context”根据客户端浏览器查看站点/应用程序设备元素,用户角色等的修改。

化妆品层代码是OOCSS的样式,对元素的外观稍作修改。建议仅保留影响元素外观的样式,但不要破坏网站的布局(例如颜色和不重要的缩进)。

关卡之间的互动程度很重要:

基础层定义中性样式,不影响其他层。

基础层的元素仅影响该层的类。

项目图层的元素可以影响基础图层和项目图层。

化妆品层以描述性OOCSS类(“原子”类)的形式设计,不影响其他CSS代码,可以选择在标签中使用。

17990800-4ed3c8ae740a0422.jpg

AMCSS是“CSS的属性模块”(css属性模块)。

我们来看一个例子:

这样一个类的链并不简单,所以让我通过属性组织这些值。

结果如下:

为避免命名冲突,最好将属性名称添加到属性中。然后我们的按钮变成这样:

如果使用验证器检查代码,您会发现没有am-button属性,因此您可以在属性名称之前添加数据。

使用鲜为人知的选择器作为类属性'='(IE7 +):此选择器选择属性值以包含指定单词的元素,用空格分隔。因此,类='link'选择器类似于a.class.button之类的选择器。即使是独占使用,因为类选择器只是属性选择器的特例。

所以CSS代码

转换为

如果您认为此类代码不常见,您也可以使用侵略性较小的AMCSS表单:

17990800-449193c15c07570e.jpg

FUN代表选择器,实用程序样式和名称间隔组件的Flat层次结构。

每封信背后都有具体原则:

F,选择器的平面层次结构:建议使用类来选择元素,避免无用的连接,而不是使用id。

U,实用程序样式:鼓励创建原子式服务来解决典型的拼凑任务,例如宽度为:的w100

100%;fr表示浮动:右;

N,名称间隔组件: Ben建议添加名称空间以指定特定模块元素的样式。这种方法避免了类名的重叠。

一些开发人员已经注意到使用这个原理编写和维护代码非常方便;在某种程度上,作者产生了最好的结果,并以简洁的方式介绍了该技术。

这种方法对项目和代码结构有很多要求。它只建立记录元素的首选形式和标记使用的方法。但在小型项目中,这些规则足以创建足够高质量的代码。

绝对规则您可以先使用一组程序来创建自己的东西,新方法。

我是一名五年前端工程师,希望本文能为您提供帮助!

在这里,我推荐我的前端学习交换扣qun:这是学习前端,如果你想制作一个很酷的网页,想学习编程。我编写了2019最全面的前端学习资料,从最基本的HTML + CSS + JS [酷特效,游戏,插件包装,设计模式]到移动HTML5项目实用学习资料已经排序并发送每一个前端合作伙伴,每天分享技术

点击:加入

96

IT智云编程

2019.07.27 21: 19

单词2011

17990800-aa7da58d00d88fb2.jpg

OOCSS意味着面向对象的CSS。这种方法有两个主要观点。

结构和设计的分离

容器和内容分离

通过这种结构,开发人员可以获得可以在不同位置使用的通用类。

在这一步中,将有两点(通常是好的和坏的):

Good:通过重用(DRY原则)减少代码量。

坏:组合使用。当您更改特定元素的样式时,您需要更改的不仅仅是CSS(因为大多数类是公共的),并且将添加新类。

另外,这种OOCSS方法本身没有明确的规则,而是抽象的建议,因此这种方法的结果在生产中会有所不同。

最终的结果是,这个OOCSS的想法激发了其他人创建属于他们的更具体的代码结构。

17990800-138d0ef329f5d792.jpg

SMACSS意味着可扩展和模块化架构的CSS。此方法的主要目的是减少代码量并使代码维护更容易。

Jonathan Snook将风格分为5部分:

基本规则。这些是主要的网页元素样式 - 正文,输入,按钮,ul,ol等。在这部分中,我们主要使用

HTML标记和属性选择器,在特殊情况下 - 类(例如,您有JavaScript样式选择);

布局规则。这些是全局元素的样式,例如

大小等等。 Jonathan建议在这些元素中使用id选择器,因为它们在页面中不会出现多次。但是,本文作者认为这不是一个好习惯。 (在样式文件中,无论何时出现id,都会在其他地方引起一些麻烦。)

模块规则。在单个页面中,块被多次使用。对于模块的分类,不建议使用id和tag选择器(分别用于重用和上下文独立)。

国家规则。在本节中,指定了模块的不同状态和网页,这是唯一可以使用关键字!Important的地方。

主题规则。设计您可能需要更改的样式。

还建议为属于特定分组的类设置名称空间,并为JavaScript中使用的类使用单独的名称空间。

这种方法使编写和维护代码变得更加容易,并吸引了许多开发人员。

17990800-b31d0e6889faabf5.jpg

使用Atomic CSS为每个可重用属性创建单独的类。例如,margin-top: 1px;你可以创建一个类mt-1,宽度: 200px;你可以创建一个w-200。

这种样式通过重复声明允许尽可能多的代码,并且在更改技术任务时更改模块样式相对容易。

但是,这种方法也有很大的缺点:

类名是描述性属性名,而不是元素本身的语义描述,有时使开发复杂化。

直接在HTML中显示设置。

由于这些缺点,这种方法受到了严厉的批评。但是,这种方法对于大型项目仍然非常有效。

此外,Atomic CSS还用于不同的框架中,以指示校正元素样式,以及一些其他表示方法。

17990800-84cf855cc31bb80f.jpg

MCSS是一个多层CSS。这种编写代码的方式建议将样式分成几个称为图层的部分。

底层(零层或基础)。这层代码负责重置浏览器样式(例如reset.css和

Normalize.css);

基础层包含网站重用的元素样式:按钮,文本输入框等。

Project层包含单独的模块和“context”根据客户端浏览器查看站点/应用程序设备元素,用户角色等的修改。

化妆品层代码是OOCSS的样式,对元素的外观稍作修改。建议仅保留影响元素外观的样式,但不要破坏网站的布局(例如颜色和不重要的缩进)。

关卡之间的互动程度很重要:

基础层定义中性样式,不影响其他层。

基础层的元素仅影响该层的类。

项目图层的元素可以影响基础图层和项目图层。

化妆品层以描述性OOCSS类(“原子”类)的形式设计,不影响其他CSS代码,可以选择在标签中使用。

17990800-4ed3c8ae740a0422.jpg

AMCSS是“CSS的属性模块”(css属性模块)。

我们来看一个例子:

这样一个类的链并不简单,所以让我通过属性组织这些值。

结果如下:

为避免命名冲突,最好将属性名称添加到属性中。然后我们的按钮变成这样:

如果使用验证器检查代码,您会发现没有am-button属性,因此您可以在属性名称之前添加数据。

使用鲜为人知的选择器作为类属性'='(IE7 +):此选择器选择属性值以包含指定单词的元素,用空格分隔。因此,类='link'选择器类似于a.class.button之类的选择器。即使是独占使用,因为类选择器只是属性选择器的特例。

所以CSS代码

转换为

如果您认为此类代码不常见,您也可以使用侵略性较小的AMCSS表单:

17990800-449193c15c07570e.jpg

FUN代表选择器,实用程序样式和名称间隔组件的Flat层次结构。

每封信背后都有具体原则:

F,选择器的平面层次结构:建议使用类来选择元素,避免无用的连接,而不是使用id。

U,实用程序样式:鼓励创建原子式服务来解决典型的拼凑任务,例如宽度为:的w100

100%;fr表示浮动:右;

N,名称间隔组件: Ben建议添加名称空间以指定特定模块元素的样式。这种方法避免了类名的重叠。

一些开发人员已经注意到使用这个原理编写和维护代码非常方便;在某种程度上,作者产生了最好的结果,并以简洁的方式介绍了该技术。

这种方法对项目和代码结构有很多要求。它只建立记录元素的首选形式和标记使用的方法。但在小型项目中,这些规则足以创建足够高质量的代码。

绝对规则您可以先使用一组程序来创建自己的东西,新方法。

我是一名五年前端工程师,希望本文能为您提供帮助!

在这里,我推荐我的前端学习交换扣qun:这是学习前端,如果你想制作一个很酷的网页,想学习编程。我编写了2019最全面的前端学习资料,从最基本的HTML + CSS + JS [酷特效,游戏,插件包装,设计模式]到移动HTML5项目实用学习资料已经排序并发送每一个前端合作伙伴,每天分享技术

点击:加入

17990800-aa7da58d00d88fb2.jpg

OOCSS意味着面向对象的CSS。这种方法有两个主要观点。

结构和设计的分离

容器和内容分离

通过这种结构,开发人员可以获得可以在不同位置使用的通用类。

在这一步中,将有两点(通常是好的和坏的):

Good:通过重用(DRY原则)减少代码量。

坏:组合使用。当您更改特定元素的样式时,您需要更改的不仅仅是CSS(因为大多数类是公共的),并且将添加新类。

另外,这种OOCSS方法本身没有明确的规则,而是抽象的建议,因此这种方法的结果在生产中会有所不同。

最终的结果是,这个OOCSS的想法激发了其他人创建属于他们的更具体的代码结构。

17990800-138d0ef329f5d792.jpg

SMACSS意味着可扩展和模块化架构的CSS。此方法的主要目的是减少代码量并使代码维护更容易。

Jonathan Snook将风格分为5部分:

基本规则。这些是主要的网页元素样式 - 正文,输入,按钮,ul,ol等。在这部分中,我们主要使用

HTML标记和属性选择器,在特殊情况下 - 类(例如,您有JavaScript样式选择);

布局规则。这些是全局元素的样式,例如

大小等等。 Jonathan建议在这些元素中使用id选择器,因为它们在页面中不会出现多次。但是,本文作者认为这不是一个好习惯。 (在样式文件中,无论何时出现id,都会在其他地方引起一些麻烦。)

模块规则。在单个页面中,块被多次使用。对于模块的分类,不建议使用id和tag选择器(分别用于重用和上下文独立)。

国家规则。在本节中,指定了模块的不同状态和网页,这是唯一可以使用关键字!Important的地方。

主题规则。设计您可能需要更改的样式。

还建议为属于特定分组的类设置名称空间,并为JavaScript中使用的类使用单独的名称空间。

这种方法使编写和维护代码变得更加容易,并吸引了许多开发人员。

17990800-b31d0e6889faabf5.jpg

使用Atomic CSS为每个可重用属性创建单独的类。例如,margin-top: 1px;你可以创建一个类mt-1,宽度: 200px;你可以创建一个w-200。

这种样式通过重复声明允许尽可能多的代码,并且在更改技术任务时更改模块样式相对容易。

但是,这种方法也有很大的缺点:

类名是描述性属性名,而不是元素本身的语义描述,有时使开发复杂化。

直接在HTML中显示设置。

由于这些缺点,这种方法受到了严厉的批评。但是,这种方法对于大型项目仍然非常有效。

此外,Atomic CSS还用于不同的框架中,以指示校正元素样式,以及一些其他表示方法。

17990800-84cf855cc31bb80f.jpg

MCSS是一个多层CSS。这种编写代码的方式建议将样式分成几个称为图层的部分。

底层(零层或基础)。这层代码负责重置浏览器样式(例如reset.css和

Normalize.css);

基础层包含网站重用的元素样式:按钮,文本输入框等。

Project层包含单独的模块和“context”根据客户端浏览器查看站点/应用程序设备元素,用户角色等的修改。

化妆品层代码是OOCSS的样式,对元素的外观稍作修改。建议仅保留影响元素外观的样式,但不要破坏网站的布局(例如颜色和不重要的缩进)。

关卡之间的互动程度很重要:

基础层定义中性样式,不影响其他层。

基础层的元素仅影响该层的类。

项目图层的元素可以影响基础图层和项目图层。

化妆品层以描述性OOCSS类(“原子”类)的形式设计,不影响其他CSS代码,可以选择在标签中使用。

17990800-4ed3c8ae740a0422.jpg

AMCSS是“CSS的属性模块”(css属性模块)。

我们来看一个例子:

这样一个类的链并不简单,所以让我通过属性组织这些值。

结果如下:

为避免命名冲突,最好将属性名称添加到属性中。然后我们的按钮变成这样:

如果使用验证器检查代码,您会发现没有am-button属性,因此您可以在属性名称之前添加数据。

使用鲜为人知的选择器作为类属性'='(IE7 +):此选择器选择属性值以包含指定单词的元素,用空格分隔。因此,类='link'选择器类似于a.class.button之类的选择器。即使是独占使用,因为类选择器只是属性选择器的特例。

所以CSS代码

转换为

如果您认为此类代码不常见,您也可以使用侵略性较小的AMCSS表单:

17990800-449193c15c07570e.jpg

FUN代表选择器,实用程序样式和名称间隔组件的Flat层次结构。

每封信背后都有具体原则:

F,选择器的平面层次结构:建议使用类来选择元素,避免无用的连接,而不是使用id。

U,实用程序样式:鼓励创建原子式服务来解决典型的拼凑任务,例如宽度为:的w100

100%;fr表示浮动:右;

N,名称间隔组件: Ben建议添加名称空间以指定特定模块元素的样式。这种方法避免了类名的重叠。

一些开发人员已经注意到使用这个原理编写和维护代码非常方便;在某种程度上,作者产生了最好的结果,并以简洁的方式介绍了该技术。

这种方法对项目和代码结构有很多要求。它只建立记录元素的首选形式和标记使用的方法。但在小型项目中,这些规则足以创建足够高质量的代码。

绝对规则您可以先使用一组程序来创建自己的东西,新方法。

我是一名五年前端工程师,希望本文能为您提供帮助!

在这里,我推荐我的前端学习交换扣qun:这是学习前端,如果你想制作一个很酷的网页,想学习编程。我编写了2019最全面的前端学习资料,从最基本的HTML + CSS + JS [酷特效,游戏,插件包装,设计模式]到移动HTML5项目实用学习资料已经排序并发送每一个前端合作伙伴,每天分享技术

点击:加入