Clever Geek Handbook

Styling responsive elements

I'm a big fan. This is a really awesome tool for creating user interface, but there are some issues that are hard to get rid of without problems.

One of them is style components, the original "reactive way" uses inline styles, but this solution has some negative qualities, for example:

  • This does not seem to be the best solution from a designer's point of view.
  • Is it customizable enough?
  • I can't seem to use some of the awesome tools like autoprefixer or sass / less that make my styles more maintainable

But there are some positives:

  • Components become very cohesive and reusable, styles are shipped along with it.
  • When inline styles are used in some library I don't need to require any stylesheets, the style in my code is

Other "WriteYourStylesInJS" methods have the same drawbacks, and the biggest is the reduced styling toolbox (yes, I'm too lazy to write prefixes).

As for my actual question, how do I make my reactive components and css (or scss / sass or less or any other language) styles cohesive?

How do I make styles customizable and maintainable?

Is my assumption against inline styles a reasonable one?

+3


source to share


2 answers


In my project, I used separate css files for styling, with the same name as my components. In production it will be minified anyway and split into one js / css file, but you can easily copy / paste components from project to project.



+1


source


I am using inline styles and I had problems from the beginning, but you know what? I love to know him ...

  • I have no style conflicts. In all my previous non-reactive projects I've had these ... easy to fix, but I don't need to worry about it now.
  • If I need to edit the style of the component. I just go to the component and edit it. I used to have to check the classes of an element and then go into the css file to edit it .. and maybe I'm breaking the style of another element with the same class!
  • I like the style with js objects. Js is everywhere! Thanks to this, we don't need to use preprocessors, since SCSS has variables (just an example).

But you're right, and you might have headaches with pseudo-selectors like: hover ... or vendor preselection, even media queries.



So .. if you need all of this, you might want to check out Radium.

stay stupid!

+2


source






More articles:


All Articles