首页所有案例网站建设微信公众号开发电商视觉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还使您可以在页面上垂直排列项目,这不是浮动的。


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

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

免费获取网站建设方案及报价。

*请认真填写需求信息,我们会在24小时内与您取得联系。
线上服务咨询020-82352603填写需求索取报价