js编写多个css_编写更好CSS的7个重要技巧

最新推荐文章于 2021-12-14 17:24:40 发布

cumian9828

最新推荐文章于 2021-12-14 17:24:40 发布

阅读量275

点赞数

文章标签：编程语言 css java python html

原文链接：https://www.freecodecamp.org/news/7-important-tips-for-writing-better-css/

版权

js编写多个css

One of the biggest issues in programming is dealing with maintenance. In a real-world scenario, we don't always start developing projects from scratch. Mostly, we are assigned (or take) a project that has already been written maybe a couple of years before or even longer.

编程中最大的问题之一就是维护问题。在现实世界中，我们并不总是从头开始开发项目。通常，我们被分配(或接受)一个已经编写了几年或更长时间的项目。

To work efficiently on that project, first we need to understand the source code. This is the point when we immediately realize the importance of clean code. As developers, we must try to write our code as cleanly as possible.

为了有效地执行该项目，首先我们需要了解源代码。这就是我们立即意识到干净代码的重要性的关键所在。作为开发人员，我们必须尝试尽可能简洁地编写代码。

This is also the case for CSS. There are some points we need to pay attention to while writing CSS. In this post, I would like to share some of the most important ones with you. I believe these 7 tips will help you to improve the quality of your CSS code.

CSS也是如此。在编写CSS时，我们需要注意一些要点。在本文中，我想与您分享一些最重要的信息。我相信这7个技巧将帮助您提高CSS代码的质量。

So let's begin...‌ ‌

所以我们开始吧...‌

1.干 (1. DRY)

DRY stands for "Don't Repeat Yourself". This is a general software development principle and can be applied in any programming language, as well as in CSS. As we can understand from its name, DRY aims to avoid or reduce repetition as much as possible.

DRY代表“不要重复自己” 。这是一种通用的软件开发原理，可以在任何编程语言以及CSS中应用。从名称可以理解，DRY的目的是尽可能避免或减少重复。

For example, we can create 3 CSS classes for 3 buttons like this:

例如，我们可以为3个按钮创建3个CSS类，如下所示：

