首页所有案例网站建设微信公众号开发电商视觉APP开发网络营销公司最新联系咨询

教你编写8个简单的CSS代码

2017年08月09日

这8个简单的提示将帮助您编写干净,高效和有用的CSS。

编写更好的CSS不一定是艰苦的磨难。对您在CSS代码文件中工作的一些细微调整可能会产生很大的影响。在本文中,我们将介绍八种简单的方法来改善CSS技巧,编写更干净,更高效,更好的CSS代码。

01.从CSS重置开始

CSS重置为您提供了一个干净的基础
有些人可能会认为使用CSS重置是不必要的。然而,CSS重置可以让您从一个干净的基础开始,使您更轻松地为您的网站设计风格,并提供更可预测的结果。

CSS重置将重置或覆盖浏览器的默认样式。您可以编写自己的,使用在线可用的许多重置之一,或使用两者的组合。

02.知道什么时候使用CSS速记

速记应该减少文件大小,并有助于加快加载时间
CSS简写使您能够在单行中设置元素的多个属性。使用速记可节省空间,减少加载时间。但是,你不应该把它用于一切。

有时候,手头提供了非常需要的清晰度。但更重要的是,当您只需要设置一个或两个属性 - 或者您只需要覆盖某些东西 - 可能实际上更好。

还有一件要记住的事情:当你使用速记时,被忽略的属性将被重置,这可能会产生不良影响。

03.保持干燥

不要重复你自己
编写更好的CSS代码可能最好的建议是遵循DRY方法。DRY意味着“不要重复自己” - 实质上,不要一遍又一遍地使用相同的代码。

将事情保持在CSS中的一种方法是将事情分组在一起。我们来看一个例子。

原始CSS

.menu li { color: red; } .menu li a { color: red; }

重组和干燥

.main li, .main li a { color: red; }

您可以看到,这不仅可以减少CSS文件的总体大小,而且可以缩短加载时间,但您也可以在维护方面受益。如果颜色属性需要更新,您只需要更新它的一个位置。

您还可以使用CSS自定义属性来帮助保持DRY。自定义属性创建如下:

:root { --primary-color: red; }

然后可以随时使用CSS代码中的任何地方使用它们:

.main li, .main li a { color: var(--primary-color); }

04.停止使用!重要

有很少的场合,你需要使用!重要。它是最多(如果不是最多的)被误解和过度使用的声明之一。

不要误会我,重要的是有它的地方,但是一般情况下,Web开发人员在绝望的情况下使用它。所以为了解决这个问题,他们通过添加重要的声明给他们一些更多的权力。

问题是,这将启动创建迅速变成一个维护的噩梦,随着越来越多的东西都宣布了多米诺骨牌效应!重要的。只有使用!重要,当它是绝对必要的。

保持一致

无论您如何编写CSS,以及添加属性的顺序,请保持一致。有些人按字母顺序排列他们的属性,而其他人使用更多的逻辑方法 - 例如,按行长度或类型组织事物。我选择前者,但完全取决于你。底线是你选择的,坚持下去,所以很容易找到事情。

06.智慧地命名事物

对您的选择器使用标准命名约定
这似乎是一个没有脑子的人,但是在命名你的选择器时,不要过于复杂。简明扼要,坚持使用标准的命名约定。

提出选择器名称时需要考虑的一些事项:

避免演示文字:这些是涉及颜色和显示位置的文字(例如,绿色文本或顶级菜单栏) 只使用小写: CSS是区分大小写的,所以不要像MeNuBaR那样创建名称。然而,应该指出的是,骆驼案(menuBar)是可以接受的做法,在某些情况下是不喜欢的 使用破折号分隔多个单词:例如,主菜单。您也可以使用骆驼盒(mainMenu),但是再次,这通常不是首选 不要太具体:您将最终对同一类型的元素使用多个选择器。例如,可以组合列表一和列表二,创建单个列表项
07.酌情添加评论

