近年来,在前端项目中, 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. html2canvas不能识别svg的解决方案

    最新有个功能需要截取网页成图片,于是用到比较流行的html2canvas,本来以为能顺顺利利的搞定,后来发现网页上的流程图连接线不在截图中.于是各种百度.bing,也搜到好多,但是感觉没有一个完整的代 ...

  2. 小米google play service停止工作解决办法,不root,不刷第三方recovery(也适用于其他的手机)

    问题: 原因是手机安卓系统是6.0.系统应用里面没有包含谷歌框架等一系列谷歌的小东西. 参考: http://www.miui.com/thread-3548436-1-1.html http://w ...

  3. python 重要的日志模块logging

    一,logging模块简介 logging模块是Python内置的标准模块,主要用于输出运行日志,可以设置输出日志的等级.日志保存路径.日志文件回滚等:相比print,具备如下优点: 可以通过设置不同 ...

  4. linux修改时区

    Linux修改时区 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任 CentOS6: 查看以前的时区: [root@localhost mysq ...

  5. 开源自己用python封装的一个Windows GUI(UI Automation)自动化工具,支持MFC,Windows Forms,WPF,Metro,Qt

    首先,大家可以看下这个链接 Windows GUI自动化测试技术的比较和展望 . 这篇文章介绍了Windows中GUI自动化的三种技术:Windows API, MSAA - Microsoft Ac ...

  6. conda下载速度慢——添加源

    清华提供的anaconda镜像,使用以后真的很快!尤其在学校龟速的网络环境里提速非常明显. https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ TU ...

  7. [Luogu 1395] 会议

    题目 Description 有一个村庄居住着n个村民,有n-1条路径使得这n个村民的家联通,每条路径的长度都为1.现在村长希望在某个村民家中召开一场会议,村长希望所有村民到会议地点的距离之和最小,那 ...

  8. Java多线程:Callable,Future,FutureTask

    一.Future Future和Callable基本是成对出现的,Callable负责产生结果,Future负责获取结果.     1.Callable接口类似于Runnable,只是Runnable ...

  9. [css 实践篇] 解决悬浮的<header> <footer>遮挡内容的处理技巧

    我写的实践篇 都是自己在实践项目所遇到的 "拦路虎" 还是很有借鉴的意义的.(实践才是检验真理的唯一标准呀),废话不多说,进去正题 position: fixed 绝对固定底部后会 ...

  10. 解决exlicpe以debug模式启动或运行速度非常慢的问题

    该问题可能是由于eclipse和tomcat的交互而产生的, 在以debug模式启动tomcat时,发生了读取文件错误, eclipse自动设置了断点,导致tomcat不能正常启动. 解决方法如下:以 ...