华为交换机css升级步骤_升级CSS

华为交换机css升级步骤

CSS seems easy at first. After all, it’s just styling, right?

起初CSS似乎很简单。 毕竟，这只是样式，对吗？

But, give it time. Soon, CSS will show you the true depths of its complexity.

但是，给它时间。 不久，CSS将向您展示其复杂性的真正深度。

There are four things you can do to stay sane while using CSS at scale: use proper semantics, modularize, adopt a naming convention, and follow the single responsibility principle.

在大规模使用CSS时，您可以做四件事以保持理智：使用适当的语义，模块化，采用命名约定并遵循单一职责原则。

使用适当的语义 (Use proper semantics)

In HTML and CSS there is the concept of semantic markup. Semantics is the meaning of words and their relationships. In the context of HTML, it means using appropriate markup tags. Here is a classic example.

在HTML和CSS中，存在语义标记的概念。 语义是单词及其关系的含义。 在HTML的上下文中，这意味着使用适当的标记标签。 这是一个经典的例子。

<!-- bad --><div class=”footer”></div>

<!-- good --><footer></footer>

Semantic HTML is pretty straightforward. On the other-hand, semantic CSS is much more abstract and subjective. Writing semantic CSS means choosing class names that convey structural meaning and function. Come up with class names that are easy to understand. Make sure they aren’t too specific. That way, you can reuse your classes.

语义HTML非常简单。 另一方面，语义CSS更加抽象和主观。 编写语义CSS意味着选择传达结构含义和功能的类名称。 提出易于理解的类名。 确保它们不太具体。 这样，您可以重用您的类。

To illustrate good semantic class names, here is a simplified example of Medium’s CSS.

为了说明好的语义类名称，下面是Medium CSS的简化示例。

<div class="stream">  <div class="streamItem">    <article class="postArticle">      <div class="postArticle-content">        <!-- content -->      </div>    </article>  </div></div>

From the code, you can immediately discern structure, role, and meaning. The parent class is stream, a list of articles. The child class is streamItem, an actual article within the list. It’s clear how parent and child relate to one another. Furthermore, those classes are used on every page that features articles.

从代码中，您可以立即识别结构，角色和含义。 父类是流，是文章列表。 子类是streamItem，它是列表中的实际文章。 很明显，父母和孩子之间的关系。 此外，在所有带有文章的页面上都使用这些类。

You should be able to read HTML and CSS like a book. It should tell a story. A story has characters and relationships between them. More semantic CSS will ultimately make your code more maintainable.

您应该能够像书籍一样阅读HTML和CSS。 它应该讲一个故事。 故事包含人物和人物之间的关系。 更多语义CSS最终将使您的代码更具可维护性。

For further reading, check out What Makes for Semantic Class Names, Naming CSS Stuff is Really Hard, and Semantics and Sensibility. For a longer read, see About HTML semantics and front-end architecture.

要进一步阅读，请查看语义类名称的成因 ， CSS内容的命名非常困难 ，以及语义和敏感性 。 有关详细信息，请参阅关于HTML语义和前端体系结构 。

模块化 (Modularize)

In the age of component-based libraries like React, modularization is king. Think of components as composable modules created by deconstructing interfaces. Below is Product Hunt’s front page stream. As an exercise, let’s break the stream down into various components.

在像React这样基于组件的库时代，模块化才是王道。 将组件视为通过解构接口创建的可组合模块。 以下是Product Hunt的首页信息流。 作为练习，让我们将数据流分解为各个部分。

Each colored outline represent a component. The stream has many stream items.

每个彩色轮廓代表一个组件。 流中有许多流项目 。

<div class="stream">  <div class="streamItem">    <!-- product info -->  </div></div>

Most components can be broken down into even smaller components.

大多数组件可以分解为更小的组件。

Each stream item has a thumbnail and information about a featured product.

每个流项目都有一个缩略图和有关特色产品的信息。

<!-- STREAM COMPONENT --><div class="stream">  <div class="streamItem">

<!-- POST COMPONENT -->    <div class="post">      <img src="thumbnail.png" class="postThumbnail"/>      <div class="content">        <!-- product info -->      </div>    </div>

</div></div>

Because the stream component is independent of its children and vice versa, you can easily adjust or switch out the post class without making significant changes to the stream class.

由于流组件独立于其子组件，反之亦然，因此您可以轻松调整或切换帖子类别，而无需对流类别进行重大更改。

