CSS-Components-Modifiers-And-Subcomponents-Collection, 通用CSS模块类名称的集合

分享于 

4分钟阅读

GitHub

  繁體 雙語
A collection of common CSS module class names
  • 源代码名称:CSS-Components-Modifiers-And-Subcomponents-Collection
  • 源代码网址:http://www.github.com/bjankord/CSS-Components-Modifiers-And-Subcomponents-Collection
  • CSS-Components-Modifiers-And-Subcomponents-Collection源代码文档
  • CSS-Components-Modifiers-And-Subcomponents-Collection源代码下载
  • Git URL:
    git://www.github.com/bjankord/CSS-Components-Modifiers-And-Subcomponents-Collection.git
    Git Clone代码到本地:
    git clone http://www.github.com/bjankord/CSS-Components-Modifiers-And-Subcomponents-Collection
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/bjankord/CSS-Components-Modifiers-And-Subcomponents-Collection
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    CSS组件,修饰符和子组件集合

    web组件的公共CSS组件。修饰符和子组件类名称的集合。

    什么是CSS组件,修饰符和子组件?

    最近我一直在研究 SMACSS by Johnathan Snook和 BEM方法 Yandex,并检查我自己的CSS风格的CSS crafting。 虽然我使用了基础,布局。MODULE。状态方法来构造 CSS,但我已经开始采用基于的方法来构造 CSS,这是基于对边界元模型的研究。 我已经开始使用 Pattern,我将它称为组件,修饰符和子组件

    组件

    组件的概念与SMACSS中描述的模块概念相同。 如果你的fimiliar有 SMACSS,你就已经知道了什么是组件。 一些componentss的例子就是这样的事情:

    .nav,. alert,. btn,. modal

    修饰符

    同样,如果你熟悉 SMACSS,你已经知道哪些修饰符是。 Snook引用了子模块,但在读取边界元法methodolgy之后,我更倾向于调用这些修饰符。 这个概念很简单,我们使用修饰符来修改组件或者子组件的实例。 一些修饰语的例子是

    --breadcrumbs, --success, --submit

    将修饰符添加到组件或者子组件上,以扩展特定情况下的基本功能。

    使用中的上面 修饰符示例如下所示:

    .nav--breadcrumbs,. alert--success,. btn--submit

    子组件

    组件是组件的inside 部分,如果它有任何。 它们组成了。 例如使用. modal MODULE,你可能有以下组件:

    .modal-header,. modal-body,. modal-footer

    另一个例子是 .post 组件。 使用它,你必须遵循子组件:

    .post-title,. post-date,. post-author,. post-thumb,. post-entry, etc.

    这个 repo 是什么?

    这个 repo 只是来自web的公共组件。修饰符和子组件名称的集合。 我认为命名事情是编码中最困难的部分之一。 这些元素的样式取决于你,尽管我想为组件。修饰符和子组件提供一个共同的/流行的HTML类名。

    关于HTML类命名约定的更多思考。

    我已经在我的博客上记下了关于 HTML类名称约定的一些思考。 对模块。子组件和修饰符具有特定的方法? 让我知道。

    信用


    COM  COL  COMM  模块    Collect  
    相关文章