[Question] Where should I write "layout" css ?

[takashi]

Hi, csstyle is great work! and I would like to use this in my project and I have a question.

I totally agree with this library's component writing style. but where should I write "layout" css ? such as position and top left and so on.

thanks.

[geddski]

Hey there. Could you provide a more specific example? I use position, top, left etc all the time in components.

[takashi]

hi @geddski , thank you for replying! for example, when i'd like to create header component, how can I create it? I think layout and component definition should be separated, is it wrong?

e.g.

<header class="header">
</header>

@include component(header) {
  background-color: red;  
  width: 100%; 
  height: 50px;
  position: fixed;
  top: 0px;
  left: 0px;  
}

I think

  width: 100%; 
  height: 50px;
  position: fixed;
  top: 0px;
  left: 0px;  

in header component should be separated from header component because these styles are not reusable. (because I think these are layout. not a style(decoration)).

I'm sorry if I misunderstood.

[geddski]

@takashi it's really up to you. Many people prefer to keep all the styles in the component so that it's all in one place. Others will want to move some of those styles out into reusable tweaks:

@include tweak(fixed){
  position: fixed;
}

<header class="header +fixed"/>

Whichever way makes your specific CSS more maintainable is best. There's never a single right way.

[takashi]

@geddski I see, I never come up with using tweak in this way. I'll try to use tweak ! And thank you for creating this awesome library :)

[geddski]

:D