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 9 years ago.
Improve this question
The book "CSS and Documents" by O'Reilly states:
"CSS requires the #import directive to come before any other rules in a style sheet."
I wonder, why was CSS designed in this way? After all, if the import came after
some other palin text CSS rules then why couldn't it simply be set to override
them or extend them in the middle of the document style rules?
Thanks.
As per the official documentation:
The '#import' rule allows users to import style rules from other style sheets. In CSS 2.1, any #import rules must precede all other rules (except the #charset rule, if present).
It must be placed there, before the other CSS rules, or else it won't work at all.An #import rule that follows one or more rule sets will be ignored.
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 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 3 years ago.
Improve this question
In Less and Sass we make use of lots of mixins, how does the browser compile or converts those mixins to regular CSS and apply those styles?
The browser DOES NOT convert pre-processed (LESS, SCSS, Compass) CSS rules.
You need to use a build script/compiler BEFORE linking a normal CSS file to your HTML. This process converts SCSS/LESS -> CSS for your browser to render.
You can use Webpack, Grunt, Gulp, or even desktop/GUI tools to do this.
You can also use a javascript parser to inject the final CSS into the page onLoad but this has performance implications and IS NOT recommended.
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.
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 8 years ago.
Improve this question
How does the
not(#foo)
selector works to block older browsers and for which browsers does it work in the following tutorial?
http://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons/
The CSS selector does not block browser, it's just not supported by the browser, i.e. when CSS file is being parsed by browser's built-in parser (which in turn supports certain CSS specification), unknown selectors and rules will be ignored and won't be added into styles of frames in render tree
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 9 years ago.
Improve this question
maybe a silly question but as far as I like standards I'd like to know, how should we write CSS selectors:
.my-selector-for-div (breaks)
.mySelectorForDiv (camel case)
Is there a standard which of those ( or any other ) should be used ?
Here is a website of css name convention (with examples):
http://www.realdealmarketing.net/docs/css-coding-style.php
There are some interesting articles about code formating (about CSS and BEM methodology):
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
http://coding.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/
I'd go with matching the language. In CSS' case it uses hyphenation regularly so for selectors I would also use hyphens even though I personally find them ugly.
Not sure if there's a proper style guide for them though.
edit: Can I use camel-case in CSS class names seems to also say use hyphens for class names.