CSS 字体:大型项目的CSS-字体教程免费ppt模版下载-道格办公

大型项目的CSS

css是前端领域的一个难缠户,一提到css,没有人会说难,也没有人愿意承认自己不会写,甚至在面试的过程中css相关的内容都很少提及,足以说明大家对css的不重视。你真的会写css吗?

关于css有两类问题值得我们重视:样式和工程。样式问题指的是具体的效果实现,能否实现某个效果,同一个效果有多种实现方式,如何抉择;工程问题是如何在大型项目中写出可维护性、可读的css。

在各种论坛中经常看到关于css是否是一门编程语言的争论。在我看来,最好用对待编程语言的态度来看待css,不要忽视css,否则,在项目后期,你会发现,你的css越来越混乱,important会越来越多,不同位置的类名互相冲突覆盖,改一个类的样式,要检查整个项目的页面是否受到影响,项目内部的css共享完全依赖拷贝……从这个角度来说,你敢说css不是编程语言?它完全有了像编程语言一样能把你搞得焦头烂额的能力。而这一切都来源于你在一开始对她的忽视与不屑。出来混,总要还的啊!

css的问题

盲目的定义基础样式

在项目开始之初,拿到UI设计稿,信心满满地开始定义css的全局基础样式,谢天谢地,css对这一点支持得很彻底,一处定义,所有页面都可以引用。

先来一个color-red。

.color-red {
	color: red
}

这样,在整个项目中,都可以给任意元素添加一个color-red类,美滋滋,我真是个小机灵鬼!

几个迭代过去,你已经把color-red这面红旗插满了整个项目。UED说,咱们改个版,所有红色的文本改为蓝色,红色的link不变!

哔!——(你发出的声音)

你又得屁颠屁颠地把一个一个的红旗拔出来,再插上蓝色的旗子(因为你不敢不干呀)。

命名冲突

在一个页面,你定义了一个.header,写了个完美的特效,发布到dev一看,就是不管用,横看竖看,本地是好的啊,神奇(生气)!过了若干时间的排查,另一个同事在另一个地方也写了一个.header,完美的覆盖了你的。把你头打歪!

编辑器可不会提醒你哦!

慢慢你会发现,这种命名冲突可太频繁了呀!头大,要不要用上css modular啊?

子类覆盖

有的小伙伴聪明地将类名嵌套定义,这就不会冲突了吧?嘿嘿,你想多了!

/* in article.css */
.article .title {
  border-bottom: 1px solid;
  font-size: 1.5em;
}

/* in widget.css */
.widget .title {
  color: gray;
  text-transform: uppercase;
}

如果在dom树里面,article和widget在一棵树的路径上,你说title是冲突呢还是不冲突呢?

以上的这些问题,在项目中相信大家都遇见过,并且项目越大,出现的概率就越高,最后就会演变成一座[屎]山。

“大家都别动,牵一发而动全身哦!”

“这就是蝴蝶效应吧???”

认识BEM

难道css这些问题就没法解决了吗?当然不是,我们来看看大神们是如何解决这些问题的。

BEM是Block、Element、Modifier的缩写,是一个类命名的规范。

首先我们来看一个例子:

/* Block */
.btn {}

/* Element that depends upon the block */ 
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}

相信小伙伴们已经有了一个初步的认知:

Block是一个独立的组件(元素),定义的了“组件是什么,按钮?还是菜单?”。

Element是属于Block,是依赖于Block的元素,描述的是“Block里面的什么?比如,文本?图标?”

Modifier用于描述Block或者Element的外在表现,比如大小、颜色、状态等。

看一个例子:

<form class="search-form search-form_theme_islands">
    <input class="search-form__input">
    <button class="search-form__button search-form__button_size_m">Search</button>
</form>

search-form是Block;

search-form_theme_islands是Modifier,描述了theme为islands的search-form;

search-form__input是Element,描述的是search-form内部的input元素;

search-form__button是Element,描述的是search-form内部的button元素;

search-form__button_size_m是Modifier,描述的是size为m的search-form__button;

这样写css是不是非常的清晰?瞬间就提高了可读性和可维护性?

概念如此简单,还不赶紧多了解一下?

另外,可能有些小伙伴也注意到了,Block和Element使用双下划线分隔,和Modifier是用中划线分隔,这也不是一成不变的,可以按照自己的喜好来决定如何分割。

Saas、Css Module

有些小伙伴可能会有疑问,BEM和Saas、Css Module有什么区别?解决的问题是一样的吗?

Sass是css的预处理器,在写css的时候定义了一套规范,经过编译处理后输出为css,和BEM是两个不同的概念。使用saas或less也能实现BEM。BEM其实是不推崇类名的嵌套定义的,如果想像sass那样嵌套的写出标准的BEM,可以使用@at-root。

Css Module解决的问题是多个模块的css的命名冲突问题,个人觉得是傻瓜式解决方案,在应用层的css-in-js应用比较多,适合css入门选手。要想写好css,还是得从根本上入手呀!

文章为用户上传,仅供非商业浏览。发布者:Lomu,转转请注明出处: https://www.daogebangong.com/articles/detail/da-xing-xiang-mu-di-CSS.html

(810)
打赏 支付宝扫一扫 支付宝扫一扫
single-end

相关推荐