近年来,在前端项目中, Bootstrap 已经成为了一个非常受欢迎的工具。 Bootstrap 的确有很多优点,然而,如果你的团队中恰好有一个专职的前端工程师。那我推荐你们不要使用 Bootstrap ,因为在某些情况下, Bootstrap 弊大于利。

Bootstrap 对什么有好处

Bootstrap 带有栅格系统,也有针对很多组件的样式和脚本,包括表格,导航栏,进度条,分页,表单样式,模态框和提示框。在这篇文章中,谈论 ‘Bootstrap’,我的意思是包含所有组件的实践(与只选择包括一部分相反,例如, 只是栅格)。 对于需要把项目输出成标记语言,并且不想操心将结果样式化的后端开发工程师来讲, Bootstrap 是一个好的工具。如果因为某些原因,比如预算或其他因素,在一个团队里没有前端开发者或设计师, Bootstrap 适合用来填坑。

对于设计师来讲, Bootstrap 也有一席之地:它是一个很有价值的工具,用来从设计软件快速移动到浏览器,而不需要过度担心前端代码策略。 甚至对于主要和数据打交道很少关注 UI 和布局的前端开发者,让一个开发者关注于搭建应用本身, Bootstrap 在这一方面也很好。

什么时候你最好别用它

然而,如果你的团队里有一个前端开发工程师,使用 Bootstrap 会潜在地浪费他们宝贵的时间,并且将他们的注意力从解决实际的问题转移。 Bootstrap 恰恰做的是前端开发者擅长的,但是它以一种很普遍的方式来实现。你的网站或应用是很具体的,所以如果你用一个普遍的系统,它有可能不会起作用。这意味着你的代码将包含全部的可能性才有可能实现具体的需求。

当你需要很多代码来覆盖 Bootstrap 的样式

Bootstrap 是由 Twitter 的开发者开发来系统化他们网站应用的样式。当你的网站应用的样式和他们不一样,这意味着你不得不覆盖掉他们的样式来。 大多数网站的样式并不像 Twitter 那样。因此,如果他们安装 Bootstrap ,他们会覆盖掉很多样式。 在一些我参与的网站中,我发现多达十分之九的 Bootstrap 样式会被网站自己的样式覆盖掉。很坦率的讲,这是荒谬的。

当它让简单的事情复杂化

CSS 用来为网页增加一系列简单的在某些条件下会被代码覆盖的样式规则。当你的网站中有 Bootstrap 的样式,几乎网站内所有的东西都已经被一系列复杂的代码规则设置好了。任何例外都会超出这个框架所设置好的规则。而大多数网站所面临的问题正是它们的样式对于 Bootstrap 来说往往是例外。 Bootstrap 的样式是复杂的:你会有一个带有 12 列的栅格系统,这 12 列能以你想要的任何方式组合使用,有特殊的类来基于用户的视图尺寸设置不同的偏移量和列结构。很多网站是简单的:在小屏幕上没有列,在更大的屏幕会有一到两列。

当它产生了技术债务

一个前端代码库依赖 Bootstrap 的时间越长,纠缠的越多,并且它包含了更多只是用来覆盖掉 Bootstrap 代码的规则。这常常导致代码库陷于巨大的技术债务,尤其当前端代码以经常需要手动更新的方式整合在后端的时候。

当它引入可能不是你的应用的命名习惯

命名很难,而且想出有意义的属于你的团队和应用的命名习惯很花时间。对于组件名使用合适的名词,不要和一些名词的缩写像 ’btn’ 的类名混淆。

结论

在开发网站的过程中 Bootstrap 和朋友在各种各样的阶段是有好处的。然而它们不是一个能使任何事都简单的魔法:相反,会有很多能够通过让前端开发者关注于亲自开发 UI 来避免的缺点。

你考虑清楚了吗就决定用 Bootstrap ?的更多相关文章

  1. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  2. ABP入门系列(1)——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  3. Hangfire项目实践分享

    Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...

  4. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  5. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  6. Angular2入门系列教程3-多个组件,主从关系

    上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...

  7. Vagrant 基础全面解析

    这篇 Vagrant 入门文章将带你创建一个 Vagrant 项目,这个过程将会用到 Vagrant 所提供的主要基本特性.如果想了解 Vagrant 能为你带来哪些好处,可以阅读 Vagrant 官 ...

  8. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  9. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  10. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

随机推荐

  1. play @Before 的使用

    用play 框架也又一段时间了,也算是有了些经验,今天就总结下@Before 的使用. 这个注解能主要在控制器中使用,用于在Action 前进行拦截 unless 表示不用拦截 的Action @Be ...

  2. 解决JSON.stringify()自动将中文转译成unicode的方法

    最近在工作中,发现在IE8下JSON.stringify()自动将中文转译为unicode编码,原本选择的中文字符,传到后台变为了unicode编码,即\u****的形式.查找资料后发现,与标准的JS ...

  3. python 中的 args,*args,**kwargs的区别

    一.*args的使用方法 *args 用来将参数打包成tuple给函数体调用 例子一:def function(*args):      print(args, type(args))function ...

  4. 分享一个命令行计算器-bc

    分享一个命令行计算器-bc 假如你在一个图形桌面环境中需要一个计算器时,你可能只需要一路进行点击便可以找到一个计算器.例如,Fedora 工作站中就已经包含了一个名为 Calculator 的工具.它 ...

  5. PHP开发程序员的学习路线

    PHP开发程序员的学习路线 兄弟连PHP培训,简单为大家梳理了每个阶段PHP程序员的技术要求,来帮助很多PHP程序做对照设定学习成长目标. 第一阶段:基础阶段(基础PHP程序员) 重点:把LNMP搞熟 ...

  6. 数据库操作sql

    一.把从另外一张表里查到的值插入到前表: 1. 表结构完全一样 insert into 表1 select * from 表2 2. 表结构不一样(这种情况下得指定列名) insert into 表1 ...

  7. susmote个人网站博客论坛(TexTec | 关注互联网技术,传播极客精神)

    网站地址 www.susmote.com www.textec.club 欢迎您的访问

  8. java File类常用方法

    file类常用方法 delete()删除此抽象路径名表示的文件和目录. equals()测试此抽象路径名与给定对象是否相等. exists()测试此抽象路径名表示的文件或目录是否存在. getName ...

  9. npm 和bower之间的区别

    (一) npm是node js的包管理器,用来下载安装node js的第三方工具包,也可以用来发布你自己开发的工具包.通过npm可以安装bower,命令如下: npm install -g bower ...

  10. ELK学习笔记(一)安装Elasticsearch、Kibana、Logstash和X-Pack

    最近在学习ELK的时候踩了不少的坑,特此写个笔记记录下学习过程. 日志主要包括系统日志.应用程序日志和安全日志.系统运维和开发人员可以通过日志了解服务器软硬件信息.检查配置过程中的错误及错误发生的原因 ...