浅谈前端CSS样的编写

          对于前端小白来说一般主开始的工作都是简单的CSS+HTML的开发，但是别认为CSS+HTML就没有用，最近我在修改一个项目，这个项目是进行重构，当你们看见一串密密麻麻的CSS样式时候就会觉得非常的头疼，最特别是没有规范的写。简直就是像在垃圾场淘宝一样，搞的满手腥臭。

其实前端CSS+HTML只需要了解三个步骤保证写出来的代码有漂亮又好看。

1：公共内容公共处理；命名方式驼峰命名法【{什么是驼峰命名法}驼峰命名法就是（小大小），比如：你想表达的是首页滚动条的类名，你可以这样indexSrcoll/index_srcoll,userName】，这个是什么呢，比如在编写代码的时候，特别是线上网站不可能让你每个页面写一个重复的样式代码，这样代码就冗余了，影响体验和网站运行速度，你可以把网站的头部或者脚步用一个独立的文件放在外面，因为现在很多的网站的头部（header）和脚步（footer）基本是相同的，在每个页面。这样你就可以把这些公共部分给分离出来。这样就不用每个页面都要写。这样写的好处还有就是方便后期维护。

2：规范间距规范代码；这个是什么意思呢？编写页面时候创建CSS样式表的时候，那个部分就应该把CSS样式写在对应的CSS样式表当中。这个对于才开始接触代码编写的程序员来说，这是非常重要的（PS：个人经验），不是对于才开始接触代码的不认可，因为我也是个两年时间的小白。在公司过后才发现，这个是非常重要的。这样你自己修改代码也很快。别人后台添加数据接口有时候需要调样式很方便，而且还能给别人好印象，比如你们自己看一个网站的首页。有些人写的代码是CSS样式表第一个是导航条的宽高样式，但是在CSS表最后的一个是导航条中内容的样式，你们觉得这样好么。但是有些人比如最近我写的代码就是｛/*页面公共样式和标签样式初始化*/{}/*导航条*/｛｝/*nav*/() /*主体*/{} 这样是不是很好看了。但是什么是间距呢？这个也是非常有将就的啦，比如：下面这样图片

这样看起来是不是舒服多了？还有一个原因就是方便你维护，说白了代码除了编程人员看，谁会去管你这些。我们说这些的目的都是为了后期方便维护，不可能你做了一个网站然后就不管了？不可能。这就跟人一样为什么要说穿的整齐一点嘛？人看起来精神一些。还有为什么当兵的这么帅，就是因为他们穿着就很整齐

3：样式的比重；3.1：尽量不要用行内CSS来给标签写样式（想办法避免），3.2尽量不要很内嵌样式，能避免就避免。3.3尽量不要用ID选择器给样式。3.4尽量不要用@important给标签添加样式，为什么我要说这些尽量呢？一个是影响美观，说白了也是一个共同的原因，有些人应该猜到了吧，那就是影响后期维护，和在编写过程中容易知道覆盖了。让你自己做的时候没有了解清楚。这里介绍一下比重

内敛样式(标签样式)>内嵌样式(页面内部样式)>外部样式表(引入样式)这个是权值相同的时候，那什么是权值呢？这个是选择某个标签时候的一种选择方式的优先级，比如：张五的儿子张三>张三的权值，因为张三有很多，而张五 的儿子张三肯定要大于张三这就是一个选择的优先级别就是所谓的权值，

权值不同，最大的应该是@important 这个可以修改某个标签的权值，就相当于DNA鉴定了（张三不是张五的儿子，而是李四的儿子。这样张五的儿子的权值就变成李四的儿子张三。这个权值就发生了改变。）所以呢。@important是最高的。排序方式重点【@important > <div style=" "> >#id{} > .class{} > 标签名{}】