我们应该如何写好HTMLCSS
这应该是最容易让人忽略的一个问题,容易到很多工作几年的前端开发工程师都不太注意如何写好html及css
HTML&CSS 重要吗
相比于JavaScript,HTML&CSS确实凸显不出它的重要性,因为HTML&CSS不承载业务逻辑,具体来说他们不能称之为编程语言,那HTML&CSS真的就那么简单到不起眼吗?
布局是项目易维护的重要基础
当我们拿到项目ui图后,建议大家不要一行一行的去画页面,这样不经效率低而且写出来的页面代码比较臃肿,下面是Element-ui的栅格布局及布局容器图:
一旦有了项目的大体架构,我们就可以做到手里有粮心中不慌了
我们以京东首页为例,来说明下良好的布局应该是什么样子的
我目前是在职前端开发,如果你现在也想学习前端开发技术,
在入门学习前端的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,
你都可以申请加入我的前端学习交流裙:前面:851 中间:231 最后:348。
里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册,
前端面试题,前端开发工具,PDF文档书籍教程,需要的话都可以自行来获取下载。
可以看到,我在首页任意调换两个div,页面的布局也跟着调换过来而且没有乱,这就是一个良好的布局。你也可以在自己的项目这样试一试
管理好CSS有助于提高项目性能
说到CSS我们是势必要说到两个概念:重绘&重排
重绘
重绘是指当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知render 重新描绘相应的元素, 此过程称为重绘。
重排
重排是指某些元素变化涉及元素布局 (如width), 浏览器则抛弃原有属性, 重新计算,此过程称为重排。(重排一定会重绘,重绘不一定重排)。
页面渲染的一般过程为JS>CSS>计算样式>布局>绘制>渲染层合并而在这个过程中其中,重排和重绘是整个环节中最为耗时的两环,从重绘和重排的概念上看,重排比重绘更加的消耗性能,所以我们尽量避免着这两个环节。从性能方面考虑,最理想的渲染流水线是没有布局和绘制环节的,只需要做渲染层的合并即可。
如何更好的写CSS&HTML
说了这么多,那在项目中应该怎么规划我们的布局及样式呢,一下是我个人的总结,和大家分享
首先定义项目的基准样式:如重置样式,公用样式变量,兼容性处理等,且最好用less/sass/stylus等来写我们的css
把项目的公共布局及样式抽离出来:如公用的头部,公用的尾部,公用的tab等
避免样式重复赋值,避免样式重叠:如避免在业务或者组件里面写全局样式,样式层级不要过深
用好z-index,position
最后
只要我们在项目中花点心思管理好我们的CSS和HTML,你会发现后面很多问题都会变的简单
我们应该如何写好HTMLCSS相关推荐
- 2.写给设计师看的HTMLCSS入门指导
转自:http://www.uisdc.com/html-and-css-guide 整体简介 在开始学习HTML&CSS之前,首先要搞清楚两者的区别.两者在整体上有着很明显的差异. 整体看来 ...
- [译]HTMLCSS Lesson2: 了解HTML
我们初步了解了HTML和CSS,现在让我们深入挖掘HTML并了解哪些元素构成了这种语言. 建设网站前,我们需要了解什么元素适合排版什么内容.这对于理解元素如何展示在页面中以及元素的语义化都有非常重要的 ...
- Python工程师简历100条技能例句,写简历再也不用愁!!
相信大家在写简历的时候,都有过这种一种困惑,就是不知道该怎么写自己的技能清单,今天我们就给大家提供100条Python工程师简历技能例句,让大家写简历的时候再也不用发愁了. 1.熟悉Flask/Tor ...
- 分享88个HTMLCSS源码,总有一款适合您
HTML&CSS源码 分享88个HTML&CSS源码,总有一款适合您 下面是文件的名字,我放了一些图片,文章里不是所有的图主要是放不下...,大家下载后可以看到. 源码下载链接:htt ...
- HTML-CSS基础笔记
HTML-CSS基础笔记 文章目录 HTML-CSS基础笔记 一.html的发展历程 二.常用声明方式 三. HTML的注释 四. 常用的标签 4.1.img标签 4.2. a标签 4.3. em标签 ...
- 尚硅谷前端HTML-CSS /HTML
尚硅谷前端HTML-CSS/HTML 软件分类 系统软件 应用软件 游戏软件 软件:客户端 服务器. 客户端 –文字客户端 –图形化界面 C/S – 网页. B/S 优点 不需要安装.无需更新 跨平台 ...
- 使用hello word写小说
2021-11-12 使用hello word写小说
- java调用clang编译的so_写Java这么久,JDK源码编译过没?编译JDK源码踩坑纪实
好奇害死羊 很多小伙伴们做Java开发,天天写Java代码,肯定离不开Java基础环境:JDK,毕竟我们写好的Java代码也是跑在JVM虚拟机上. 一般来说,我们学Java之前,第一步就是安装JDK环 ...
- java 手编线程池_死磕 java线程系列之自己动手写一个线程池
欢迎关注我的公众号"彤哥读源码",查看更多源码系列文章, 与彤哥一起畅游源码的海洋. (手机横屏看源码更方便) 问题 (1)自己动手写一个线程池需要考虑哪些因素? (2)自己动手写 ...
最新文章
- 一笔画 (25 分)
- 判断有向图g中顶点i到顶点j是否有路径_[源码和文档分享]基于Dijkstra算法的最短路径问题求解...
- 2020年度国家科学技术奖提名项目公示丨附全名单
- fork()子进程与父进程之间的文件描述符问题
- Callable的简单使用
- 英语发音表及读法_在英语中年月日的读法和写法(附:英美时间表达差异辨析)...
- Redis 开发陷阱及避坑指南!
- .net redis定时_一场由fork引发的超时,让我们重新探讨Redis的抖动问题
- 微服务SpringCloud之Feign简介及使用
- nginx关闭favicon.ico日志
- ionic 网站放在服务器,Ionic4 服务器插件-服务器Httpd - Ionic Native
- Jaspergold形式验证-vhdl语言
- matlab 删除plot上的图,matlab删除部分图例
- 二元一次方程组计算机题,2元一次方程组(二元一次方程组计算题带答案)
- KVM虚拟化进阶--KVM设备高级管理
- win7浏览器主页修改不过来_Win7系统IE浏览器无法更改主页的具体解决方法
- matlab 7.0 win8,Win8.1系统中matlab7.0不兼容的解决方法
- 2019东北四省 B. Balanced Diet
- 教你用python制作人脸卡通画(附源码)
- linux搜索log文件的内容
热门文章
- Java Web学习总结(19)——web.xml配置详解
- 组装r730服务器,戴尔poweredge r730服务器配置及系统安装详解教程
- Linux下rz/sz安装及使用方法_上传和下载文件
- CentOS7.2 network.service NetworkManager.service 冲突
- ldirectord实现高可用负载集群
- firefox使用技巧 - 公司内部站点
- SQL Server Alwayson架构下 服务器 各虚拟IP漂移监控告警的功能实现 -1(服务器视角)...
- 关于曼哈顿距离和切比雪夫距离的转换和应用
- C#多线程和异步(二)——Task和async/await详解(转载)
- Android开发中使用startActivityForResult()方法从Activity A跳转Activity B出现B退出时A也同时退出的解决办法...