Maitainable CSS Introduction

zcfy

Introduction

前言

MaintainableCSS is an approach to architecting and writing CSS that helps you and your team write modular, scalable and maintainable code.

MaintainableCSS 是一种CSS架构和编码的方法， 它能帮你和你的团队编写模块化的、可扩展及可维护的CSS代码。

In practical terms, this means that as a developer I want to create new features, or edit existing features without having to concern myself with overriding styles I don’t want applied, or worse that the code I write causes regression elsewhere.

实际上， 这意味着开发人员在创造或修改特性时，不需要为了覆盖不想应用的样式、或新代码造成其它功能回退这种更糟糕的情况而劳神。

There is nothing to download

无需下载

MaintainableCSS is not something you can download. It’s a set of principles, guides and conventions that help you write CSS for large or small scale websites.

MaintainableCSS 不是下载资源。 它是一套CSS编码原则、参考指南和约定， 适用于大小规模网站开发。

What does maintainable even mean?

何谓可维护性?

Having maintainable code means that I can edit a module and it’s styles without worrying that I have negatively caused problems in other modules by accident. I want to be able to write code that provides peace of mind knowing that my code is encapsulated.

可维护代码是指改动一个模块和它的样式时， 无需担忧意外导致其它模块异常。 知道我的代码都是良好封装的能让我心态平和的进行碥码。

What does scalable even mean?

何谓可扩展性?

This means, that as the CSS codebase increases in size, that maintaining code (see previous point) isn’t any harder. If you have ever inherited a large CSS codebase, and been worried about editing existing styles, you can sympathise with this.

可扩展是指随着CSS代码库容量的增长，代码的可维护性（见前一点）并不随之变难。假如你曾接手过一个庞大的css代码库， 为了修改样式忧心冲冲，你一定会有共呜。

What does modular even mean?

模块化是啥?

A module is a distinct, independent unit, that can be combined with other modules to form a more complex structure. In a living room, you can consider the TV, the sofa and the wall art to be modules, all coming together to create a useable room.

模块是一个不同的、独立的单元， 可以通过组合其它模块来组成一个更加复杂的结构。客厅里的电视机、沙发、艺术墙都可以看作模块，它们一起组成了这个便于使用的房间。

If you take one of the units away, the rest still works just fine. I don’t need the TV to be able to sit on the sofa etc. In a website, the header, footer, product list, article etc can all be considered modules.

如果移除某个单元，剩下的单元依然可以正常工作。电视不一定要在沙发上看。网页中的header、footer、产品列表、article 等都可以被当作模块。

Who is this for?

目标读者

If you have ever experienced pain in maintaining CSS, this book can help you avoid common problems. Whether you’re in a team of 1 or 100, I think you will find useful advice in this book. Even more so if your site is constantly evolving.

如果你曾为维护CSS苦不堪言， 这本书将帮你避免常见问题。不管你身处团队的规模大小， 本书都会提供有用的建议。假如你的网站正在迭代中，则更是如此。

How hard is this to learn?

学习难度

I would say it’s very easy to learn. You can read the entire book in under 20 minutes and apply the rules in minutes. Let me know if I am wrong though :).

我会说本书简单易学。不需要20分钟你就能读完全书，并能立刻运用书中的规则。假如我错了，请告诉我:)