gilbox / css-bliss Goto Github PK

View Code? Open in Web Editor NEW

209.0 209.0 13.0 326 KB

A CSS style guide that puts the Clean, Smart, and Simple back into CSS

License: MIT License

css-bliss's People

Contributors

Stargazers

Watchers

Forkers

fmal ldayan ph101pp safareli ntxcode poyonkie kvirrik brabeji varias-xumak toastal sterrus begrafx

css-bliss's Issues

Parentless Modules?

Should we allow parentless modules? To a very limited degree, I've allowed it in one of my projects. It's a little confusing to look for the root Module class and then realize that there isn't one. For example, consider (a rather contrived example):

<h2 class="Title">
  <i class="Title-iconBefore"></i> 
  Hello World 
  <i class="Title-iconAfter"></i>
</h2>

versus:

<i class="Title-iconBefore"></i> 
<h2 class="Title-copy">Hello World</h2> 
<i class="Title-iconAfter"></i>

@mixin restrictions

mixins declared inside of a Module may not be used outside of that module
mixins declared inside of a module should be named like this: @MyModule-mixinDescription

%placeholder restrictions and naming

Naming: %MyModule-placeholderDescriptor
Restrictions:
- placeholders may only be declared inside of modules
- Modules may only use placeholders declared inside of them
- A placeholder declared inside of a Module may not be used anywhere else.

Multiple Modifiers on an Element?

Should we apply multiple Module Modifiers to an element?
I'm thinking use this sparingly.

Should we apply multiple Element Modifiers to an element?
I'm thinking use this sparingly as well.

What are the use cases?

.Module and .Module-element class on the same DOM element?

Is there any reason we shouldn't do the following?

<i class="Ico Ico-clientResponseTimes"></i>

or is it preferred to use a module modifier?

<i class="Ico Ico--clientResponseTimes"></i>

Siblings

Hey Gil 😄
what do you think about + ?

Is there a better way of doing this ? (assuming the sibling selector is needed)

.FlightLeg {
  &-row {
    & + & {
      // some styles
    }
  }
}

FAQ.md

FAQ

Provide a comparison to other approaches

I think it'd very convenient to have a comparison table which compares Bliss to BEM, OOCSS, etc.

Walkthrough: typo on state classes

Hi! Thanks for sharing your model, this looks great!

I was going through the walkthrough and saw that your CSS example is missing a space between the state class and the module class.

<body ng-class="{isLoggedIn:userIsLoggedIn}">
  <div class="Header">...</div>
  <div class="Hero">...</div>
  <div class="FeatureGrid">...</div>
</body>

/* modules/_Header.scss */
.Header {
  ...
}
.isLoggedIn.Header {
  ...
}

.isLoggedIn.Header should be .isLoggedIn .Header (or the DOM elements must be have both classes).

If you want a PR for this or if I'm missing something, let me know!

Thanks.

gilbox / css-bliss Goto Github PK

css-bliss's People

Contributors

Stargazers

Watchers

Forkers

css-bliss's Issues

Parentless Modules?

@mixin restrictions

%placeholder restrictions and naming

Multiple Modifiers on an Element?

.Module and .Module-element class on the same DOM element?

Siblings

FAQ.md

Provide a comparison to other approaches

Walkthrough: typo on state classes

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs