struts2 css失效_CSS体系结构和可维护CSS的三大Struts

struts2 css失效

CSS体系结构的元素 (Elements of CSS Architecture)

If you have ever inherited bad CSS with the obligation of maintaining it, you might have felt some empathy towards others who would maintain your code in the future. In extreme cases, developers have no other choice, but to completely rewrite the CSS of an application. These extreme cases occur when each patch introduces multiple unwanted side-effects. Once you get to this point, your stylesheets become unmaintainable.

如果您曾经继承过不良CSS并有义务对其进行维护，那么您可能会对其他将来会维护您的代码的人感到同情。 在极端情况下，开发人员别无选择，只能完全重写应用程序CSS。 当每个补丁引入多个不良副作用时，会发生这些极端情况。 一旦达到这一点，样式表就变得无法维护。

You can only avoid giving your future self a checkmate by making architecturally solid decisions now. This is why it is important to learn the ins and outs of building a maintainable CSS architecture in practice.

您现在只能通过在结构上可靠的决策来避免给未来的自己一个将军。 这就是为什么在实践中了解构建可维护CSS架构的来龙去脉的重要原因。

If you don’t want to be the person passing on bad code, you may wonder how you can create maintainable CSS from scratch. Where would you start? Let’s look at the elements of CSS architecture that are worth considering when it comes to building your perfect project.

如果您不想成为传递错误代码的人，您可能想知道如何从头开始创建可维护CSS。 你将从哪里开始？ 让我们看一下构建完美项目时值得考虑CSS体系结构元素。

可维护CSS的三大Struts (Three Pillars of Maintainable CSS)

There are three concepts worth considering when designing the CSS architecture of a software system. These concepts are so fundamental we can consider them like pillars holding up the structure of a building. We need all three pillars to make our CSS endure the test of time and doesn’t collapse into an unmaintainable mess.

在设计软件系统CSS架构时，有三个概念值得考虑。 这些概念是如此基础，我们可以将它们视为支撑建筑物结构的Struts。 我们需要所有三个Struts来使我们CSS经受住时间的考验，并且不会陷入无法维持的混乱之中。

The first pillar defines the building blocks of your CSS architecture. These building blocks consist of a wide variety of solutions and tools, such as using Sass, writing efficient CSS selectors, the block-element-modifier (BEM) syntax, using classes instead of ID attributes, and using relative units where appropriate.

第一Struts定义了CSS体系结构的构建基块 。 这些构件包括各种各样的解决方案和工具，例如使用Sass ，编写高效CSS选择器， 块元素修饰符 (BEM)语法，使用类而不是ID属性以及在适当的地方使用相对单位。

Although this perspective gives you measurable improvements in your CSS code quality, we need a higher level of organization to make our efforts systematic. Therefore, we need a second pillar that focuses on the orchestration of building blocks to establish solid, maintainable, hierarchical CSS. Think of this layer as the skeleton of your CSS architecture. If you are interested in two ready-made CSS architectures, research a bit more about ITCSS and SMACSS.

尽管这种观点可以使您CSS代码质量得到可观的改善，但是我们需要更高级别的组织才能使我们的工作系统化。 因此，我们需要第二个Struts来关注构建基块的编排，以建立可靠，可维护的分层CSS。 将此层视为CSS体系结构的骨架。 如果您对两种现成CSS架构感兴趣，请进一步研究ITCSS和SMACSS 。

Unfortunately, neither the building blocks, nor a methodical usage of a framework or a CSS architecture give you the answer to writing rock solid, maintainable CSS. Our code becomes solid through the application of software engineering principles. This is the third pillar of writing maintainable CSS.

不幸的是，无论是构建块还是框架或CSS体系结构的有条理使用，都无法为您编写坚固，可维护CSS提供答案。 通过应用软件工程原理，我们的代码变得更加扎实。 这是编写可维护CSS的第三大Struts。

将软件工程原理应用于CSS (Applying Software Engineering Principles to CSS)

There are many different principles for engineering software that lasts.

持续存在的工程软件有许多不同的原理。

These principles are responsible for providing a purpose for using the CSS tools and solutions of your choice, through making sure that your CSS code models reality in a maintainable way. Without these principles, using any CSS architecture is mostly a ritual. Writing CSS without respecting software engineering principles tends to collapse under its weight once the size of the code becomes unmaintainable.