Thinking in components will help you make your decouple code. The more decoupled your code is, the lower the interdependence between your classes. This makes your code easier to modify and work with in the long run.

思考组件将帮助您创建解耦代码。 您的代码解耦得越多，类之间的相互依赖性就越低。 从长远来看，这使您的代码更易于修改和使用。

When modularizing your CSS, start off by breaking your design down into component. You can do this with paper and pencil or in a program like Illustrator or Sketch. Identifying components will give you an idea of how to name your classes and how they relate to one another.

在对CSS进行模块化时，首先将设计分解为组件。 您可以使用纸和铅笔或在Illustrator或Sketch之类的程序中执行此操作。 识别组件将使您了解如何命名类以及它们之间的关系。

To read more about component driven CSS, check out CSS Architectures: Scalable and Modular Approaches, Writing Modular CSS with Sass, and Modularizing Your Front-End Code for Long Term Maintainability and Sanity.

要了解有关组件驱动CSS的更多信息，请查看CSS体系结构：可伸缩和模块化方法 ， 使用Sass编写模块化CSS以及对前端代码进行模块化以实现长期可维护性和完整性 。

选择一个好的命名约定 (Choose a good naming convention)

There are dozens of CSS naming conventions out there. Some people swear by their choice of convention, claiming theirs is better than others. In truth, the best naming convention is different for each person. The best advice I ever received on this is: choose the naming convention that makes the most sense to you.

那里有数十种CSS命名约定。 有些人会按惯例选择发誓，声称自己的习惯比其他人更好。 实际上，每个人的最佳命名约定都不同。 关于此，我收到的最佳建议是：选择最适合您的命名约定。

Here is a short list of some of the naming conventions people use:

以下是人们使用的一些命名约定的简短列表：

• Object oriented CSS OOCSS

  面向对象CSS OOCSS

• Block element modifier (BEM)

  块元素修改器(BEM)

• Scalable and modular architecture for CSS (SMACSS)

  CSS(SMACSS)的可扩展和模块化架构

• Atomic

  原子

One of my favorite naming conventions is BEM. BEM stands for block, element, and modifier. Yandex, the Russian equivalent of Google, came up with it to issues they had with their CSS codebase at scale.

BEM是我最喜欢的命名约定之一。 BEM代表块，元素和修饰符。 Yandex ，相当于Google的俄语，提出了他们大规模解决CSS代码库的问题。

BEM is one of the simplest — yet strictest — of the naming conventions.

BEM是最简单但最严格的命名约定之一。

.block {}.block__element {}.block--modifier {}

Blocks represent higher level classes. Elements are children of blocks. And modifiers represent different states.

块代表更高级别的类。 元素是块的子元素。 修饰符代表不同的状态。

<div class="search"> <input type="search__btn search__btn--active" /></div>

In the example above, the class search is the block and search button is its element. If we want to modify the state of the button, we can add a modifier like active.

在上面的示例中，类搜索是块， 搜索按钮是其元素。 如果要修改按钮的状态，可以添加类似active的修饰符。

One thing to remember about naming conventions is that regardless of which CSS naming convention you prefer, you will often times inherit or work on codebases with different standards. Be open to learning new standards and alternative ways of thinking about CSS.

关于命名约定，要记住的一件事是，无论您偏爱哪种CSS命名约定，您都经常会继承或使用具有不同标准的代码库。 对学习CSS的新标准和替代方法持开放态度。

You can read more about BEM in Getting your head ’round BEM syntax, BEM 101, and Intro to BEM. For general reading about different conventions, check out OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?

您可以在全面了解BEM语法 ， BEM 101和BEM简介中阅读有关BEM的更多信息。 有关不同约定的一般阅读，请查看OOCSS，ACSS，BEM，SMACSS：它们是什么？ 我应该使用什么？

遵循单一责任原则 (Follow the single responsibility principle)

The single responsibility principles states that every module or class should have responsibility over a single part of the functionality provided by the software, and that responsibility should be entirely encapsulated by the class.

单一责任原则规定，每个模块或类都应对软件提供的功能的一部分负责，而责任应由类完全封装。

Within the context of CSS, the single responsibility principles means that pieces of code, classes and modules should do only one thing. When applied to CSS file organization, this means that self-contained components like carousels and navigation bars should have their own CSS file.

在CSS的上下文中，单一职责原则意味着代码，类和模块片段只能做一件事。 当应用于CSS文件组织时，这意味着诸如旋转木马和导航栏之类的自包含组件应具有自己CSS文件。

