网站制作之如何编写更好的CSS

这8点简单的窍门可以帮助你编写CSS是清洁,高效,实用。

网站制作

网站制作

写出更好的CSS不必是一个艰苦的考验。给你你的CSS代码文件中是如何工作的一些小的调整可以有很大的影响。在这篇文章中,我们将看看八点简单的方法可以提高你的CSS技巧和编写更干净,更高效,更好的CSS代码。

01.开始用CSS重置

网站制作

网站制作

CSS重置为您提供了一个干净的基地工作

有些人可能会认为,使用CSS复位是不必要的。然而,CSS重置可以让你用干净的基础开始,使它更容易的风格你的网站,与一刀切更可预测的结果。

一个CSS Reset重置或覆盖默认风格的浏览器。你可以写自己的,使用网上提供的众多重置的一个,或者使用两者的组合。

02.知道什么时候使用简写

网站制作

网站制作

速记应减少文件大小,并有助于加快加载时间

简写使您能够在一个单一的线设置元素的多个属性。使用速记节省空间和花费较少的时间来加载。但是,你不应该使用它的一切。

有时速记提供了急需的透明度。但更重要的是,当你只需要设置一个或两个属性 – 或者你只需​​要覆盖的东西 – 手写实际上可能会更好。

别的东西要记住:当你使用简写,被忽略的属性将重置,这可能有不良影响。

03.保持干燥

网站制作

网站制作

不要重复自己

很可能编写更好的CSS代码的最好的建议是遵循DRY方法。DRY表示“不重复自己” – 本质,不要一遍一遍使用相同的代码位。

让事情干在CSS的方法之一是集团的东西放在一起。让我们来看一个例子。

Original CSS

.menu li {
  color: red;
}

.menu li a {
  color: red;
}

重构和DRY

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

正如你所看到的,这不仅会减少你CSS文件的总体大小-这创造更快的加载时间-但是你也将受益于维修区了。如果颜色属性需要更新,你只更新它一斑。

您还可以使用CSS自定义属性,以帮助保持干爽。自定义属性的创建,如下所示:

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

然后就可以你的CSS代码中任何地方使用,经常你想:

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

04.停止过度使用!重要

在有些情况下,你需要使用很少的场合!重要的。这是最之一-如果不是最-误解和过度使用的声明。

不要误会我的意思,!重要的确实有它的位置,但一般Web开发人员使用它在绝望时,事情看起来不正确。因此,要解决的事情,他们给自己的统治多一点的重量加入!重要声明它。

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

05.保持一致

不管你如何编写CSS,并在其中添加顺序属性,保持一致。有些人字母顺序排序它们的属性,而其他人使用更合理的方法 – 例如,通过组织线路长度或类型的东西。我选择前者,但它是完全取决于你。底线是你选择的,坚持下去,所以很容易以后找东西。

06.姓名东西智能

网站制作

网站制作

使用标准的命名约定为您选择

这似乎是一个没有脑子,但命名您的选择时,不要过于复杂。简洁并与标准的命名约定坚持。

有些事情与你选择的名称上来时考虑:

  • 避免呈现中的单词:这些都是涉及到颜色和显示位置的那些(例如,绿色文本顶部菜单栏
  • 只使用小写: CSS是区分大小写的,所以不要创建像,名字菜单栏。应当指出,然而,骆驼(菜单栏)是可接受的实践中,只是在某些情况下不是优选的
  • 使用短划线分开的多个词:例如,主菜单。您也可以使用骆驼情况下(MAINMENU),但同样,这往往是不理想
  • 不要太具体的:最终你会使用多个选择同一类型的元素。例如,清单一表二可以结合起来,创造一个单一的列表项

07.在适当的时候发表评论

虽然这是真的,好的代码不需要注释,这也是事实,添加注释代码需要在某些情况下。拇指这里的规则是,如果源代码将在征求意见中受益,然后将其添加; 否则,没有。

如果你想知道,当意见可能是必要的,这里有几个例子:

  • 注释代码:如果您注释掉的代码特定部分,因特殊原因,发表评论解释原因。如果不这样做,你可能不记得你为什么在首位注释出来
  • 热修复:如果您添加一个“烫”,这可能是一个好主意,添加注释解释它太
  • 提醒:你可能在任何时刻工作的多个项目。如果你有机会完成一些之前你的注意力拉,你可以使用注释作为你还是留下做一个提醒
  • 说明:如果一段代码是不清楚,你会感到一种解释将有助于它清除掉,然后添加注释-就这么简单

08.探索Flexbox的

网站制作

网站制作

Flexbox的是最新的游戏改变者在网页设计

当谈到对齐页面上的元素,灵活盒布局模块(或Flexbox的),让您完全控制。使用Flex容器和你能够精确定义的东西怎么看弯曲的物品。Flexbox的,您还可以安排在页面上垂直的项目,这是不可能的浮动。

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/259334.html

(0)
上一篇 2022年5月21日
下一篇 2022年5月21日

相关推荐

发表回复

登录后才能评论