clean, simple styling for the web

csstyle is a modern approach for crafting beautifully maintainable stylesheets. Keeping CSS clean and organized is really hard. csstyle provides a higher-level abstraction for writing modular CSS. It supports both Sass and Postcss. It makes your CSS readable and semantic, generates your selectors for you, and automatically handles things like specificity and nesting.
csstyle makes your project's styling refreshingly consistent

Components

With csstyle you organize your CSS as reusable components.

Neat!
@include component(button) {
  background: #6BD9ED;
  padding: 15px;
}

Components are the primary building blocks of your project, the more you leverage them the better.

csstyle's focus on components make it a perfect match for Web/Angular/Ember/React components. Tip: create a separate file for each component to make them easy to find & edit.

Options

Make your components super flexible with options, passed as arguments to the component. Options override the component's default styling.


  Register Now
@include component(button) {
  background: #6BD9ED;
  padding: 15px;

  @include option(action){
    color: #1F1F1F;
    background: #A7E040;
  }
}
Register Now

Component options are a great way to organically grow your CSS over time. When you go to style something you can often just add a new option to an existing component. Code reuse FTW.

Parts

Components are composed of parts — child elements of the component that can be styled. Parts are very flexible. They can nest in other parts, react to component options, or even have their own dedicated options. Parts are applied using the component name followed by __ and the part name.


  Register Now
  
@include component(button) {
  background: #6BD9ED;
  padding: 15px;

  @include option(action){
    color: #1F1F1F;
    background: #A7E040;
    padding-top: 0;
  }

  @include part(icon){
    font-size: 34px;
    position: relative;
    top: 10px;

    @include option(rocket){
      &:before {
        content: "\e600";
      }
    }
  }
}

Parts make it easy to break complex components up into manageable chunks.

Tweaks

Create generic style tweaks that can be applied to any component instance, part, element, etc. Tweaks are applied using a + sign followed by the tweak name. Tweaks automatically override the styling of components, options, and parts.


  Register Now
  
@include tweak(rounded) {
  border-radius: 10px;
}

@include tweak(glass) {
  box-shadow: inset 0 0 6px rgba(0,0,0,.8), 
              inset 0 9px 1px rgba(0,0,0,.1);
}

Tweaks further promote clean organization and style reuse. Refactor common/duplicate styles out of components and into tweaks. A tweak should generally produce a single, composable effect.

Try It!

To get started just import csstyle, add an id="csstyle" to your body tag (or configure csstyle to use an id you already have) and you're set.

You can also customize csstyle to use whichever symbols you prefer.

You'll be pleasantly suprised how much better these simple building blocks make writing CSS. Happy styling!

Get Started contribute on github

Many thanks to Divshot for the sweet hosting.

Crafted with <3 by Dave Geddes @geddski