react 改变css样式_web前端入门到实战:编写CSS代码的8个策略,资深开发工程师总结...
- 减少CSS文件的长度,以便浏览。
- 明确你的CSS类需要做什么,而不是定义一堆已经产生的垃圾。
这里有一个常见问题是CSS没有清理干净,此时,为了简洁起见,可以完全删除。2、将CSS看作可重用组件不要将CSS元素视为每个单独页面上的特定表单或元素,如果你可以定义可重用的CSS实用程序和组件以供自己使用,则可以减少很多复杂性。编写旨在重用的类的作用:
- 确保你的设计在不同的页面之间保持一致。当你在很多页面上共享CSS类时,你知道当你改变这个类时,它会在每一个出现的页面发生改变。
- 这使得编写CSS真的很快。首先,如果大多数样式被定义为你所知道的实用程序和类,那么你就不必花费大量时间刷新和重新创建应用程序中已存在的样式。
3、在CSS中定义实用工具来干你的CSS我们将’utilities’定义为一个CSS类,实际上它只用来做一件特定的事情,而不是封装整个元素。你会看到这个策略经常用于流行的CSS框架,如Bootstrap和Foundation。在这些流行的框架中你所看到的一些例子是:
.hide { display: none; }
.text-center { text-align: center; }
例如,使用.hide,就不必每次想要在页面上隐藏元素时就得编写一个新的类——你只需要在你的元素上加上.hide类,它会使元素display: none; )
我们写了一些实用程序文件,这些文件在应用程序之间共享,使用一些常用的实用程序可以减少为每个元素编写特定样式的需求。一个很好的例子是我们如何使用margin和padding实用程序。下面是padding实用程序的一个简单例子:
.padding-0 { padding: 0; }
.padding-xxs { padding: 5px; }
.padding-xs { padding: 10px; }
.padding-sm { padding: 20px; }
.padding-md { padding: 30px; }
.padding-lg { padding: 40px; }
.padding-xl { padding: 50px; }
.padding-xxl { padding: 60px; }
通过结合使用这些工具,我们可以与我们间距的像素数保持一致,并且可以快速标记页面,而不必编写非常多的CSS。实用程序背后的理念是,你认为你可能会不止一次地使用它们。如果它是一次性样式,或者如果你认为组合样式会经常使用,那么可能它作为CSS类将可以更好地工作。4、除非绝对需要,否则避免嵌套假设有一些复选框的表单。在这个特定的情况下,你需要复选框内联(并排)。所以你试图像这样写样式:
.user-form li a { color: red; }
然后在这过程中,你意识到你需要列表元素中的一个链接实际上是黑色的。所以你试图为黑色的链接编写一个工具类:
.link--black { color: black; }
此处.link–black链接将被CSS特殊性所覆盖,并且将无法压倒.my-form li a样式。
现在你可能想要确保列表元素中的所有锚标记是红色的,但是你不知道未来的元素会怎么样以及可能会对设计做出什么样的更改。你可能会问,“好的亲,那么你怎么解决上面的问题呢?”通过上面的例子,你应该明白锚标签的颜色应该是一个远离默认链接颜色的变体。所以,在这种情况下,我会100%确定一个额外的工具类来处理红色链接。下面是实践中可能的处理例子:
a {
color: blue;
&:hover {
color: black;
}
}
.link--red { color: red; }
然后将其添加到HTML中的每个li元素。
我在这里作出的假设是:某一天,此红色的链接将在应用程序的其他地方被使用。我不想把它嵌入到用户表单中,因为那样我就不得不在未来编写另外一个样式来说明需要红色链接的情况。另外,因为我将自己的悬停定义在自己的锚点上,所以红色链接将会变成黑色悬停,而不必定义任何其他样式。5、利用BEM防止嵌套能够真正防止过度嵌套的一个策略是名为BEM(Block Element Modifier)的命名策略。使用BEM的一个很好的例子就是当你有一个真正具体的样式的组件时,如果使用实用程序会太麻烦和复杂的话。这个例子看起来像这样:
// HTML snippet
6、只使用!inportant作为最后的手段在一个类上放上!important定义会使得覆盖代码变成一件令人头痛的事情,特别是当你试图处理媒体查询时。这是我在处理Foundation的某个版本遇到的一个令人头痛的问题,因为他们决定对可见类打上!important。这对于移动设备也是一个痛苦的根源。例如,如果你希望手机屏幕显示某些内容,则必须使用另一个!important类来重写.hide类以显示它。我一直找不到使用!important的有效借口,除了在别人错误使用!important定义的情况下。7、重新发明轮子需要时间和精力,所以要慎重考虑比如说在客户端项目中创建自己的网格CSS框架,可能就是一个重新发明轮子的例子。根据我的经验,除非你想知道它是如何工作的,否则自己写这些东西其实并没有多大的好处。有许许多多的边缘情况可以让你自己动手编写代码,所以为什么不使用别人已经写好的免费又能工作良好的代码呢?也就是说,自己动手创建可能是一个很好的学习经验——但这很可能不属于生产应用程序的过程。好的,那么JavaScript插件呢?在谈论JavaScript或jQuery插件时,我要说的是,对于任何你使用的具有很好集成选项的真正常见组件来说,情况也是如此。其中的一些例子是照片轮播的JavaScript转盘,或日期选择器。这里的边缘案例是使用一些带有封装组件逻辑的JavaScript框架的插件(React,Ember,Angular等)。如果你想要做的事情相对简单,有时可能将这些插件放到组件中会更麻烦。例如,我会使用立即可用的Foundation或Bootstrap模块,如果我正工作于依赖jQuery的项目,但是会在React中构建我自己的模块(只是因为编写组件以便通过引入jQuery插入到React组件中会更容易)。8、关注前端代码!最后,我要向你建议的最重要的事情是,你得关注你为前端编写的代码,掌握它,并持之以恒地改进它(统计提高自己!)。我相信这是长期可维护的应用程序与难以处理的应用程序之间最大的区别因素之一。通过遵循编写CSS的八个技巧,你将为自己和未来继承你的代码的开发人员节省时间和精力。你遵循什么准则来组织和精简你的CSS?文章来自:慕课手记作者:前端启航// BEM CSS
.profile {
background-color: white;
border: 1px solid #ccc;
}
.profile__photo {
border-radius: 50%;
border: 1px solid #000;
}
你可以从这个例子中看到,我可以从我的样式表中看到.profile__photo嵌套在.profile中,然而实际上并不需要嵌套这个类。这真的是BEM最棒的地方,也是为什么我建议使用它的原因。
react 改变css样式_web前端入门到实战:编写CSS代码的8个策略,资深开发工程师总结...相关推荐
- css 横线_web前端入门到实战:CSS 搞怪的 text-decoration
一个莫名其妙的属性:text-decoration,这个属性,其实就只是用来把一段文字加上上横线.删除线或底线的属性罢了,通常会用在移除超链接的底线.或一些特殊强调的效果里头,但是这么容易的属性,为什 ...
- html设置样式不继承_web前端入门到实战:css的核心原理分为优先级原则与继承原则两大部分...
css原理:1.优先原则=>后解析的内容会覆盖之前解析的内容(所谓解析就是读取的css样式)2.继承原则=>嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性 1>优先 ...
- 前端悬浮窗效果_web前端入门到实战:css过渡和动画解析文
一.transition 过渡 过渡效果一般由浏览器直接改变元素的CSS属性实现,从一种状态过渡到另一种状态. 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 第一.在默认样式中声明元素的初始 ...
- css文字向右对齐_web前端入门到实战:css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
- web无序列表去掉点_web前端入门到实战:css如何玩转有序无序列表项list样式
在无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点.在有序列表ol>li中,前面默认带有数字,如何修改列表前面的项目符号,只需要通过list-style调整就好,常见的符号有( ...
- after不显示_web前端入门到实战:css实现单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line {border: ...
- css 高度塌陷_web前端入门到实战:CSS 负边距的行为表现
CSS 中的负边距 margin 是可以设置为负值的,这会帮你实现靠近顶部/左边相邻元素的效果,或者实现靠近底部/右边相邻元素的效果. 先介绍下我们的测试元素:一个简单的包含三个段落的容器元素.注意, ...
- 前端背景图放置_web前端入门到实战:css 中的背景图片小技巧和存在的坑
body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...
- button按钮的属性设置_web前端入门到实战:CSS实现8种炫酷按钮
今天给大家分享8种炫酷按钮的CSS实现. 1. 3D按钮1 现在的主流是扁平化的设计,拟物化的设计比较少见了,所以我们仅从技术角度去分析如何实现这个3D按钮 该按钮的立体效果主要由按钮多出的左.下两个 ...
最新文章
- mysql根据经纬度搜周边_mysql根据经纬度获取附近的商家
- graphicsmagick im4java,GraphicsMagick+im4java 图片处理
- Tensorflow2.0 tf.function和AutoGraph模式
- 网络协议及IP地址分类
- python中for循环是可以带else的
- vb如何制作实用计算机,vb语言程序简单设计实例(5款vb语言设计程序分享)
- logo语言编程介绍
- windirstat怎么用_使用WinDirStat分析和管理硬盘空间
- 第46讲 Android Camera2 API AWB自动白平衡
- Gazebo手册:【2】如何建立建筑物模型
- MySQL入门:数据库是什么 | SQL是什么 | MySQL是什么
- Java实现输出水仙花(易懂)
- 机器学习 竞争神经网络与自组织特征映射神经网络(SOFM)
- u-boot.lds文件诠释
- dhtmlx甘特图--vue2
- 分享一个嗖嗖移动管理系统
- 前端实现滑动页面动态切换背景图片的炫酷效果
- java snakeyaml_JAVA使用SnakeYAML解析与序列化YAML
- 超实用!移动端界面中的版式设计原理(上)
- 重启虚拟机异常:Unmount and run xfs_repair