translate style.md #148

yutingzhao1991 · 2018-01-26T07:58:21Z

No description provided.

ddcat1115 · 2018-03-07T02:19:51Z

docs/style.en-US.md

+
+## less
+
+Ant Design Pro defaults to using less as the style language, we recommended that you learn about the features of [less](http://lesscss.org/) before using it or sometimes when you have some questions.


ddcat1115 · 2018-03-07T02:20:20Z

docs/style.en-US.md

+
+## CSS Modules
+
+In the style development process, there are two problems are prominent:


there are two prominent problems:

ddcat1115 · 2018-03-07T02:35:55Z

docs/style.en-US.md

+
+In the style development process, there are two problems are prominent:
+
+- Global Pollution - CSS file selectors are globally valid. according to the build file generated in the order, the ahead selector's style will be cover by the back one which has the same selector name;


CSS selectors are globally valid. Selectors with the same name in different files will be built together, and the former will be overrided by the latter.

ddcat1115 · 2018-03-07T02:58:39Z

docs/style.en-US.md

+In the style development process, there are two problems are prominent:
+
+- Global Pollution - CSS file selectors are globally valid. according to the build file generated in the order, the ahead selector's style will be cover by the back one which has the same selector name;
+- Selector complex - in order to avoid the above problem, we have to be careful when writing styles. the class name will be brought flag for limit the style's scope lead to it will getting longer and longer. And in multi-person development, it not only easily lead to the naming style confusion but also cause the number of selectors used on an element be more and more.


Complex selector

...The increase in flags for range restriction will lead to a growing class name, besides that, naming style confusion in multi person development and an increasing number of selectors on an element is hard to avoid.

ddcat1115 · 2018-03-07T02:59:32Z

docs/style.en-US.md

+- Global Pollution - CSS file selectors are globally valid. according to the build file generated in the order, the ahead selector's style will be cover by the back one which has the same selector name;
+- Selector complex - in order to avoid the above problem, we have to be careful when writing styles. the class name will be brought flag for limit the style's scope lead to it will getting longer and longer. And in multi-person development, it not only easily lead to the naming style confusion but also cause the number of selectors used on an element be more and more.
+
+In order to solve the above problems, our scaffold use CSS Modules as a modular solution. let us have a look at how to write style in this mode.


首字母大写

或者改成逗号

ddcat1115 · 2018-03-07T03:01:30Z

docs/style.en-US.md

+}
+```
+
+Write style use less file does not seem to change, but the class name is relatively simple (the actual project is also the case). js file change at the className property, it changed with an object attribute instead of the original string. the object is import from the less file, and the attribute name same as the selector name in less file.


Write style use less file does not seem to change much

...The classname in js files would be replaced by an object attribute, which has the same name as the selector in the less file from where the object was imported.

ddcat1115 · 2018-03-07T03:11:04Z

docs/style.en-US.md

+
+Write style use less file does not seem to change, but the class name is relatively simple (the actual project is also the case). js file change at the className property, it changed with an object attribute instead of the original string. the object is import from the less file, and the attribute name same as the selector name in less file.
+
+In the above style file, `.title` will only work in this file, you can use the same selector name in any other file, it will not affect here. But sometimes, we just want a global style which effective everywhere? You can use `:global`.


we just want a global style which can take effect everywhere

ddcat1115 · 2018-03-07T03:15:17Z

docs/style.en-US.md

+<div class="title___3TqAx">title</div>
+```
+
+The class name is automatically added a hash value, which guarantees its uniqueness.


Hash value is added to the class name automatically...

ddcat1115 · 2018-03-07T03:16:20Z

docs/style.en-US.md

+
+The class name is automatically added a hash value, which guarantees its uniqueness.
+
+In addition to the basics above, there are some key points to note:


to be noted:

ddcat1115 · 2018-03-07T03:20:11Z

docs/style.en-US.md

+
+In addition to the basics above, there are some key points to note:
+
+- CSS Modules only convert `className` and `id`. Others such as property selectors and tag selectors are not processed. It is recommended to use className as much as possible.


It is recommended to use className as much as possible. 这句有歧义，可以改为：

It is recommended to take className as the first choice.

ddcat1115 · 2018-03-07T03:22:28Z

docs/style.en-US.md

+- CSS Modules only convert `className` and `id`. Others such as property selectors and tag selectors are not processed. It is recommended to use className as much as possible.
+- Since you do not have to worry about className repeat, your className can be as simple as possible with basic semantics.
+
+CSS Modules above only the most basic introduction, are interested can refer to other documents:


