沈阳网页设计培训向您分享设计样式组件的技巧

向您分享设计样式组件的技巧

创建样式组件有几种不同的方法。我是在Illustrator中开始这个过程，但你也可以选择自己的设计工具。先设计出页面需要的东西，不要着急考虑样式组件。一旦你对设计方案满意了，就检视整个页面并分析那个元素可以成为组件。让我们在这个营销页面环境中来讨论它：

网站设计知识：举例讲解可再使用样式组件（)

你可以看到，我利用了在我早期设计过程中已经存在的白框样式。已经节省到时间！我将这个元素命名为“well”，这样它可以被方便地再使用。我还给其它一些 可能包含进我的“well”元素里的元素打上记号。我想要“well”里的每个标题都看起来是这个样子，所以我将标题记为“well__title”。按钮也是一样，记为“well__button”。

在“well”样式组件里，我还有另一个样式组件。这涉及更复杂的设计模块，但运用的方法相同。整个样式组件命名为“step”，而其内的所有元素都相应命名。以这种方式，我可以独立于“well”再使用“step”样式。

如果你还做CSS执行，你也许熟悉一些命名协定，如随主CSS（Object-Oriented CSS）和扩展性模块架构CSS（Scalable and Modular Architecture for CSS）。我的CSS结构用的是BEM。BEM是块（block）、元素（element）、修改器（modifier）的缩写，对命名层级非常严格，这对创建样式组件非常有利。块等同于一个样式组件，而元素落于块内。例如，“step”是我的块，而“step__title”是在该块里的一个元素。我建 议采用这些协定的某些方面来创建对你有用的东西。
更多行业资讯请关注沈阳卓然设计师培训官网：