The Road to Styled-Components: Styling Component Based Systems

[Music] everybody I just took a very long ride to get here interestingly I've spoken at a bunch of conferences all around the world I've been to the USA I've been to India I've been to all over the place but I've never actually spoken at a conference in Vienna this is a first which is very exciting I'm excited to be it he said I want to talk to you about styling component based systems right if you want to find me anywhere on the web it's mxs DB are you can see on the slide if that looks kind of complicated it's just my name without vowels so just take my name remove all the vowels and you get my hand will pretty much everywhere I'm the co-founder of a community platform called spectrum we have this problem where large online communities all around the world are organizing on platforms that really aren't made for them right for example you have reactive flux who discuss on this chord but the problem with all of these single stream of chat platforms is that they don't scale as soon as you get more than a couple dozen active members you can add as many channels as you want it'll get very confusing very fast and so spectrum aims to solve that by sort of mixing a traditional forum with a chat app and sort of intermingling them in a single platform should go and check it out we have some really cool communities on there from front end to react to no J's lots of stuff on there just go respect no chat slash explore and take a look I'm here today because I want to tell you a little story before I worked on spectrum I worked at an agency and that agency was very specialized on react right we worked mainly with startup or startups or medium-sized companies and help them get their dynamic applications of the ground with because we liked it react and for that purpose been because we built a lot of prototypes we built a common UI library that we just used throughout all of most or most of our projects right so we built that UI library and then we thought well now we've built this UI library so we might as well open source it so other people can use it - it's called elemental UI you can view we don't get up and download it and use it yourself if you go to the you elemental UI website and scroll down a bit you'll see the sort of typical open source project installation instructions right the npm install in a couple of setup steps and then there is this note right in the middle now I know this is quite small so I took the liberty of making it a big bigger that that note says elemental styling is currently written in less so you will need a less compiler in your build process and that seems like a sensible thing to mention at that point right every native styling is written is in less which we were using at the time very heavily from all of our projects basically so for us it made sense to build our own component library with less as well but if you think about it from the perspective of consumer of the library it makes a little less sense because imagine if you're using sass now to use our component library you have to include a completely separate build tool chain just to render a button that we made on top of that what it does what that note doesn't say is that you also have to use webpack because we use CSS modules so we wrote this component library and you want to use it but if you want to use it you're suddenly tied into a very specific JavaScript build tool chain and CSS build tool chain that's less than optimal right you just want to render a button but you had to actually setup and configure all of this build tool chain to do it there's a famous quote by Joey Armstrong the creator of Erlang a functional programming language which I'm sure you know about object-oriented program and he said you want the banana but what he got was a gorilla holding the banana and the entire jungle he was talking about object-oriented programming right this is a very famous quote where he argues that functional programming is superior in some cases slightly rephrase this fits very well to element UI you want a button but what you got was a gorilla holding the button and an entire build tool chain that's what elementally Y is like right you end up having to include all of this huge amount of build tooling just to render our button and our heading and it's ridiculous right it just doesn't work for it's not a good solution so almost three years ago we open an issue and started discussing about a better way to handle our styling for our component library I at the time was down in Australia meeting a friend called Sharky and Sharky took me to this lovely bar in Sydney called on Cummings uncle Ming's is a really kind of shady Chinese bar right it's often off of a Main Street in Sydney but you have to go down this sort of unmarked stairwell into like a cellar area through a tiny door that's totally unmarked you can't see it from the outside and you walk in it's in it's this dimly dimly lit room and they have some of the best whiskey you can get I'm not a whiskey person but charkie's and so he took me there to introduce me to the world of whiskey and they also have some amazing finger foods with tempura and dumplings it's if you're ever in Sydney you should go to Uncle Ming's if you can find it as we were there and I was talking to him and then he mentioned that another friend from Melbourne was in town for a week just for work and he invited him to come and join us and that friend turned out to be Glen matter you know if you don't know claim Glen is one of the creators of CSS modules which elements do I use and build all of these troubles without an entry why and so I talked to Glen about it right I asked Glen look remember having this problem you know this build tool chain you have to use to use that immensely why it's really annoying users hate it we hate it because we might not want to use less anymore have you ever run into that like what do we do in Glen Glen said yeah I've I've run into that from my thought about this a bit have you heard about this thing called CSS in JavaScript and I remember looking at going and going what what is he talking about why would you ever put CSS into Java how does that even make any sense those are two separate languages and I say Glen I mean I I trust you you're great but what the are you talking about and Glenn said look look hear me out for a second right imagine if you put all of your CSS into JavaScript and then dynamically inject it into a style tag at runtime what happens is your users already have a JavaScript build tool chain right if they're using react they're already using whatever JavaScript build tool they want so they don't have to add any specific tool chains use your component library also they don't have to add any serious bill to change because it's injected from JavaScript right on top of that you can also add dynamic capabilities because when you inject is is at runtime you don't have to resort to to less syntax or sass syntax to have variables and stuff like that you can just have variables in JavaScript right you don't need any specific syntax anymore let's just drop a script and I said okay sounds kinda intriguing a bit slow maybe but can i intriguing and where do I where do I go with this and things that look you definitely want to be using CSS and JavaScript right it it's it's all JavaScript so people don't have to do anything special that makes total sense those using Java scripts difinitely the right to the right way to go but there's a slight caveat there because while at the time when it happened which is now two years ago three years ago there were existing projects exploring this world of CSS in GIS and none of them really solved our use case specifically right almost all of them required you to use write CSS as JavaScript objects which is very annoying right CSS you see that especially the syntax of CSS is very very sensible right see this is a great language and it's been designed for many years by very many smart people to work well for what it does so throwing all that away it didn't seem like such a good idea we wanted to write actual CSS so we started from scratch right from some first principles the thing that we've really started from our starting point we're components right now if you think about a typical component let's talk about a button right is everyone most everybody has a button component it's a very obvious thing to have your button by default might look something like this right if a button component which has a class name of BTN again this is using react syntax because I like react you might have a bigger button right and normally you would do something like this you would add a second class name that says BTN - - primary right this is the BEM syntax which I'm sure many of you have seen before and if you want to make it disabled because you shouldn't be able to click the button you set a specific class name PT and - - disabled and you also set the type to disabled now this is very very typical right there's nothing fancy going on here it's your standard button but if you look at this more closely all of these attributes are really implementation details to the consumer of a component it's important to differentiate between the person who writes a component and the person who uses a component the power of components is that a user of a component doesn't have to worry about what exactly a component does right usually in the react world what you would see is something like this you would just have a button component you would have a button primary component you would have a button disabled component right and as when I when I get a design from a designer or I to make a design myself and I want to render a button or I want to render a primary button I just import that component and use it I don't have to worry about exactly what it means that a button is primary or what exactly it means that a button is disabled I don't have to worry about any of that you know only the person who works on the component and fixes a bug maybe or is the first to implement it has to worry about it and so oftentimes you might be the person implementing a component and the person using a component and that's perfectly fine but what that allows you to do is understand the whole system much more easily because if you don't have to worry about what exactly a button does or what exactly an accordion does or what exactly the heading does then you can focus on your own logic without having to worry about every single small implementation detail right you just get a design that has a button and then you render a button you get a design it has a primary button and you render a primary button you don't have to worry about what specifically means that the button its primary now over time as we as the web has worked more and more with components and especially in the react world there's been this uprising of what I like to call style components right so think about something you have in almost every application a grid right previously you would do something like div class name equals row and div class name equals called five right there's a you've probably seen those and million times they're everywhere right it's the bootstrap grid everybody's used that at some point but with react what we can do is encapsulate these into components again right we don't have to worry about which specific class name class names to apply we can just do something like this right we can have a role component and a current component with a width problem now what that allows the creator of a component to do is to switch out the implementation at any point right let's say this component library was built in 2014 flexbox might not have had the browser support you wanted so you use floats for your grid a very standard thing to do you just use floats now it's three years late the Flex box is widely supported and your browser support has improved as well so you no longer need to use floats you can just use flexbox if you use if you tie yourself to a specific class name it might be very hard to switch from a float paste grid to a flexbox based grid but because it's encapsulated into these components you don't actually have to worry about it right the click creator of the component cannot just switch the implementation details specifically as long as it's a row stays a row and the column stays a column you don't have to worry about it at all right now that that probably goes a step further with CSS grid right now that CSS grid is gaining steam in the browser world it'll soon be it's now almost perfectly supported and this will be perfectly supported for almost any application except for legacy and the price applications maybe at that point the creator of such a component could just switch to CSS grid without any trouble right even though CSS speed works entirely differently and you might not even apply class names anymore you could still just switch over one day to the next and nothing would happen right the user of a component would be none the wiser so when Glenn and I sat down and thought about how we wanted our own CSS in Jeff's library to look like we wanted to move the styling to the component level by default and that was the first big breakthrough that we had that was the first big breakthrough or we went oh actually why don't we do that now the way we imagined it at the time it looked something like this right Const comp equals Ln div and then some way of specifying CSS or stance right and this comp variable then would be a react component in this case which you could render anywhere in your application what we've done here is tie the styles to a specific component every piece of styling is tied to a component and can't be reused if you want to reuse a piece of styling we've reused the component right the second big breakthrough we had was how to specify that styling we have what we wanted to do when what we set out to do was to let you write actual CSS in JavaScript now the way we imagine this look like at the time this was by the way after the whiskey lit so we drank a lot of whiskey I had some crazy ideas and then the next day we met it at a coffee shop and started tacking next to each other and figuring out what we wanted to do and so this is what we imagined the first first version to look like whether you say comes complete with a limited and then a string of CSS and our library would take that string of CSS at runtime and inject it as a style tag in the head of the Dom which meant you could use any CSS in there you want now as of es6 javascript has this very interesting feature in the language that's called tagged template literals now I want you to watch this slide very closely because I'm gonna press a button and almost nothing is going to change but makes a huge difference right three-two-one not that big of a difference right but it actually makes huge difference in what you can do because previously this was a temperature right also introduced in years 22 2015 10 pitchers allow you to have interpolations the problem with tempered literals is that they stringify all implementing they're all interpolations but tagged temperature trolls don't we have attacked tempered Litro any interpolation will be passed to that function so what this essentially does is you could replace those back ticks with parentheses with parentheses with the string and it would almost do the same thing almost the thing that tag template literals allowed us to do was using functions for conditional styling so what we could now do is something like this we say Const comp equals LM div then a tagged tepid little and then you say can say color and then you have this function that you're an error function this guy is also an e6 feature where you say props and then if props the primary is set to something truthy the color will be blue otherwise the color will be red this wouldn't work with any other string because any other string would take that interpolated function and stringify dit so you'd literally have that function as a string in your CSS which is not what you want we want to evaluate the function and run it and figure out which which case you want to run at which case you want to have now this all resulted in a library that's called styled components that name came a lot later but this is what it's called nowadays as I said the first big breakthrough that I want to really hammer in your head is that we removed the mapping between styles and components every fragment of CSS every piece of styling in your application is now tied to a component by default now style compose looks something like this right and you import style from start components and then you say constant itíll equals style dot h1 now this syntax also carry a little bit later don't worry about it too much this style h1 thing is a function that's called as a tag temperature and what you pass that type of literal is a piece of CSS right so now our title variable here is a react component that will render an h1 Dom node that will have a font size of 1.5 mm will be aligned to the center and will have a color of pale violet red it's kind of obvious right style told h1 with some styling you just get a style heading 1 not that big of a deal maybe the second component the same principle applies cons wrapper equals style to thought section which you call as a tag temperature and then again we pass in some stars or wrapper in this case will render a section that has a padding of 4 a.m. it will be fully fully sized to have 100% width and height and have a background of papaya whip now these color names by the way they're amazing CSS is some of the best color names ever now these are your normal react components right so title and wrapper can just be used like any other reaction in your application right you just say rapper and title and we put some text in there hello world this is my first style component if we look at this in a browser what you will see is that we have a section with a papaya web background and an h1 with a pale violet red color that's centered in the middle of the page it's kind of obvious right I mean obviously that's what would happen because that's what we said will happen now as you can see again you can write actual CSS but when I say actual CSS I mean actual actual actual CSS previously a lot of the sort of first CSS and J's libraries would use inline Styles right they would inject a style attribute which meant you couldn't use media queries you couldn't use pseudo selectors you couldn't use pseudo elements inline Styles have a lot of limitations style components let you write actual actual actual CSS because we take that CSS and we inject it as a style tag in the head of the Dom which means you can use media queries nesting selectors to do means anything CSS can do styled components can do as well so for example here we have an exact color change a component which will render a section HTML tag which has a background of papaya whip and any age to within that section will have a color of pale violet red and then also at a min width of 875 pixels with its standard media query we want to change the background to medium C green and the heading to papaya with if you look at this in a browser it looks like this by default but then when you make it bigger what happens is it changes its color yeah thank you it's CSS media first I'm just kidding I mean that's just CSS media craze right you've used them a million times there's nothing fancy going on it's literally just CSS we're not doing anything fancy at the hood it's literally just CSS we equate nothing more nothing less let's talk about adapting based on props if you think back to the first thing I talked about the button component we had these two states in our button component a normal button and a primary button and we switched between those with this primary property that we said whenever we want to have a primary button whatever that means right a bigger button bolder button whatever so now when we built this component with styled components this is what it could look like and specifically I want you to focus on these interpolations right because we adapt the colors of the button based on the primary prop being set or an set so in this case the background of our button will be pale violet red if its primary and white if it's not primary and the color will be white if its primary papel violet red if it's not primary so exactly inverted right make sense primary button is more four has more color again these can be used like any react components they're not special they're just your standard react components you say button or button primary and then when you look at this in your browser you have a normal button and the primary button duh what else would there be right it's just a normal part not a primary button but what that also allows us to do is dynamic theming and this is where things get really powerful right back when it builds style components CSS attributes custom attributes were just coming out and they're still on the cusp of becoming very very popular because the browser support isn't quite excellent it but we wanted to have CSS custom attributes really badly even on IE 9 or whatever because we wanted our component library to be female all right we wanted people to quickly to change the entire color gene scheme in one go so what we built is a theme capability but you can import this theme provider from styled components and then you can specify a theme that theme can be anything you want we don't care write whatever you want to put in your theme you put in your theme and then you can wrap your app in a theme provider with that theme and you can not only wrap your entire app into that same provider you can even wrap parts into that theme provider right from our components you can then go the background should be whatever set as prop store theme the primary right so our button will now have a background or whatever the primary theme is in this case if you go back to the previous slide you see the primary color is pale violet right so now our button will have a pale violet red background right nothing fancy going on there obviously that happens it gets much more interesting when you have different themes and when you switch the mother plant because what what you can now do is have two separate things right one red theme which is pale violet red and a blue theme which is green well that's a mistakes in my slides that should be a green thing anyways I'm one Bluth and blue theme which for some reason makes everything green whatever and then you have two theme providers right one that passes the red theme and one that passes the blue theme and what I want you to note about about these button components is that we don't change the button components at all we don't have to tell our buttons where they should be red or green right it's all done implicitly through the tree of HTML so our buttons don't change but depending on in which area of the app they're rendered in they'll either have a red background or a green background so these two buttons is now being rendered with these two separate themes will one will have a red background and one will have a green background right and again let me say this we didn't change anything but the way the button is rendered right in fact that button could be miles and miles and miles from your theme provider right there could be as many HTML elements and components and whatever in between that button would still get the wrapped theme which means adding a night mode to your application is very simple you just switch out the fee right if you just want to have a black a black interface it's really easy to do so to summarize I drank a lot of whiskey and had a crazy idea and out of that came styled components which is now one of the most widely used CSS in JavaScript libraries that's all I've got for you today please come find me after the talk because I've got a bunch of stickers so if you want to have a style component sticker just come find me I'll give you one and thank you for having me excellent said Craig sake sorry what Craig schlocky sorry yeah yeah I work with him in Yahoo years and years ago oh that seems to be the one guy in Australia that does web stuff that everybody knows yeah he gets people drunk and then random stuff like that happens to these amazing shark is great if you're ever in Sydney go meet Sharkey and drink some with whisky with him it's lovely yeah it always wears shorts no matter where he is if there's snow outside it's weird such an Australian thing yeah okay we got questions what approach do you suggest to get best performances with styled components are there anti patterns to avoid yes one big anti pad and anti pattern that I see all the time is people creating components in the render method because they don't realize that what that does is recreate the component every single time your application renders people just put it in there and it will work in some cases but it'll be very slow and then it'll break as soon as you want to switch anything around that's the biggest anti pattern I've seen of people using styled components or using green buttons and a blue component yeah or using a blue theme that's green that's also another very good idea excellent if the CSS is generated client side after Jas parsing what are the performance implications compared to a standard style sheet I like that question yeah that's a great question um the thing is that the browser has this very nice API insert rule which is by the CSS object model which is something that most people don't know what that allows us to do is inject up to about a hundred and ten thousand rules of CSS in about a frame so 16 milliseconds which your normal application will never have 100 or should should never should never have a hundred thousand lines of CSS right and also because so that first breakthrough we had right time each piece of styling to component allows us to keep track of which components you've actually used meaning when you service at render a styled components application we know exactly which components used and where and we only ever sent down that piece of CSS so out of the box you get critical CSS without having to do anything right it just works out of the box which means if you do server-side rendering it'll likely be faster than sending down a two megabyte stylesheet that you would normally for your entire application hmm you still have the flakiness of JavaScript of course yeah if you mess up your JavaScript your users won't see anything if you don't serve a side render but that'll be true either way right even without start compliance doesn't matter if you don't server-side render you won't see anything if your JavaScript if you service at render style components will let's put the style tags in HTML statically so your users will be perfectly fine even without JavaScript and of course there's two rays condition of like a style being a blocker in the rendering up front whereas a javascript injected style can be done after the first render yeah what a style components on react native not support media queries right now getting responsive design working is quite hard so as I said start components let you use actual CSS on react native that doesn't exist there is no actual CSS from react native right they have their own layout engine that looks like CSS meaning we're bound to what react native can do right we can't have media queries because react native does that media queries that doesn't exist there are libraries that give you media queries in react native but you have to use them yourself we can't do anything there right the underlying layout engine has no idea what media queries are so we can't support them because there's no on-the-fly re-rendering that the browser gives us there is but react native doesn't vendor to browser is it's it's since it all compiles down to native code they have their own layout engine code yoga and yoga just doesn't have mediate that doesn't exist right because it's optimized for mobile devices they just never implemented them because who these media queries when you only write when you know your screens only ever gonna be this big now that essentially isn't entirely true right because people could be using tablets but that's the trade-off they went with right I don't know why that is I'm not I don't work on react native but they just don't let me be crazy and with grid support and flexbox support a lot of the media queries that be used for layout is probably not a good idea nowadays anyways very especially with grid any idea how to avoid the problem of external CSS interfering with styled components do never use important I'm not every is important but style components has a very nice way of increasing the specificity specificity is a wonderful word isn't it I know I hate it there's a we have a we have an entry in our frequently asked questions on the website go check that out because I you'd have to look at the code you just add ampersands but go look at the website this is too involved for a Q&A okay what's the best way to test out components how to avoid test failures when you CSS changes but the visual appearance doesn't I would never test CSS not in the way that you expect it to be I think with the way so most are caveat this with my experience as the companies I've worked at in the project I've worked at they'll never be a case where the user interface doesn't change every single day right my whole job is changing the user interface every single day so tests that verify that something looks correct are by definition very brittle because the what is correct changes every single day right what you should check is that your CSS renders cross-platform correct right it should still look good on edge on Firefox on Chrome and maybe he's more Internet Explorer if you have to support right that should be tested but there's tools out there that have nothing to do with style components right browser labs and source labs and small slabs browser stack 3d for example as well I know we supported them and that's great yeah so anyway do that but that has nothing to do with start component specifically what's the main difference to CSS modules CSS modules is not CSS in JavaScript CSS modules lets you write CSS in CSS files and then you import that CSS file and you get this through some build time magic you get this JSON object which has all the class names the big problem with CSS magis is as I said that it requires a specific build tool web pack with a very specific configuration you can't just use that it's not something that the web has right since as much as it isn't something that's just there you have to use web pack and you have to use the CSS loader into style loader and then they also until very recently didn't do critical CSS code splitting so we'd always have one large CSS file for our purpose for a shared component library didn't as I said didn't make sense right because we wanted everybody to be able to use it and everybody has JavaScript already but not everybody is using webpack so do style components to critical rendering up front or do you just get a massive generated fun no no you get the critical CSS because we can't keep track of which components you've rendered we only ever include their CSS right so we only ever include the critical CSS by default whenever sensi says you don't use if you do deduping as well like if people repeat the same settings in different components not yet there we had some efforts on the way to switch to atomic CSS right because c style components is an abstraction on top of CSS right so what we can do is change the underlying implementation to have better performance characteristics without you work so theoretically we could generate atomic CSS where each rules its own class name and then maybe the total size of your CSS might be smaller because you're repeating the same rule everywhere there is CSS and J's libraries that do this we don't yet we just haven't are there any are there any best practices in naming cuz in CSS we always had the problem that people said like fat blue headline and then later on it had to turn to green thin headline and it didn't make any sense anymore yeah so are there any best practices that you tell people to use with style components or is it just up to the implementer um not necessarily it's also a bit less of a problem right because CSS has this global name scape where every class name is just has to be unique right for style components because it's in JavaScript the variables can have the same name but as long as they're in separate files it doesn't really matter right so you can give your you can always give your component semantic names without having to worry about being unique in a set of thousands of class names if that makes it it still has a benefit of course for maintainability for people who look at the code five weeks later and understand what something means yeah of course I think that's just a skill that developers has to have to be honest and I think there's much we can do from the start components I'd to encourage that I think by allowing by not being global we already allow you to give everything a semantic name but it's up to you to give that semantic name because we can't know what you're doing right like I don't know what that code means if you do so give you the proper name its style components react strict node ready not yet but we have an open PR that's almost done so it'll be a week maybe or two I assume it's the same provider cruising context API yes although I again still the old one we're working on updating into the new react context API which is why it works throughout your entire componentry hmm I'm gonna skip the typescript or es6 because it's kind of like metaphor this and yeah it's different story what about accessibility when using style components are not standard html5 text we can be interpreted by screen readers for example that question doesn't entirely make sense it kind of makes sense but it's more react question than a start yeah because you don't know what under the hood gets run that kind of thing yeah but you still specify the specific html5 type that's right right so yes place if I any html5 tag it's up to you to choose the right one well one thing that would be nice to include would be for example a color contrast checker to make sure that they see the content foreground and background colors are according developer tools in Chrome have that now built-in you can get them right way there'll be a fun thing to do yeah I guess what about the Cascade can you use adjacent selectors or other cool CSS tricks you can use any CSS trick you've ever seen again it's I want to stress this point but it's just CSS like you're used to what every CSS can do style components can do there's nothing fancy about it right it's we just take that CSS put it into a style tag into the Dom and that's it right so anything you can do with CSS you can do with style components it was nothing new I remember in Yui we used to create style tags all the time if you want to have like a slider that resizes all the images we wrote just rewrote the style tag all the time right that's kind of what that does it automatically under the hood then we're doing the same things over and over again my team is hesitant to use styled components because the class names are not immediately understood which I pointed out earlier how can we convince them use the babel plugin we have a plug-in for babel which will make all of your class names very nice this is a language problem javascript a function in JavaScript doesn't know what its name is unless we specified as it with the function keyword which means if you say con strapper equals style taught if we can't know that you wrote constant wrapper right so we treat some build time magic with the babel plugin to tell styled components that the name of this specific component is wrapper and then we put that into the class name so if you use that babel plugin you get all of your component names directly in the class names like you used to nice why should anyone use react over angular when angular has such a good software design and paradigm they react complex a bit complexity which has really nothing to do with start from Solon zag anybody I don't know I know why not voce us I like vgs too I actually like you just a bit more than angular so next year you're gonna talk about VHS maybe maybe Y was less used to styling part of element UI and not sass pros and cons um they're the same we used less because that's what we use for most of our projects and what we were used to and where we already had all of our options configured correctly and stuff less most JavaScript and sass is Ruby maybe yeah potentially at the time but now sass is JavaScript too so yeah okay doesn't really matter anymore with notes ass um there's they're they're pretty much the same the syntax might be a bit different in some places but they do the same thing it's one less problem to worry about yeah how do you avoid too much code in a single file when using styled components just like you avoid too much code in any other file by splitting it into multiple files it's JavaScript like there isn't you know you can put every component into its own file there's nothing special about that you know but where do you cut it at the component level so for example our button component will be its own file button dot J's or wrapper component would be its own file wrapper to chase our hating component would be its own heading J's right so you never end up with you won't you always end up with one component in one file at least that's why I do it I've seen some people also put a lot of components into one file but that just becomes very unreadable very quickly yeah it's it's like any JavaScript large architecture if you put too many things in one file and you know name it properly you don't know what it is like it's something dot J's not a good idea support to pass objects as props yes you can pass whatever you want into the properties it's a JavaScript path so you can pass whatever you want and do whatever you want with it we don't care whether those objects strings boolean's numbers whatever casting is a wonderful thing isn't it what about bundled sighs yeah what about it yeah how can you keep your bundle size smallest probably question II wanted to say um style components is currently I think twelve kilobytes of JavaScript which is fairly large but the benefit of the critical CSS extraction when your server-side render probably mitigates that at least partially and we're also working on the next version the next major version of style components will be probably a good third smaller and we're constantly working on getting that size down even more we're very focused on that actually it's one of our then I guess with es6 support getting better you have top opportunities to actually make it smaller than before as well also with with set for example more memory efficient before for sure CSS NGS is a very heated and divisive topic is laid on Twitter no a discussion on Twitter do you see any way out on that no I think it'll always be I think so having thought about this for a long time now I think CSS nsj is a a nice workaround to underlying problems with the wave not problems but things that don't yet exist in the dawn right we want to build component based systems and the Dom was made for documents so we're trying to patch up that difference and make the Dom work for component based systems but I think with web components and channel DOM and all of those civilizations processes eventually in I don't know how many years start components and other CSS and J's lab which will hopefully be obsolete because the browser gives you the same benefits out-of-the-box if that make sense and a good thing is that browsers can learn from systems like styled components to understand what people are likely to use it's not necessarily the best analytical approach or the best academic approach to programming in it but it makes people happy the same way we learned from jQuery what to put in the next version of es6 when it came and that came around yeah of course just adding many style text to the Dom significantly affect performance not more than adding many successful and there's no difference from the browser side to that maybe maybe actually it'll be a bit faster because you're on the data in one file rather than many fast over the HTTP too again a bit debatable with it to be push it doesn't really make a difference it doesn't make the browser engine doesn't differentiate whether the CSS is in the style tag or from the separate file when there's a serialization option as well to have like one style tag India yeah of course and of course you could only have one style yeah of course yeah how would you convert an existing SAS BAM architecture into a style component that question probably applies to any converting anything to anything else just do it one piece at a time right don't try and rewrite everything because that's never gonna work just start using it gradually and gradually and then as you touch old pieces of code work them over into the new system but don't try and move everything over at the same time right just gradually over time as you touch pieces of code move them over in fact that's what Twitter did with Twitter light and they were using CSS modules until now switching to a CSS and J's library called react native web and they still have about 20% of the code base in CSS modules but they are gradually moving over the code as they touch it you know it's something like style components available in the angular world sorry is something like style components about the angular world I don't know I'm not very active in the angular world I think they have some built-in kind of CSS and J's features with their scope styling thing but I'm not I'm gonna angular exploit certain different architecture so it's kind of it's kind of connected with the react architecture as well isn't it not a hundred percent sure I'm not the expert there can I use media queries yes good that one is easy could we just make a custom element called scoped style who inherit from style but prefix every selector with the ID of its parents oh dear Lord yeah could we we could we could do that yeah I haven't thought about that at all you should open an issue on the repo and we can discuss about it I don't know what the downside or upsides that would be right now depends on the ID I mean yeah it's weird okay I don't know how well custom elements what's the custom elements browser support it's it's there but the sub classing is a bit problem in current performance that's why a lot of pre-processing made more sense I see how would you do a CSS component isolation for example CSS resets to prevent unintentional cascading just like you normally would with normalized CSS we don't force you to only use style components right so if you want to use normalize CSS to reset your CSS just do that right we don't we don't prescribe that you only have to use it in fact we have a an escape hatch to inject global CSS as well so you can just use that to inject your favorite CSS reset we don't we don't have anything to do with that last one could it be possible to deterministically extract and optimize to CSS in the future eg chopping it up to minimal set of useful composable classes Wow maybe but it'd be very hard because javascript is a very lenient language you can do lots of things in JavaScript that are ever so slightly weird and that makes it harder to statically analyze it and its first I think something that's very interesting here is type systems like type scripting flow type who do a great deal of that already right and I think as they mature I'm hoping that these type systems will allow us to hook into their underlying representation of the codebase and maybe use that to extract or optimize the CSS at build time but at the moment that's not there no such no tooling exists that has such a fine-grained view of an entire JavaScript code base right it just doesn't exist at the moment yeah when you have a type system it's much easier to do that con yeah excellent thanks very much thank you for having us helpful you

Channel: WeAreDevelopers

Views: 11,704

Rating: 4.9415207 out of 5

Keywords: frontend, React.js, CSS, component-based, system, Modules, paradigm, interface, component, WeAreDevelopers, WeAreDevs, people, code, future, tech, IT, technology, coding, developing, developer, programming, programmer, Europe, conference, congress

Id: BkgU_-KGK9w

Length: 44min 2sec (2642 seconds)

Published: Wed Jul 04 2018