CSS Is Hard
This is a modal window.
Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.
Formale Metadaten
| Titel |
| |
| Serientitel | ||
| Anzahl der Teile | 22 | |
| Autor | ||
| Lizenz | CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported: Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben. | |
| Identifikatoren | 10.5446/34726 (DOI) | |
| Herausgeber | ||
| Erscheinungsjahr | ||
| Sprache |
Inhaltliche Metadaten
| Fachgebiet | |
| Genre |
EmberConf 201521 / 22
6
8
9
10
14
15
16
17
18
20
21
00:00
DatenstrukturProdukt <Mathematik>MAPArithmetisches MittelGruppenoperationPolygonZahlenbereichAutomatische HandlungsplanungProzess <Informatik>Zusammenhängender GraphSchnittmengeKartesische KoordinatenSpiegelung <Mathematik>Monster-GruppeWeg <Topologie>MultiplikationsoperatorStandardabweichungRechter WinkelDemo <Programm>App <Programm>RoutingAbschattungComputeranimation
02:49
KorrelationRadikal <Mathematik>Rechter WinkelKartesische KoordinatenComputeranimation
03:03
DatenstrukturMAPMereologieZahlenbereichVerzeichnisdienstZusammenhängender GraphTemplateKartesische KoordinatenElektronische PublikationDatenreplikationRechter WinkelWechselsprung
04:01
Demo <Programm>CLI
04:07
BootenZahlenbereichZusammenhängender GraphMultiplikationsoperatorRechter WinkelComputeranimation
04:26
DatenstrukturVerzeichnisdienstZusammenhängender GraphTemplateKartesische KoordinatenElektronische PublikationSchlussregelCloud ComputingZellularer Automat
05:13
Demo <Programm>VektorrechnungZusammenhängender GraphRechter Winkel
05:45
VektorrechnungZusammenhängender GraphKlasse <Mathematik>NamensraumDemo <Programm>XML
06:07
BitZusammenhängender Graph
06:31
Zusammenhängender GraphComputeranimation
06:40
VektorrechnungInstallation <Informatik>RückkopplungProgrammierumgebungFlächeninhaltProgrammfehlerUmsetzung <Informatik>Elektronische PublikationTwitter <Softwareplattform>BildschirmfensterInstallation <Informatik>Computeranimation
07:53
KorrelationVideokonferenzEreignishorizontDienst <Informatik>Computeranimation
08:09
Computeranimation
Transkript: Englisch(automatisch erzeugt)
00:17
is titled CSS is hard, because I didn't have much time to think of anything more clever
00:21
than that. So how many of you are building ambitious applications? Okay. So most of you. That's good. Which is great, because, you know, Ember's helped us build these great ambitious applications, and it's helped us tame what was our spaghetti JavaScript into this beautiful orchestration
00:45
of components all working together. But we have yet to help you tame the spaghetti monster in CSS land, haven't we? And one of the big problems with CSS is that it's global.
01:00
So it's very easy to define styles in one place. Maybe you're organizing your styles very effectively, but it's very easy to make a mistake and now all of a sudden a style you've defined somewhere is now leaking elsewhere. And so there's technologies that are, you know, on the standards track to help us with this.
01:20
Things like Shadow DOM, and in previous Shadow DOM there was the idea of style scoped. And there's some other cool things happening on the standards track as well, but those things are still being proposed, there's some polyfills, but those may or may not be usable by you in production. So, you know, really what we've learned to do in CSS is to build up a set of conventions.
01:44
And that's not unlike the things that we've done in JavaScript land, right? We've built up a set of conventions, this is what Ember gives you, a set of conventions to build your JavaScript applications. Well, what about bringing conventions to CSS? And with Ember 2.0, we're componentizing all of the things, right?
02:02
And one of the things that's going to shake out, I suspect, and that we've been talking about is that we're going to want to move to a pods-based structure for your application. And you know, what that means is effectively in Ember 2.0, you're writing all components, your app slash components folder is going to get very full, right?
02:22
And so pods are going to allow us to have top-level folders for our components and potentially groupings of components perhaps by route. So what can we do? How can Ember help us with our CSS? Let's see if I can pull off a quick demo.
02:49
Mirror, please. So here we are in a terminal. I'll hide my desktop.
03:02
Such shame. All right, so, well, so here we are inside of an Ember application. And it just so happens, right before I got up here, I just published a new add-on to NPM called the Ember component CSS. So I'm going to pretend to install that in here. And so now we've magically got our add-on installed, all right?
03:23
And then we can open up Sublime, and we can start building our first component inside of our application. So we'll jump to our application.hbs file, and we'll get rid of this outlet and replace it with a handy-dandy my-component. And so how are we going to build this component?
03:43
Well, we're going to use pod structure, and effectively, at the simplest level, what that means is we're just going to create a directory called my-component. And inside this, we'll put our template.hbs file, and we'll say, hello from my-component.
04:01
And if I bring up Ember CLI here, oop, I got to start it. Those fast boot times really come in handy. All right, so here we go, right? This should be nothing controversial. This is hello world in Emberland.
04:22
But we've built this component, and now we want to style it, right? And so what do we do? Well, what you've probably done is you've opened up this styles directory, and now you've mirrored all of your component structure or your file structure that lives inside of the application directory. Inside of this styles directory, and you're using something like Sass or less, and you're
04:41
importing and bringing everything around, you've got a nice organized file structure. But in Podsland, we already have these folders, so what should we do? Well, we should be able to just drop in a styles.css file here, right? And so now if I go ahead and define a CSS rule here, I should be able to go use it
05:02
from inside of my template. Oh, God, things are breaking in the background. I should be able to go use it, and hopefully, our component will turn blue, right? So this is very cool, right?
05:22
But Eric, you say, foo is a very generic name. That's going to leak, and you're going to have foos and other components. What about add-ons and third-party components, yada, yada, yada? Well, my friend, have I got something for you. In the background, our add-on has actually got our back.
05:41
Oh, no. And it has gone and added a magical namespaced class for us in our components. And so if we go and look at our usage of foo here inside of our component, you're going to see here it's automatically namespaced for us.
06:04
This is very cool, right? Now, to finish off the demo, the one missing piece is you're going to ask, well, I want to style my component myself, not just style things inside of my component. So how do I do that? Well, I borrowed a little bit of syntax.
06:21
You can ampersand, and you can do something to this component. And now, we are styling, hopefully, our component as well. So this is what I've been hacking on.
06:46
If you have been trying to get my attention or have a conversation with me for the last several hours, this is what I've been doing. So let's see. Where did another window go?
07:05
So basically, you can try this yourself right now. It's already up on NPM. Give it an install. There's probably bugs. It's demo-worthy quality. I had Robert Jackson review it for me, and he said it did not make him want to vomit.
07:22
So that was good. So yeah, give it a shot. Give it a try. Let me know. I think we really have a great story to bring to Ember around conventions in CSS land as well. So please file issues and give me some feedback on it.
07:40
And yes, I'm planning to support Sass and Less and all that stuff. Everybody's been asking me that. So give me a shout on Twitter if you have any thoughts. Thanks.