解决ui项目架构设计的问题
它是什么
01.样式架构
02.可伸缩的
03.可管理的
04.思想流派
05.元框架的
06.极简单的
为什么要
Problems with CSS at scale
CSS’ fault vs. our fault
01.The cascade and inheritance.
02.Very loose .
03.Highly dependent on source order.
04.Not very expressive. Lots of gotchas. Specificity.
01.Lack of documentation.
02.Lack of structure, quality assurance.
03.Mixture of abilities.
04.Lack of knowledge (about CSS or the project itself).
05.Different styles, preferences, ways of working.
06.Not looking to see/being aware of what exists already.
07.Adding new styles to the end of stylesheets.
Inheritance, the cascade, and source order
01.Each piece of CSS needs a knowledge of what came before it and what might come after it – a.k.a. dependencies.
02.CSS is one giant dependency tree.
03.We need a way to manage this dependency at a very low level.
04.Ways of ordering stylesheets：
（01）.Mirror（反映） the web page – old school!
（02）.Thematic（专题的） chunks – typography, forms, buttons, etc.
（03）.Just stick it on the end of the stylesheet.
05.Writing more CSS in order to undo other CSS.
06.Poor source order coupled with inherited/inheriting styles can lead to a lot of waste and/or redundancy.
Specificity
01.It doesn’t matter how well-considered your source order is.
02.how well you’re utilising the cascade.
03.what naming conventions you use.
04.specificity can undo everything.
推荐场景？
01.管理样式工程
02.管理大型应用
如何实现
Write CSS in specificity order.
一些目的？
01.A sane environment that is accessible to lots of people.
02.To tame and manage source order and the cascade.
03.To create a place for everything to live (new and old).
04.To reduce waste and redundancy.
05.To end the Specificity Wars.
倒三角形?
01.从通用的到明确的
02.从广泛的到局部的
03.从低明确到高明确
默认的层？
01.Settings: Global variables, config switches.
02.Tools: Default mixins and functions.
03.Generic: Ground-zero styles (Normalize.css, resets, box-sizing).
04.Base: Unclassed HTML elements (type selectors).
05.Objects: Cosmetic-free design patterns.
06.Components: Designed components, chunks of UI.
07.Trumps: Helpers and overrides.
设置层：定义预处理器sass/less/styuls的变量和默认值。包含全局有效设置，配置开关，扩展颜色等。
如$color-ui,$spacing-unit
工具层：定义预处理器sass/less/styuls的函数和混合器。包含全局有效工具，公共混合器，助手函数。
如@mixin font-brand() 。
通用层：低级别的专化性；Resets, Normalize.css等
基础层：未分类的网页元素，标题，基础链接，列表等;标签选择器，如ul,a,blockquote。
对象层：面向对象的；设计模式；开始使用类名，如.ui-list；
组件层：设计UI片段；使用类名；更明确的名字如.products-list 。
覆盖层：覆盖的，工具的，助手的；仅在某时刻影响DOM的某一片段；常用!important。
如：.one-half {width: 50% !important;}
需要注意？
01.专化性：slowly increases layer-by-layer.
02.影响性：We affect smaller and smaller bits of the DOM at a time.
03.渐进性：Progressively adding styles; never undoing.
伸缩架构？
01.层的增删：Add or remove layers if, as, and when you need to.
02.预处理器：Not using a preprocessor? Remove the Settings and Tools layers.
03.面向对象：Don’t use OOCSS? Remove the Objects layer.
04.需要主题：Need theming? Add a Theme layer.
参考文献
andeers:writing-css-with-itcss
csswizardry:a-talk-on-itcss-dafed
网友评论