Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ivan Kusakovic
12,197 PointsHow that @import don't override selectors after it?
If I put into morestyles.css something like this: h1 { color: orange; } and after it in a stylesheet enter
h1 { color: blue; }
What is the result?
Can someone explain me this better?
Thanks
7 Answers
Kevin Korte
28,149 PointsYeah, true, however I'd always avoid !important rules in your css, with very rare exceptions. It creates an absolute nightmare if you use !important to override styles instead of adjusting the specificity or source order.
I'd also try to avoid inline styles, for similar reasons, unless the css is being generated dynamically, than it's okay.
I haven't watched the video, but you can @import anywhre in the css file, and it basically copies and pastes the code from the file you're importing right at that spot, so that controls source order to a degree.
You'll also learn @import is not good to do in vanilla CSS.
Aaron HARPT
19,845 PointsWhichever style comes last is the one that will get applied.
Kevin Korte
28,149 PointsYep, h1 will be blue. Two things decide which styles are overriding. CSS specificity and order in the document.
Ivan Kusakovic
12,197 PointsWhy then is important to put @import to the top?
Ivan Kusakovic
12,197 PointsThree things decide, not two :) I'm learning that right now :)))) Importance, Specificity, and Source Order.
But things wasn't so clear after viewing this @import :)
Ivan Kusakovic
12,197 PointsWhat is vanilla CSS?
Kevin Korte
28,149 PointsIt's what you're learning in this course. It's just CSS, what the browser gets.
What I was inferring to were CSS preprocessors like Sass, Less, and Sylus. You'll learn about those later, treehouse has courses on them. But in short, the preprocessor langauges add things like functions and variables to our CSS. @import works differently in these languages, because the import runs at compile time, so it get's compiled into one css file the browser gets, and you don't end up with the same performance bottleneck that @import has in vanilla css.
Hopefully that's not too much. Hopefully it's enough to make you excited to keep learning CSS, and advanced CSS and preproccessors like Sass here.
Ivan Kusakovic
12,197 PointsI'm on my way :) It's always interesting hear something like that. Thanks Kevin Korte, have a nice day!