.primary-button {
  background: blue;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.form-button {
  background: green;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.cancel-button {
  background: red;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

Or we can use the DRY principle by writing the common rules once in an additional class and the different rules each in other classes:

或者我们可以通过在其他类中编写一次通用规则，并在其他类中编写不同的规则来使用DRY原理：

.button {
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.primary-button {
  background: blue;
}

.form-button {
  background: green;
}

.cancel-button {
  background: red;
}

As we can see, applying the DRY principle avoids repetition, decreases the number of lines, and improves readability and even performance.

如我们所见，应用DRY原理可以避免重复，减少行数，并提高可读性甚至性能。

2.命名 (2. Naming)

Naming CSS selectors is another important point for writing better CSS. The name of a selector should be self-descriptive and readable...

命名CSS选择器是编写更好CSS的另一个重要点。选择器的名称应具有自我描述性和可读性 。

// BAD NAMING

.p {
  // Rules
}

.myFirstForm {
  // Rules
}

Normally, <p> is an HTML tag and stands for paragraph. Above, we can't really understand what class p is. Also, you should avoid names like myFirstForm, and I don't advise using camel case.

通常， <p>是HTML标记，代表段落。以上，我们无法真正理解p是什么类。另外，您应避免使用诸如myFirstForm之类的名称，并且我不建议使用camel case 。

Instead, use declarative names (separated by a dash for multiple names):

相反，请使用声明性名称(多个名称之间用短划线分隔)：

// GOOD NAMING

.article-paragraph {
  // Rules
}

.contact-form {
  // Rules
}

I think the names make more sense now :)

我认为这些名称现在更有意义了：)

Naming things in programming is not that easy, but there are various naming conventions that you can use in your project. BEM (block element modifier) is one of them. I've worked with BEM before and I can recommend it.

在编程中命名事物并不是那么容易，但是您可以在项目中使用各种命名约定。 BEM(块元素修改器)就是其中之一。我之前曾与BEM合作过，我可以推荐它。

3.不要使用内联样式 (3. Don't Use Inline-Styles)

Well, there are arguments on the web about this: some are telling you never to use inline styles, while others are arguing that it can be useful in some cases.

嗯，网络上有关于此的争论：有些告诉你不要使用内联样式，而另一些争论说它在某些情况下可能有用。

In my opinion, the best practice is actually not using inline styles. I will focus here on why we shouldn't.

我认为，最佳实践实际上是不使用内联样式。我将在这里重点介绍为什么我们不应该这样做。

关注点分离 (Separation of Concerns)

According to the separation of concerns principle, design (CSS), content (HTML) and logic (JavaScript) should be separated for reasons like better readability and maintenance.

根据关注点分离原则，出于更好的可读性和维护性等原因，应将设计(CSS)，内容(HTML)和逻辑(JavaScript)分离。

Including CSS rules inside HTML tags breaks this rule:

在HTML标签中包含CSS规则会破坏以下规则：

<div style="font-size: 16px; color: red;">Some Text</div>

We should rather keep our styling rules in external CSS files.

我们应该将样式规则保留在外部CSS文件中。

搜寻困难 (Difficulties in Search)

Another problem with using inline-styles is that we can't search for them. So when we need to make a change on styling, we normally look for CSS selectors of the HTML element.

使用内联样式的另一个问题是我们无法搜索它们。因此，当我们需要更改样式时，通常会寻找HTML元素CSS选择器。

For example, let's change the font-size of text on our webpage. To do that, first we find that specific part on the browser where the change is needed by looking at the HTML structure:

例如，让我们更改网页上文本的字体大小 。为此，首先我们通过查看HTML结构在浏览器上找到需要更改的特定部分：

<div class="text-bold">Some Text</div>

Then we need to find the selector, which is the text-bold class here. Finally, we go to that class and make the changes:

然后我们需要找到选择器，这里是文本粗体类。最后，我们进入该类并进行更改：

.text-bold {
  font-size: 16px;    // change the font-size to 14px
  font-weight: bold;
}

But if the rules are written inline-style instead of using classes:

但是，如果规则以内联样式而不是使用类编写：

<div style="font-size: 16px; font-weight: bold">Some Text</div>

Even if we find the HTML tag, we can't know whether there are other font-size rules inside the HTML or not. Since there is no selector used, we have to go through all the HTML pages one by one, try to find the other font-size rules and change them too.

即使找到HTML标记，我们也不知道HTML内是否还有其他字体大小规则。由于没有使用选择器，因此我们必须逐一浏览所有HTML页面，尝试查找其他字体大小规则并进行更改。

Wouldn't it be easier with a CSS selector? But there's something even worse…

使用CSS选择器会不会更容易？但是还有更糟的事情……

特异性/覆盖问题 (Specificity / Overwrite Issues)

Inline-Styles have the highest specificity among CSS selectors (when we don't count !important tags).

内联样式在CSS选择器中具有最高的特异性(当我们不计算！important标签时 )。

Considering we are using both a class and an inline-style for an element:

考虑到我们同时使用类和内联样式作为元素：

.text-bold {
  font-size: 16px;
  font-weight: bold;
}

<div class="text-bold" style="font-size: 14px">Some Text</div>

Here, the font-size of the text will be 14px, because inline-styles have higher specificity than CSS classes. When you make a change in the class:

在此，文本的字体大小将为14px ，因为内联样式比CSS类具有更高的特异性。在课程中进行更改时：

.text-bold {
  font-size: 20px;
  font-weight: bold;
}

The font-size will still be 14px. So your change in the CSS class won't work, which will cause you to end up saying:

字体大小仍将为14px。因此，您在CSS类中所做的更改将无效，这将导致您最终说：

"Hey, why is my CSS code not working? I hate CSS!"

“嘿，为什么我CSS代码不起作用？我讨厌CSS！”

and lead you to use an !important tag which does the magic:

并引导您使用！important标记 ，该标记具有神奇的作用：

.text-bold {
  font-size: 20px !important;
  font-weight: bold;
}

Which is a big no-no and leads us to the next point…

这是一个很大的禁忌，并把我们引向了下一点……

4.避免使用！important标签 (4. Avoid the !important tag)

OK, so your CSS wasn't working as was supposed to, and you made it work by applying the important tag:

好的，因此您CSS不能按预期的方式工作，并且您通过应用了重要的标记使其工作：

!important

What happens next? The !important tag has the highest specificity of all CSS selectors.

接下来发生什么？ ！important标记在所有CSS选择器中具有最高的特异性。

You're basically saying to the browser to apply that specific rule with the !important tag always and under any circumstances. This is not good because CSS rules can differ from one selector to another, from parent selector to child.

基本上，您是在告诉浏览器在任何情况下始终使用！important标签应用该特定规则。这不是很好，因为CSS规则可能从一个选择器到另一个选择器(从父选择器到子选择器)不同。

The only way to override an important tag is to use another important tag. And this leads to using more and more important tags. Trust me, in the near future your project code will be full of !important tags, which makes your CSS code much harder to maintain. So try not to use it.

覆盖重要标签的唯一方法是使用另一个重要标签 。这导致使用越来越重要的标签。相信我，在不久的将来您的项目代码将充满！ 重要标签 ，这使您CSS代码难以维护。因此，请尽量不要使用它。

5.使用预处理器 (5. Use a Preprocessor)

Working with a CSS Preprocessor like Sass or LESS is very useful in bigger projects. A preprocessor brings additional features to our CSS code that we normally can't do.

在大型项目中，使用像Sass或LESS这样CSS预处理器非常有用。预处理器为我们CSS代码带来了通常无法实现的附加功能。

For example, we can define variables, functions and mixins, we can import & export our CSS files in other CSS files and we can write nested CSS code:

例如，我们可以定义变量，函数和混合，可以在其他CSS文件中导入和导出CSS文件，还可以编写嵌套CSS代码：

A preprocessor has its own syntax and later it gets translated into standard CSS (in a separate CSS file) because browsers don't understand the syntax.

预处理器具有自己的语法，后来由于浏览器不理解该语法，它被转换为标准CSS(在单独CSS文件中)。

I like working with Sass and have used it in various projects. I have covered some of the advantages of using a CSS Preprocessor here.

我喜欢与Sass合作，并已在各种项目中使用它。我已经在这里介绍了使用CSS预处理程序的一些优点。

6.使用速记 (6. Use Shorthands)

Some of the CSS properties like paddings, margins, fonts and borders can be written in a much simpler way by shorthands. Using shorthands helps to reduce the lines of rules.

一些CSS属性(例如paddings，margins，fonts和borders)可以通过简写方式以更简单的方式编写。使用简写有助于减少规则范围。

So without shorthands, a CSS class would look like this:

因此，如果没有速记，CSS类将如下所示：

.article-container {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 15px;
  margin-right: 15px;
  border-width: 1px;
  border-style: solid:
  border-color: black;
}

and with shorthands it looks like this:

简写如下：

.article-container {
  padding: 10px 15px 20px 15px;
  margin: 10px 15px;
  border: 1px solid black;
}

You can find here more info about how to use shorthands properties and for which CSS properties they can be applied.

您可以在此处找到有关如何使用速记属性以及可以将其应用于哪些CSS属性的更多信息。

7.必要时添加评论 (7. Add Comments When Necessary)

Normally, quality code doesn't need comments because it should already be clear and self-descriptive. But still, in some cases, we may need to write additional explanations.

通常，质量代码不需要注释，因为它应该已经清楚并且可以自我描述。但是，在某些情况下，我们可能仍需要编写其他说明。

// Your Comments
.example-class {
  // your rules
}

So when you feel that some parts of the code are unclear, then don't be afraid to add comments (but on the other hand, make sure not to overdo it :)).

因此，当您觉得代码的某些部分不清楚时，就不要害怕添加注释(但另一方面，请确保不要过度使用它：)。

As a Frontend Developer with a couple of years of experience, these are the most important tips that I can suggest for improving your CSS skills. If you have any questions, or you think there are also other tips for writing better CSS, don't hesitate to comment down below.

作为具有几年经验的前端开发人员，这些是我可以用来提高CSS技能的最重要的技巧。如果您有任何疑问，或者您认为还有其他一些技巧可以编写更好CSS，请不要在下面留言。

If you want to learn more about web development, feel free to follow me on Youtube!

如果您想了解有关Web开发的更多信息，请随时 在YouTube上关注我 ！

Thank you for reading!

感谢您的阅读！

翻译自: https://www.freecodecamp.org/news/7-important-tips-for-writing-better-css/

js编写多个css

cumian9828

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js编写多个css_编写更好CSS的7个重要技巧

js编写多个cssOne of the biggest issues in programming is dealing with maintenance. In a real-world scenario, we don't always start developing projects from scratch. Mostly, we are assigned (or take) a pro...
复制链接

扫一扫