这些原则负责通过确保您CSS代码以可维护的方式实现现实，从而为使用您选择CSS工具和解决方案提供了一个目的。 没有这些原则，使用任何CSS体系结构通常都是一种习惯。 一旦无法保持代码的大小，编写不遵守软件工程原理CSS往往会使其负担轻重。

If you are a software engineer experienced in some programming languages, you may find the application of these principles to a declarative language like CSS quite surprising. In practice though, CSS has become a mature language, and similarly to other languages, structure is a thoughtful consideration of the code needed. Let us examine some of the main principles in action.

如果您是使用某些编程语言的软件工程师，则可能会发现将这些原理应用于像CSS这样的声明性语言非常令人惊讶。 实际上，CSS已经成为一种成熟的语言，并且与其他语言类似，结构是对所需代码的深思熟虑。 让我们研究一些实际的主要原则。

关注点分离 (Separation of Concerns)

Separation of concerns is a software design principle responsible for defining clearly separated responsibilities in a software solution. The most obvious application to CSS is the separation between classes used for styling and classes used for functionality. Styling classes should not end up in JavaScript code, and functionality related classes should not end up in your stylesheets.

关注点分离是一种软件设计原则，负责在软件解决方案中明确定义职责。 CSS最明显的应用是用于样式的类和用于功能的类之间的分离。 样式类不应以JavaScript代码结尾，并且与功能相关的类不应以样式表结尾。

SOLID原则 (SOLID Principles)

Robert C. Martin defined five SOLID principles. Some of these principles apply to CSS just as well as to other programming languages.

Robert C. Martin定义了五项SOLID原则 。 其中一些原则与其他编程语言一样，也适用于CSS。

In my course on CSS Architectures, you will find many different applications detailing how to use these SOLID principles including the Single Responsibility Principle and the Open-Closed Principle in the context of CSS code.

在我CSS体系结构课程中，您会发现许多不同的应用程序，详细介绍了如何在CSS代码的上下文中使用这些SOLID原则，包括单一职责原则和开放式封闭原则 。

When it comes to stylesheet hierarchies, we apply the Single Responsibility Principle. For instance, a layer in the ITCSS architecture contains resets or normalizers. Tag styles are built on normalizers, and component styles are built on tag styles. Each layer has one single, clearly defined responsibility.

当涉及样式表层次结构时，我们应用单一职责原则。 例如，ITCSS体系结构中的一层包含重置或规范化器。 标记样式基于规范化器，而组件样式则基于标记样式。 每一层都有一个明确定义的职责。

Possibly the best known example for applying software engineering principles to CSS code is the contrast between DRY and WET CSS. The acronym DRY stands for Don’t Repeat Yourself, while WET stands for We Enjoy Typing.

将软件工程原理应用于CSS代码的最著名示例可能是DRY和WET CSS之间的对比。 首字母缩写词DRY代表“不要重复自己”，而WET代表“我们喜欢打字”。

DRYing out your code leads to better maintainability, because whenever you make a change to DRY code, you can perform that change in just one place with a high degree of certainty that you don’t have to research the rest of your CSS code-base for other occurrences of the same code.

对代码进行干燥可以带来更好的可维护性，因为每当对DRY代码进行更改时，您都可以高度确定性地在一个地方执行该更改，而不必研究其余CSS代码库对于其他相同代码的事件。

When your CSS is WET, you can DRY it out by identifying the common pieces of your code, and abstracting this common functionality into a base class (or a mixin if using a pre-processor).

当CSS是WET时，可以通过标识代码的公共部分并将其抽象为基类(如果使用预处理器则为mixin)，将其干燥。

Using base classes and child classes in your code is called inheritance, and it is performed with @extend in Sass. When we use mixins, or the @mixin directive using Sass terms, we use composition. Inheritance, composition, and the usage of Sass constants are great tools for performing abstraction.

在代码中使用基类和子类称为继承 ，它在Sass中通过@extend执行。 当我们使用mixins或使用Sass术语的@mixin指令时 ，我们使用composition 。 继承，组合和Sass常量的使用是执行抽象的出色工具。

在CSS中尝试合成 (Experimenting with Composition in CSS)

Let’s take a look at a practical example. Suppose we have four types of rectangles in our codebase. A generic one, a rounded rectangle, a green rectangle, and a rounded green rectangle.

让我们看一个实际的例子。 假设我们在代码库中有四种类型的矩形。 通用矩形，圆角矩形，绿色矩形和圆角绿色矩形。

We might mark up each rectangle component as follows using the BEM naming convention:

我们可以使用BEM命名约定如下标记每个矩形组件：