虽然好的代码不需要注释,但在某些情况下也需要添加注释到代码。这里的经验法则是,如果源代码将从评论中受益,然后添加它; 否则,不要。

如果您想知道有什么意见可能需要,这里有几个例子:

评论代码:如果您注释掉特定部分的代码,出于特定原因,请留下解释该原因的评论。如果你不这样做,你可能不记得为什么你首先评论了它 热修复:如果您添加“修补程序”,添加评论也许是个好主意 提醒:您可能会在任何时刻处理多个项目。如果您有机会完成某件事情之前,您的注意力被拉下来,您可以使用评论来提醒您仍然需要做的事情 说明:如果一段代码不清楚,并且您觉得有一个解释将有助于清除它,然后添加一个评论 - 这很简单

08.浏览Flexbox

Flexbox是网页设计中最新的游戏规则

当调整页面上的元素时,弹性框布局模块(或Flexbox)可以完全控制。使用flex容器和flex项目,您可以精确地定义事物的外观。Flexbox还使您可以在页面上垂直排列项目,这不是浮动的。


本文来源于广州网站建设公司与广州网站设计制作公司-广帆互动广州公司!

标签: 网站设计公司 、 网站建设公司 、 网站制作 、 网站设计 、 网站建设 、 广州网站设计公 司 、 广州网站设计 、 广州网站建设公司 、 广州网站建设 、 广州网站制作公司 、 广州网站制作

填写服务需求或选择下列套餐服务。

 创业版建站套餐 9800 经典版建站套餐 16800 豪华版建站套餐 26800> 微商城个性版 29800>

* 服务套餐价格会不定时变化,请认真填写需求信息,我们会在24小时内与您取得联系。

网站建设套餐

创业版9800元

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
PC端+Pad+手机端
设计师+前端+程序
1个初稿方案(可修改1次)
15个工作日
金牌1对1服务(不接受面谈)
服务内容
1.5个页面设计,3屏=1页.
2.后台管理系统
3.新闻管理系统
4.产品管理系统
5.留言管理系统
6.在线客服
赠送内容
1.免费维护1年
2.SEO关键词设置
3.第三方流量统计

网站建设套餐

经典版16800元

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
PC端+Pad+手机端
设计师+前端+程序
2个初稿方案(可修改2次)
20个工作日
金牌1对1全程上门服务
服务内容
1.10个页面设计,3屏=1页.
2.H5动效设计
2.后台管理系统
3.新闻管理系统
4.产品管理系统
5.招聘管理系统
6.留言管理系统
7.在线客服
赠送内容
1.网站备案
2.COM/NET/CN域名1个
3.1000M虚拟空间
4.免费维护1年
5.微信公众号绑定
6.SEO关键词设置
7.第三方流量统计

网站建设套餐

豪华版26800元

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
PC端+Pad+手机端
高级设计+高级前端+高级程序
3个初稿方案(可修改5次)
30个工作日
金牌1对1全程上门服务
服务内容
1.20个页面设计,3屏=1页.
2.H5动效设计
3.后台管理系统
4.新闻管理系统
5.产品管理系统
6.招聘管理系统
7.留言管理系统
8.基础会员功能
9.在线客服
10.第三方插件接入
赠送内容
1.网站备案
2.COM/NET/CN域名1个
3.2000M虚拟空间
4.免费维护1年
5.微信公众号绑定
6.SEO关键词优化指导
7.SEO关键词设置
8.第三方流量统计

微信商城套餐

微商城个性版 29800

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
永久版微商城
高级设计+高级前端+高级程序
2个初稿方案
35个工作日
金牌1对1全程上门服务
服务内容
1.整套UI设计
2.会员管理
3.商品管理
4.订单管理
5.内容管理
6.广告管理
7.促销管理
8.报表统计
赠送内容
1.网站备案
2.COM/NET/CN域名1个
3.2000M虚拟空间
4.免费维护1年
5.微信公众号绑定
6.第三方流量统计
线上服务咨询020-82352603填写需求索取报价