如何书写一篇能看懂的html和CSS代码
在书写html和CSS过程中,如果只是想要实现网页的外观和基本功能,那么简单的书写代码就可以满足需求,甚至不需要使用类名或者注释等。但实际上,这么写肯定是不行的,首先对于类同结构的重复书写就是一件很浪费时间,并且很大程度上增加错误几率的方法,代码量增加了很多,错误的可能也增加了许多;其次,对于一个页面而言,代码并不是一次性的东西,所以对于页面代码的二次阅读是难以避免的,这时候,就会发现面对自己书写的代码一片茫然,就算是配合检查器检查观看,也不一定能保证在大量的选择器中正确修改代码,而且还可能由于选择器权重的问题导致代码无法顺利修改,当一个选择器就已经写满一大行,并且在使用并集选择器的情况下可能长的超乎想象,面对这样的结构,感受到的只是绝望。最后,我认为当检查一个页面,看到的是一个个标准规则的盒模型,对检查而言是一种莫大的享受,如果存在各种高度不齐,对照html结构不能看到对应的一块一块“盒子“或盒子对应功能不明时,对于我的体验也是比较糟糕的。
对于正常一个页面的html结构而言,不考虑js的情况下,使用类名和注释是十分必要的。使用注释的地方,第一是每个结构性的大区块上面,这点是必不可少的,能够帮助我们在众多的代码中找到对应小区块的位置,方便对代码进行修改。另外一个我觉得应该是结构较为复杂的地方,使用具有较明确含义的类名也比较困难体现思路的地方,比如一个多重层叠,针对不同操作展现更多的地方。类名的命名也是一个大问题,针对类型相同的地方采用相同的命名,后面的代码如果有多出其余样式,再给一个单独的类名进行调整,这样就会出现一个问题,也就是第一个类名的命名是否满足的后面所有区块的功能特性,而多余的类名是否能体现这一块区中单独的特点。针对这一问题,为避免html和CSS的类名让人阅读起来不明所以,所以推荐为html的书写方式一样的流程,先阅览全局,确定基本结构,再针对大的块区进行统一样式的类名命名,后面写到CSS的时候再单列出不同功能的类名。使用类名可以使用多种方式,比如连字符针对大的功能区,往后书写小的功能名,或者使用驼峰命名法,或者bem命名法,重要的就是见文知意,并且符合英文拼写习惯。
针对CSS代码,注释和选择器的书写更需要精确。对于页面而言,CSS的选择器与元素一一对应才能保证页面内容的正确展示,而对于一个多层嵌套并且都具有相对对立的结构样式而言,在不使用sass和less的前提下,必不可免的要写多个选择器,并且会有一大串的祖先元素来帮助找到对应的元素,这样书写完成后,对于具有同样的类名的多个元素,想要对其中一个设置不一样的属性,对其设置一个不同的类名,如果在书写是只写不同的类名,由于特指值较低可能不会实现相应功能。另外,对于多个类名的元素,类名使用的太相似也会增大错误的几率。CSS的注释,除开打的块区,对于多层嵌套结构部分的外层注释也是很有必要的,因为这样的一个结构往往意味着较多的代码,或者是一个功能区样式实现的代码,可能会影响到代码的复用,将之独立出来会使代码更加清晰。
如何书写一篇能看懂的html和CSS代码的更多相关文章
- 一文看懂Stacking!(含Python代码)
一文看懂Stacking!(含Python代码) https://mp.weixin.qq.com/s/faQNTGgBZdZyyZscdhjwUQ
- C语言-人狼羊菜问题-最容易看懂的解决方法及代码
题目描述:农夫需要把狼.羊.菜和自己运到河对岸去,只有农夫能够划船,而且船比较小,除农夫之外每次只能运一种东西,还有一个棘手问题,就是如果没有农夫看着,羊会偷吃菜,狼会吃羊.请考虑一种方法,让农夫能够 ...
- 转发一篇能看懂的关于ingress的说明
最近发现好多人问 Ingress,同时一直也没去用 Nginx 的 Ingress,索性鼓捣了一把,发现跟原来确实有了点变化,在这里写篇文章记录一下 https://mritd.me/2017/03/ ...
- T4代码生成脚本从添加注释,添加命名空间开始(一款强大的代码生成工具从看懂脚本,到随心所欲的玩弄代码,本文只是T4的冰山一角,博主将不断深入探索并完善该文章)
精通T4脚本要从读懂脚本的关键代码片段开始 1.1. 给类添加注释-->看懂类对应的代码:<#=codeStringGenerator.EntityClassOpening(entity ...
- 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:
小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...
- 小白也能看懂的Redis教学基础篇——朋友面试被Skiplist跳跃表拦住了
各位看官大大们,双节快乐 !!! 这是本系列博客的第二篇,主要讲的是Redis基础数据结构中ZSet(有序集合)底层实现之一的Skiplist跳跃表. 不知道那些是Redis基础数据结构的看官们,可以 ...
- 小刻也能看懂的Unraid系统使用手册:基础篇
小刻也能看懂的Unraid系统使用手册 基础篇 Unraid系统简介 Unraid 的本体其实是 Linux,它主要安装在 NAS 和 All in One 服务器上,经常可以在 Linus 的视频里 ...
- 小白也能看懂的Redis教学基础篇——做一个时间窗限流就是这么简单
不知道ZSet(有序集合)的看官们,可以翻阅我的上一篇文章: 小白也能看懂的REDIS教学基础篇--朋友面试被SKIPLIST跳跃表拦住了 书接上回,话说我朋友小A童鞋,终于面世通过加入了一家公司.这 ...
- 看懂UML类图与时序图
看懂UML类图和时序图 这里不会将UML的各种元素都提到,我只想讲讲类图中各个类之间的关系: 能看懂类图中各个类之间的线条.箭头代表什么意思后,也就足够应对 日常的工作和交流: 同时,我们应该能将类图 ...
随机推荐
- 【Unity Shaders】Using Textures for Effects介绍
本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...
- ISLR系列:(4.1)模型选择 Subset Selection
Linear Model Selection and Regularization 此博文是 An Introduction to Statistical Learning with Applicat ...
- LeetCode之“链表”:Sort List
题目链接 题目要求: Sort a linked list in O(n log n) time using constant space complexity. 满足O(n log n)时间复杂度的 ...
- Android特效专辑(十一)——仿水波纹流量球进度条控制器,实现高端大气的主流特效
Android特效专辑(十一)--仿水波纹流球进度条控制器,实现高端大气的主流特效 今天看到一个效果挺不错的,就模仿了下来,加上了一些自己想要的效果,感觉还不错的样子,所以就分享出来了,话不多说,上图 ...
- PS 滤镜——极坐标变换到平面坐标
%%% 极坐标到平面坐标 clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorith ...
- OpenCV——色调映射
// define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...
- 利用可变参实现fprintf函数
#include <stdio.h> #include <stdarg.h> /* 可变参相关接口 typedef char * va_list ; void va_start ...
- ubuntu安装qq教程
安装策略是wine+wine QQ TM2013,wine QQ TM2013是一款专门为wine进行优化的版本 我的ubuntu系统是14.04版本,64位 1. sudo apt-get inst ...
- rubygem若干常用选项参数
可以用gem help commands看所有支持的参数,这个比gem -h显示的全: wisy@wisy-ThinkPad-X61:~/src/ruby_src$ gem help commands ...
- 赋给个人账户sudo的全部root执行权限
sudo visudo 输入root账户密码后,会自动打开sudoers文件编辑 在root ALL=(ALL) ALL此行下增加一行 user ALL=(ALL) NOPASSW ...