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 a question to web designers - do you think that it's fine to make CSS classes with one rule in them?
For example, I usually write classes like .float-right, .center or margin-top-40 to apply them to divs or some other elements. But I must say that I'm not writing all CSS this way, just applying these classes in some places when it's necessary to remain flexibility, like when I have to move one link to the right or something like that.
Do you think that it's the correct way of using CSS?
My suggestion is to create a base file which will include a lot of classes with one rule.
And in a different css file, you will use Sass with #extend to build your component css classes.
For example:
.foo {
color: red;
}
.bar {
#extend .foo;
}
For the examples you have mentioned, it is not necessary to write additional class for the particular style. You can write them where necessary.
Adding additional style rule adds extra class in the html markup.
You can use #mixin in SCSS which will be more efficient.
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 7 months ago.
Improve this question
I've an angular app which uses SASS.I want to style a certain class of buttons in specific way. This class of button is used throughout my app in certain components. I want to know which would be better way to write the common style for them. I know using #import and #extend will copy my common styles into each component's scss right after compilation? So will it affect the size of my application as well it's performance?
Another idea I have is to go for global stylesheet, styles.scss.
I want to know which would be better in terms of maintenance and performance.
indeed, #import and #include will copy the code into your component style, so your bundle size will grow.
Using #extend only copy the CSS selector of your class (instead of its content), so your bundle will also grow, but less than using #include. A downside of #extend is you can't use a #media queries with an #extend.
The lightest solution is using styles.scss, which can obviously be splitted into multiple files, which would be imported into your styles.scss. That is how I personnaly use a Design System in all my angular apps.
I only import variables and mixins in my components. All global stuff is handled in styles.scss
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
What's the benefit of overriding Bootstrap SCSS variables vs just overriding Bootstrap's CSS class rules?
For example,
Overriding variables:
$custom-font-size: $input-font-size;
Overriding class:
.someClass {
font-size: $input-font-size;
}
For one, duplication of output. If you override classes then that will mean that in your CSS you'll be including both the Bootstrap definition and the overriding definition. Not ideal, so on a smaller scale this works fine.
But on the bigger scale though, overriding potentially hundreds of classes (if not more) will be both a waste of resources for any end users (since there will be more data to download) but also a waste of time because you have to go and find every single instance where you want to override the use of that variable. Changing just the variable once will change every instance of where that variable is used, and you don't get the extra output. A win-win.
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 4 years ago.
Improve this question
I am working on a Vue.js project that uses Vuetify and vue-flash-message. I am trying to set warning message background to 'blueviolet' by editing its style:
.flash__message.warning {
color: #ffffff;
background-color: blueviolet;
border-color: #ef9e3b;
}
but there is '.warning' class in Vuetify that overrides it, see the screenshot .
I wonder if anyone can explain what technique is used here. And what is the right way to make the message background 'blueviolet' in this situation?
The issue here is your second class which is telling the browser to set the background to yellow as the !important tag on the end of each property. !important tells the browser to override any other styles that overlap classes. You need to:
A) Remove the important from the yellow styles and apply them to the purple
B) Remove the yellow styles all together.
Option A will seem more 'logical' but it depends what environment your working in and how your code etiquette applies to your project. I prefer to keep everything simple and just remove the intrusive css and try and use less !importants in web projects.
For more information on the !important utility visit this helpful blog post: !Important Utility information
Hope this helps.
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 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 working on a CSS file with more than 3000 lines.
In this CSS file there are around 40 elements, which have the property display:inline;
Now my question is; wouldn't be better to create a class like:
.displayInline {
display: inline;
}
and use it inside the mark-up whenever an element needs to have display: inline; rather than writing the display: inline; 40 times for 40 different elements in the CSS file?
Thanks for your help
It is definitely worse. Indeed what are you talking about is the bad practice, that become somewhat popular with so-called CSS frameworks. Representational information (CSS rules) should not appear in structural part (markup) of code. This is an MVC interruption. By the way, MVC pattern isn't the silver bullet, but in this case there is no reason to ignore it.
Here is a good article on that topic: http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html
So, answering your question, it may be fine to try out some CSS preprocessors that support mixins. Native CSS doesn't fit well inner hierarchical tasks. Less or Stylus are quite cool.