你考虑清楚了吗就决定用 Bootstrap ?
近年来,在前端项目中, 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 ?的更多相关文章
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- ABP入门系列(1)——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- Hangfire项目实践分享
Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程3-多个组件,主从关系
上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...
- Vagrant 基础全面解析
这篇 Vagrant 入门文章将带你创建一个 Vagrant 项目,这个过程将会用到 Vagrant 所提供的主要基本特性.如果想了解 Vagrant 能为你带来哪些好处,可以阅读 Vagrant 官 ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 旺财速啃H5框架之Bootstrap(五)
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
随机推荐
- 在 WinForm 中 如何实现 加载等待功能
1,需要一个动态的londing文件:在项目中我们新建一个文件夹来存放它: 2,在需要出现londing状态的窗体上加上一个Panel: 黄色区域是Panel,灰色的是需要被加载的区域.当需要触发lo ...
- python已安装了DNS处理模块,执行时却报错ImportError
一.代码: #!/usr/bin/python import dns.resolver ............此处省略 二.故障报错 ubuntu:~/automation/001_base$ py ...
- 微信小程序基于腾讯云对象存储的图片上传
在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到 ...
- Python+ Selenium自动化登录腾讯QQ邮箱实例
学习了Python语言一段时间后,在公司的项目里也使用到了python来写测试脚本,一些重复的操作都使用脚本来处理了.大大的提高工作效率,减少了一些手工重复的操作. 以下是使用unittest框架写的 ...
- 设计模式——桥接模式(C++实现)
[root@ ~/learn_code/design_pattern/18_bridge]$ cat Abstraction.h #ifndef _ABSTRACTION_H_ #define _AB ...
- Win7硬盘的AHCI模式
1.什么是硬盘的AHCI模式? AHCI是串行ATA高级主控接口的英文缩写,它是Intel所主导的一项技术,它允许存储驱动程序启用高级SATA功能,如本机命令队列(NCQ)和热插拔.开启AHCI之后可 ...
- php 制作圆形图片
function createRoundImg($imgpath) { $ext = pathinfo($imgpath); $src_img = null; switch ($ext['extens ...
- ELK学习笔记(二)-HelloWorld实例+Kibana介绍
这次我们通过一个最简单的HelloWolrd来了解一下ELK的使用. 进入logstash的config目录,创建stdin.conf 文件. input{ stdin{ } } output{ st ...
- python全栈学习--day11(函数高级应用)
一,函数名是什么? 函数名是函数的名字,本质:变量,特殊的变量. 函数名()执行此函数 ''' 在函数的执行(调用)时:打散. *可迭代对象(str,tuple,list,dict(key))每一个元 ...
- web服务器学习4---httpd-2.4.29优化
实验环境: 环境:CentOS 7.4 软件版本:httpd-2.4.29 一.网页压缩 1.检查是否安装压缩模块 apachectl -D DUMP_MODULES | grep deflate 如 ...