Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
There are so many ways to use style inside react js that it confuses me.
for example :
Normal CSS
CSS in JS
Styled Components
Sass & SCSS
Are the above methods influencing website load speed?
What is the difference between these methods?
Try using SCSS when ever you can. It helps to organize your stylings and will be processed to css any way. So there is literally no mentionable downside.
For simple styling i would recommend normal css classes (in .scss files).
For complex animation or styling logic use javascript in conjuction with existing animation libraries like framer-motion. That way you have more control over what is happening and also more possibilities to make your site outstanding and unique.
Performance is all the same, all of them are translated into plain CSS when you run : npm run build.
CSS has its benefits, because of designer-friendly but you may get some problems by accidentally making 2 classes with the same name(this is when you have CSS split into many files) if this happens it will make debugging a nightmare (been there myself).
Sass has the same problem as css, but it's a way more cooler css :)
Styled-component, CSS in js, may fit a little better on react component-based world, because for every "class" that you style a UNIQE className is generated + it gives you more power by having props/state modifying the styles of classes, not like others where for a backgroundColor change you will need 2 classes.
There are a lot of ways to do this, best-comparing article that it served me well in my beginning is in here: https://www.sitepoint.com/react-components-styling-options/
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
Vue.js support encapsulation of CSS to .vue files with the <style scoped> directive. I can't understand where I should use it, and where it's better to use CSS preprocessors like Stylus.
My idea that should be site.css with global styles and every single .vue files should have own styles (like colors of elements and other minor stuff). Am I right?
It's not "either / or". You don't have to choose, the two features do different things and can be combined.
A Preprocessor like SCSS lets your write CSS with additional syntax features, like variables. This makes writing CSS easier. But in the end, you get normal CSS, and the selector rules come out with the same names as you wrote them.
The scoped feature does something very different: it takes the CSS (after the preprocessor has processed it) and adds a unique attribute selector to all rules and an attribute to all elements in your template. That makes this CSS work only for elements in this component.
Why is this useful? Because it prevents unwanted side-effects. You can write easy class names like "header" in your (S)CSS without having to worry about that maybe, some other component also uses this class name for something different and the style rules might conflict and overwrite each other. That cannot happen with scoped.
More info on that feature here:
http://vue-loader.vuejs.org/en/features/scoped-css.html
You are in the right path. There is no right answer here. I tend to create a base.styl or base.scss that I then import in app.vue. I personally do not use scoped but more a modular css approach for the styles specific inside vue component files. i.e. .componentname as your root class, and then write your styles according to smacss or bem approach.
I suggest you keep consistency with the same css preprocessor across all components of your app.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Currently following a sass guide but, in the guide, it auto translates the code into a CSS file. Does this do this by itself or do you have to do it manually? Or (even better) can you just use sass (scss) instead of css files?
Sass is interpreted into CSS. There are several implementations of the interpreter, the "official" one being in Ruby. But until browsers start to naitively support Sass, we're stuck with CSS "under the hood".
From the Sass documentation:
Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax.
I am using it a lot because it allows me to write modular, reusable code. Especially variables and mixins are things that I appreciate.
Just like Coffeescript and Typescript are sitting on top of javascript, Sass is sitting on top of CSS.
And you need a preprocessing engine before the browser is able to use it.
So, to answer your question:
Yes, you can use Sass instead of CSS, provided that you run it through the Sass compiler before using it in the browser.
You can run the compiler manually, or set it up so that it watches for changes and auto-compiles it when needed.
SASS won't ever replace CSS. CSS is the standard developed by the W3C,
and the one browser makers follow (and sometimes advance) when
building their browsers' rendering engines. However, SASS and other
CSS pre-compilers like LESS and Stylus are making an impact on how
people view the evolution of CSS.
source
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I have completed html and css and now i want to pass another step.So should I learn responsive design with media queries first or learning Less for CSS then I pass for media queries?
Less is just a smarter way of generating CSS. I think you should learn everything CSS has to offer before jumping to a language that just generates CSS. I will give you two good reasons for that:
You can do anything with CSS that you could do with LESS. You can't do responsive design with Less if you don't know media queries.
Knowing what is happening under the hood will ease the learning of a preprocessor language (Less, Sass, etc) later, as you will have a better understanding of the bigger picture.
I'd say that media queries are easy enough to pick up alongside of a library like SASS/LESS. Responsive design is more about the concept of giving your elements dynamic values than static ones. But, don't let learning one inhibit you from learning the other. If you already have a solid understanding of css, jump in and do both at the same time. It's not like you can't go back and check out what you've written in plain css after it has been compiled.
cheers mate!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I was using Sass sometimes but recently I've heard somethings about Susy, are they same or what is the exact different between them ?
Susy is a grid library based on SASS.
SASS is a language that compile to CSS.
Simple as that. =)
Susy is a powerful set of Sass mixins for building grid-based layouts. Following are its key features:
Susy does not uses grid system as you define your own grid rules and susy takes care of rest things. So you need not create a CSS file using classes (as we do while using frameworks like Bootstrap or foundation)
Susy is not at all a framework.
You can configure rules to customize build process.
SASS is a CSS preprocessor.
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.
Susy is a grid framework that uses SASS. While not considered a framework instead you build your own grid and they handle the math for you.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm using Bootstrap 3. Ok no problem so far, but, there's a but...I don't know what is the right approach when it comes to alter bootstraps's core css code. So for instance I want to design a new theme, let's say for my own site, and I want to do that using Bootstrap 3, but when it comes to prettiness bootstrap it's like a 3-4 out of 10.
Should I tweak bootstrap files with my own css styling OR Should I build on top of bootstrap and, well, having unused css properties in bootstrap file that I overwrite in my own "style.css".
And I'm not talking about Bootstrap Customize option on site. There are not so many things I could change.
Definitely build on top of Bootstrap, create a new css file. It is better not to touch bootstrap at all, and have it act as it is intended when you need it to.
You can use Customize to add/remove components desired and customize Less variables to define colors, sizes and more inside your custom CSS stylesheets. Bootstrap's customizer finally will generate your csutom javascript & style files with desired components.
If you use css preprocessors like LESS or Sass you can do it by changing variables' values in your editor. Bootstrap's default preprocessor is LESS, but there is also available Sass version.