It's a brief introduction for CSS Modules, for details, please refer to:

ddcat1115 · 2018-03-07T03:26:30Z

docs/style.en-US.md

+}
+```
+
+> Because antd will bring some global settings, such as font size, color, line height。 so here, you only need to focus on their own individual needs can be, without a lot of reset.


中文句号

So there is no need to do a lot of reset, you can focus on your individualized demands.

ddcat1115 · 2018-03-07T03:29:47Z

docs/style.en-US.md

+
+### src/utils/utils.less
+
+Here you can place some tool functions for the call, such as clearing the floating `.clearfix`.


Here you can place some tool functions ~~for the call~~

ddcat1115 · 2018-03-07T03:33:01Z

docs/style.en-US.md

+
+#### Component level
+
+This is also very simple, there are component-related styles. In your project, there are some reusing fragments in the page or relatively independent function which can be define as components, the relevant style should be extracted on the component, rather than confusing in the page.


This is also very simple, they are component-related styles

reusing -> reuseable

ddcat1115 · 2018-03-07T03:36:27Z

docs/style.en-US.md

+}
+```
+
+Two points need to note:


to be noted

ddcat1115 · 2018-03-07T03:40:35Z

docs/style.en-US.md

+Two points need to note:
+
+- The imported antd component class name is not translated by CSS Modules, so the overridden class name `.ant-select-selection` must be put in `:global`.
+- Because of the previous note, the coverage is global. To prevent this from affecting other Select components, need to wrap extra className for limit the scope of the style.


To avoid affecting other Select components, the setting needs to be wrapped by an extra classname to add range restriction.

ddcat1115 · 2018-03-07T03:41:25Z

@yutingzhao1991

yutingzhao1991 · 2018-03-07T03:42:50Z

OK, got it, I will fix it later.

translate style.md

8c79c57

yutingzhao1991 assigned ddcat1115 Jan 26, 2018

nikogu mentioned this pull request Mar 5, 2018

Document Translation ant-design/ant-design-pro#120

Closed

41 tasks

ddcat1115 reviewed Mar 7, 2018

View reviewed changes

docs/style.en-US.md Outdated

}

```

Two points need to note:

Copy link

Contributor

ddcat1115 Mar 7, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to be noted

ddcat1115 reviewed Mar 7, 2018

View reviewed changes

fix review issue

0561885

ddcat1115 merged commit 61a6091 into master Mar 8, 2018

afc163 deleted the yu-translate branch March 8, 2018 05:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

translate style.md #148

translate style.md #148

yutingzhao1991 commented Jan 26, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018 •

edited

Loading

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 Mar 7, 2018

ddcat1115 commented Mar 7, 2018

yutingzhao1991 commented Mar 7, 2018


		## less

		Ant Design Pro defaults to using less as the style language, we recommended that you learn about the features of [less](http://lesscss.org/) before using it or sometimes when you have some questions.


		## CSS Modules

		In the style development process, there are two problems are prominent:


		In the style development process, there are two problems are prominent:

		- Global Pollution - CSS file selectors are globally valid. according to the build file generated in the order, the ahead selector's style will be cover by the back one which has the same selector name;


		Write style use less file does not seem to change, but the class name is relatively simple (the actual project is also the case). js file change at the className property, it changed with an object attribute instead of the original string. the object is import from the less file, and the attribute name same as the selector name in less file.

		In the above style file, `.title` will only work in this file, you can use the same selector name in any other file, it will not affect here. But sometimes, we just want a global style which effective everywhere? You can use `:global`.


		The class name is automatically added a hash value, which guarantees its uniqueness.

		In addition to the basics above, there are some key points to note:


		In addition to the basics above, there are some key points to note:

		- CSS Modules only convert `className` and `id`. Others such as property selectors and tag selectors are not processed. It is recommended to use className as much as possible.


		### src/utils/utils.less

		Here you can place some tool functions for the call, such as clearing the floating `.clearfix`.


		#### Component level

		This is also very simple, there are component-related styles. In your project, there are some reusing fragments in the page or relatively independent function which can be define as components, the relevant style should be extracted on the component, rather than confusing in the page.

translate style.md #148

translate style.md #148

Conversation

yutingzhao1991 commented Jan 26, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ddcat1115 Mar 7, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ddcat1115 commented Mar 7, 2018

yutingzhao1991 commented Mar 7, 2018

ddcat1115 Mar 7, 2018 •

edited

Loading