<div class="rectangle"></div>
<div class="rectangle--rounded"></div>
<div class="rectangle--green"></div>
<div class="rectangle--rounded--green"></div>

Let’s define these four classes in Sass using inheritance. We start with the base class of .rectangle and then create modifier classes which inherit styles from the base class using Sass @extend:

让我们使用继承在Sass中定义这四个类。 我们从.rectangle的基类开始，然后创建使用Sass @extend从基类继承样式的修饰符类：

.rectangle {    
  width: 200px;  
  height: 100px;  
  margin: 20px;  
  padding: 20px;  
  display: inline-block;  
  border: 1px solid black;
}
.rectangle--rounded {  
  @extend .rectangle;
  border-radius: 20px;
}

.rectangle--green {  
@extend .rectangle; 
  background-color: green;
}

.rectangle--rounded--green {  
  @extend .rectangle--rounded;  
  @extend .rectangle--green;
}

The structure is clear, and we do not repeat ourselves in the modified classes. However, creating a hierarchy of five modifiers would yield in 31 class definitions, where most of our definitions would contain nothing more than a collection of @extend directives.

结构很清晰，我们在修改后的类中不再赘述。 但是，创建五个修饰符的层次结构将产生31个类定义，其中大多数定义只包含@extend指令的集合。

Composition gives us a more robust structure. In order to create a fully flexible structure, all we need is the generic rectangle class, and two mixins:

合成使我们的结构更坚固。 为了创建一个完全灵活的结构，我们需要的是通用矩形类和两个mixins：

@mixin rounded {  
  border-radius: 20px;  
}

@mixin green { 
  background-color: green;
}

Suppose we have a special feature box.

假设我们有一个特殊功能框。

<div class="feature-box"></div>

If the feature box is rounded, but not green, all we need to do is extend the rectangle class, and include the mixin that makes the rectangle rounded:

如果功能框是圆形的，但不是绿色的，那么我们要做的就是扩展矩形类，并包括使矩形变为圆形的mixin：

.my-rectangle {  
  @extend .rectangle;  
  @include rounded;  
}

The structure stays flexible, without the overhead for defining classes for each combination.

该结构保持灵活性，而无需为每种组合定义类的开销。

迈向更好CSS架构 (Towards a Better CSS Architecture)

We can conclude that software engineering principles apply to CSS as to any other programming language. These principles lie between two levels: the micro level of CSS building blocks, and the macro level structuring of these building blocks. As a consequence, it is beneficial to learn how to apply these principles in practice, when it comes to creating maintainable CSS.

我们可以得出结论，软件工程原理适用于CSS以及其他任何编程语言。 这些原则位于两个层次之间：CSS构件的微观层次，以及这些构件的宏观层次结构。 因此，在创建可维护CSS时，学习如何在实践中应用这些原则是有益的。

To help explain and demonstrate practical application of each of these principles, I have created a course on rock solid CSS architecture; Principles of CSS Architecture

为了帮助解释和演示这些原理的实际应用，我开设了坚如磐石CSS体系结构课程。 CSS架构原理

In this course, we explore all three pillars of CSS architecture, putting a lot of emphasis on software engineering principles. You will not only learn these principles in theory, but you will also get a chance to use them in many practical examples.

在本课程中，我们将探索CSS体系结构的所有三个Struts，重点放在软件工程原理上。 您不仅将在理论上学习这些原理，而且还将有机会在许多实际示例中使用它们。

For instance, we will take a bunch of blog posts, and identify why the supplied CSS code is unmaintainable. We walk through the process of refactoring the CSS step by step, applying the principles briefly presented in this article and covered in depth within the course videos.

例如，我们将收集大量博客文章，并确定为什么所提供CSS代码无法维护。 我们将逐步应用CSS重构的过程，应用本文简要介绍的原理，并在课程视频中进行深入介绍。

I’ve dedicated a complete section on putting the three pillars of CSS architecture into practice by creating a small component library using the ITCSS architecture and Sass. If you are interested in learning more about CSS architectures, sign up for the course, and see you inside!

我已经通过使用ITCSS架构和Sass创建一个小型组件库，专门介绍了将CSS架构的三个Struts付诸实践的完整章节。 如果您有兴趣了解有关CSS体系结构的更多信息，请注册该课程 ，然后在里面看到您！

翻译自: https://www.sitepoint.com/css-architecture-and-the-three-pillars-of-maintainable-css/

struts2 css失效