什么是css框架 css框架优缺点

html-css07

什么是css框架 css框架优缺点,第1张

CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作,提高工作效率。

优点

a) 提高开发效率。

b) 规范名称定义,便于维护。

c) 规范项目开发流程

d)css代码更清晰、简单。html代码更合理。

e) 大规模项目中可以减少用户下载

弊端

a) 学习成本提高。你需要了解整个框架,需要阅读框架的文档。

b)css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。

c)可能会无法帮助你的技术提高。太依赖框架,以至于很难排除bug。包括框架中本身就带的bug。

d) 选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活,越来越臃肿。

首先要做的是确保你要使用的框架有确定、能够精确表现详细文档的形式。这一步至关重要,将决定你能否运用框架来达到它的设计初衷。

Next, you should analyze what problems the specified frameworks of your choice will solve. As you come across frameworks that you believe might “fit the bill” for the project(s) at hand, then it would be wise to compare each of them and elaborate on which framework addresses which concerns and satisfies your needs.

接下来,你应当分析应用某个框架可能会遇到的问题。当你手边拿到你认为可能适合你的项目的框架时,比较聪明的做法是把这些框架做一下对比,详细比较各个框架主要涉及的方面,哪个更适合你。

CSS Frameworks allow you to rapidly improve and speed up your development time when used correctly, and provide a powerful way to style our websites and applications with flexibility and effectiveness.

正确地运用CSS框架,可以迅速提高我们的开发速度,并为整个站点和应用的样式化提供一种强大、高效的而且富有弹性的工具。

解决方法有很多,如果可以对html改动的话,就给你需要细化的页面元素加多一个class或者ID就行了,当然这种方法应该不是你想要的。那么接下来是不改变HTML的情况下,直接用css的方法来实现你想要的效果——

方法一 细化选择符

假如全局是这样来定义一个元素的样式的:.abc {background:#000},同时这个class为abc的元素是隶属于某个元素的,比如下面这样的html代码结构

<div class="container">

<div class="abc"></div>

</div>

那么在细化css里面,只需要在.abc前面加多一个父元素的选择符就行了:

.container .abc {background:#fff}

这样.container .abc的优先级就大于了.abc,自然细化css里面的background设置也就不会被全局CSS覆盖了~~

方法二 提升样式的优先级

这种方法个人不太推荐,相对而言会简单粗暴一些。同样是上面的例子,在细化CSS里面,只要在样式后面加一个!important,例如这样:

.abc {background:#fff !improtant}

这个样式的优先级就会默认提升到顶级,全局样式就无法影响到它了。

方法三 改变两个样式的加载顺序

这种方法比较简单,就是只要把细化css加载在全局css之后就行了,这样后面的样式就会自动覆盖前面的样式。不过如果你的html里面这两个样式表的加载顺序是先细化后全局的话,就要稍微调整一下代码才行。