扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
OOCSS 意为面向对象的CSS。这种方法有两种主要 观点:
成都创新互联公司公司2013年成立,先为山阴等服务建站,山阴等地企业,进行企业商务咨询服务。为山阴企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
使用这套结构,开发者能得到可以在不同地方使用的一般类。
在这一步,会存在两点(通常就好和坏):
此外,这种OOCSS的方法本身并没有明确的规则,而是抽象的建议,所以这种方法在生产中的结果会有不同。
实际结果就是,这种OOCSS的思想启发了其他人创建出属于他们自己更具体的代码结构。
SMACSS意为可扩展、模块化(Scalable and Modular Architecture)的CSS。这种方法的主要目的是减少代码量,并且使代码维护更简单。
Jonathan Snook将样式分为了5个部分:
另外,还建议对属于某个特定分组的类设定命名空间,并为JavaScript中使用的类使用单独的命名空间。
这种方法使得编写和维护代码都更加容易,并且吸引了很多开发者。
使用Atomic CSS,为每一个可重用的属性创建一个单独的类。比如 margin-top: 1px;就可以创建一个类 mt-1,width: 200px;可以创建一个w-200。
这种风格允许通过重复声明来尽可能减少代码,并且改变模块样式也相对容易,for example, when changing a technical task.
然而,这种方法也有很大的缺点:
因为这些缺点,这种方法遭到了大量批评。但是,这种方法对于大型项目而言,还是很有效的。
此外Atomic CSS也被用在不同的框架里来指明矫正元素样式,还有一些其它方法的展现层。
MCSS是多层CSS。这种书写代码的风格建议将样式分为几个部分,称为层(layers)。
层级之间的交互层次是很重要的:
AMCSS就是"Attribute Modules for CSS(css的属性模块)"。
让我们看一个例子:
Button
这样一个类的链并不简单,所以让我通过属性来组织这些值。
结果如下:
Button
为了避免命名冲突,添加命名空间到属性上是个好主意。然后,我们的按钮就变成了下面的样子:
Button
如果你使用验证器检查代码,会发现并没有am-button这个属性,所以可以在属性名称前加上data-。
使用一个鲜为人知,作为class属性的选择器"~ =" (IE7+):该选择器选择属性值包含指定单词的元素,用空格分隔。所以,这种class~="link"的选择器类似于a.class.button这样的选择器。即使专门使用,因为class选择器也只是该属性选择器的特殊情况。
因此,CSS代码
.button {...} .button--large {...} .button--blue {...}
转换为
[am-button] {...} [am-button~="large"] {...} [am-button~="blue"] {...}
如果你觉得这样的代码不常见,也可以使用不那么激进的AMCSS形式:
FUN表示选择器的扁平结构(Flat hierarchy of selectors),功能样式(Utility styles),命名分割组件(Name-spaced components)。
每个字母后面都有特定的原则:
一些开发者注意到使用这种原则来书写和维护代码是相当方便的;在某种程度上,作者拿出了最好的成果,并且以一种简洁的方式展示了这项技术。
这种方法对项目和代码结构还有不小要求,它只建立记录元素的首选形式和标记使用的方法。但是在小项目中,这些规则足够创建出足够高质量的代码。
正如你所见,这些方法里并没有一个完美的。这些方法中没有一条绝对的规则——你可以从开始使用一套方案来创建你自己的东西, 或者从头开始创建一条新的方法。
为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为前端工程师,乃至全栈工程师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习扣qun:784783012 欢迎大家进群。交流讨论,学习交流,共同进步。
当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有效资源还是很有必要的。
学习前端,我们是认真的
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流