/components   |- carousel  |- |- carousel.css  |- |- carousel.partial.html  |- |- carousel.js  |- nav  |- |- nav.css  |- |- nav.partial.html  |- |- nav.js

Another common pattern in file organization is grouping files by functionality. For example, in the snippet above, all the files related to the carousel component are grouped together. Adopting this approach makes finding files much easier.

文件组织中的另一个常见模式是按功能对文件进行分组。 例如，在上面的代码片段中，所有与轮播组件相关的文件都被分组在一起。 采用这种方法使查找文件变得更加容易。

In addition to separating component styles, it’s good to separate global style using the single responsibility principle.

除了分隔组件样式外，最好使用单一职责原则分隔全局样式。

/base  |- application.css   |- typography.css  |- colors.css  |- grid.css

In the example, each style concern is separated into its own file. This way, if you want to update your colors, you know exactly where to look.

在该示例中，每个样式关注点都被分离到其自己的文件中。 这样，如果您要更新颜色，则可以确切知道要看的位置。

Regardless of which file organization convention you use, let the single responsibility principle help guide your decisions. If one file starts getting bloated, consider partitioning it out based on what makes logical sense.

无论您使用哪种文件组织约定，让单一职责原则都可以帮助您指导决策。 如果一个文件开始变得肿，请考虑根据合理的逻辑对其进行分区。

For more on file structures and CSS architecture, read Aesthetic Sass 1: Architecture and Style Organization and Scalable and Maintainable CSS Architecture.

有关文件结构和CSS架构的更多信息，请阅读《 美学Sass 1：架构和样式组织以及可伸缩和可维护CSS架构》 。

When the single responsibility principle is applied to individual CSS classes, it means that each class should have only one function. In other words, separate out styles into different classes based on concerns. Here is a classic example:

当将单一职责原则应用于单个CSS类时，这意味着每个类应仅具有一个功能。 换句话说，根据关注点将样式分为不同的类。 这是一个经典的例子：

.splash {  background: #f2f2f2;  color: #fffff;  margin: 20px;  padding: 30px;  border-radius: 4px;  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;}

In the example above, we are mixing concerns. The splash class not only contains presentation and styling logic for itself, but for its children as well. To remedy this, we can split the code into two separate classes.

在上面的示例中，我们正在混合考虑。 初始类不仅包含自身的表示形式和样式逻辑，还包含其子代的样式和样式逻辑。 为了解决这个问题，我们可以将代码分成两个单独的类。

.splash {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;}

.splash__content {  background: #f2f2f2;  color: #fffff;  padding: 30px;  border-radius: 4px;}

Now we have a splash and splash content. We can use splash as a generic full-bleed class that takes any child. All of the concerns of the child, in this case the splash content, are decoupled from the parent.

现在我们有了一个启动器和启动器内容 。 我们可以将splash用作接受任何子代的泛型全出血类。 子级的所有关注点(在这种情况下为飞溅内容 )都与父级分离。

You can read more about applying the single responsibility approach to styling and classes in The single responsibility principle applied to CSS and Single Responsibility.

您可以在适用于CSS和单一职责的 “单一职责”原理中阅读有关将单一职责方法应用于样式和类的更多信息。

简化而不是复杂 (Simplicity over complexity)

Ask any good front-end developer or CSS architect and they will tell you that they’ve never been fully satisfied with their code. Writing good CSS is an iterative process. Start simple, follow basic CSS conventions and style guides, and iterate from there.

询问任何优秀的前端开发人员或CSS架构师，他们会告诉您他们对代码从未完全满意。 编写好CSS是一个反复的过程。 从简单开始，遵循基本CSS约定和样式指南，然后从那里进行迭代。

I would love to know how you approach CSS. What is your favorite naming convention? How do you organize your code? Feel free to leave a note or Tweet to me.

我很想知道您如何处理CSS。 您最喜欢的命名约定是什么？ 您如何组织代码？ 随时给我留言或发推文 。

P.S. If you liked this article, it would mean a lot if you hit the recommend button or share with friends.

附言：如果您喜欢这篇文章，那么如果您按“推荐”按钮或与朋友分享，那将有很多意义。

If you want more, you can follow me on Twitter where I post non-sensical ramblings about design, front-end development, bots, and machine learning.

如果您想要更多，可以在Twitter上关注我，我在这里发布有关设计，前端开发，机器人和机器学习的无意义的杂谈。

翻译自: https://www.freecodecamp.org/news/leveling-up-css-44b5045a2667/

华为交换机css升级步骤