The case for CSS modules - Mark Dalgleish

all right let me grab this move around sorry about the noise so as you heard my name is Mark Douglas and yes I'm from Melbourne Australia so if I pass out on the stage I apologize in advance I had a very long trip to get here and so I'm here today to talk to you about the case for CSS modules or I guess more importantly where it came from and what it means for the world of CSS and front-end programming and and more importantly for for such a smart crowd as this you know where can we together take it in the future so to really put it in its proper context I really want to take a step back to the beginning for me the beginning of my career for me it started with this book now this is from what I understand not a classic book it was just a random book I picked up off a shelf in 99 at the time I wasn't into programming really at all I dabbled but for me I was really interested in the web and the the obvious place to start for me was HTML there was a chapter in there chapter 13 it was very small that introduced CSS I won't read this out but the summary really is that they were saying that CSS wasn't quite ready for primetime but it was really going to change things so you know CSS has come a long way since then for me I really fell in love with CSS around the time I saw this project called CSS Zen garden which is around to this day and it really proved out the the the real idea behind CSS which was separating your presentation from your semantic markup because given a document with semantic tags in it you were free to kind of change up the way it looked purely by changing the CSS in in a world of you know table based layouts this was a real game changer and it really changed the way we think about structuring our our websites but that that design pattern really highlights a big difference between two different ways of working which is documents and web apps I'm sure most of us in this room are now working in the web app space when you work with documents the model pioneered by things like CSS is in garden and maybe don't make as much sense documents have a very different way of thinking when you want to style the way a document looks think globally makes sense you want to be able to change every header on the page every paragraph every bullet list and so on but when it comes to building single page apps with CSS you you've got this big contrast between the global scope the the true nature of CSS and what it was designed to solve versus the maintenance of a big complex application I'm sure we've all been there over the years we've seen a lot of different approaches come out of the CSS community to try and solve this the one that really kicked it off was oo CSS but we've we've also seen smacks been suit and now of course in the react community more controversially inline styles the big one I think that has the most usage in production is been block element modifier and it's ultimately just a naming convention it's it's just putting restrictions on yourself so that when you style the page you're trying to scope your your selectors down to a single class with a strict naming convention that tells you you're targeting a specific block or section of the page elements within it and then modifies for the different states that they're in and when you use that in in a bunch of HTML like this and things got quite noisy and I know for a lot of people this is where it ended they couldn't get past the aesthetic aesthetics of it but this came with a lot of benefits because it really brought some missing structure to our CSS and code bases weren't just degrading over time but they actually became maintainable actually able to be refactored which I'm sure many of us have experienced the older style of CSS was basically impossible to refactor it without breaking something and we're now well and truly within the age of components we've got web components come into browsers now polymer is poly filling that and angular has it's directives but given this crowd I think it doesn't really take much explanation to say that react is really making a big impact in this space right now reactors all about components all the way down your entire app as a component and we don't have special types of components like controllers and and so on they're all just components to us but interestingly enough you know components are nothing new they weren't invented and react they certainly weren't invented on the web but from the earliest days of the web we a bunch of built-in components of course we've got things like select boxes which give you a lot of rich interactivity with a simple tag you just drop it in the page and there's a lot of a lot of behavior you get for free the html5 date picker is another example which varies depending on the platform you're on you get a lot of stuff for free with these tags and a very very simple usage of them just dropping a tag in but for the purposes of this talk I really want to highlight the fact that with when you use these things CSS and images are private to the component they're completely abstract away from you and the implementation details are just not important to you you just describe that you want a date picker you want a select box that of course was not true if you use third-party components I'm gonna take the canonical example of the jQuery UI date picker you know you just want a simple date picker and you've got over a dozen files lots of images CSS JavaScript and you've got to navigate this maze of files and figure out how to integrate it into your page I mean it wasn't too difficult but you were really confronted with with all of this implementation detail and our tools reflected this mindset you know over the years we really held on to this notion of treating our asset types differently in their own little silos gulp is a really popular front-end build tool but really it encourages this mindset by forcing you to think about your asset types as a series of disparate streams it's very common for you to have a JavaScript build task that might run it through browserify and uglify and so on you have your CSS task that's only thinking about you CSS your images and so on and when you look at a tool like sass for example and this again is is something that's purely focused on only one asset type it's thinking about your CSS and you know big complex applications have trees of CSS that depend on other smaller CSS files and so what that ends up creating in your project is something like this in index S CSS which is just a wall of imports pulling in all the smaller files and then you have a big tree of CSS but no other asset types so then what is what is talling like it look like in the component age in the react community the de facto standard at the moment for built all seems to be webpack and that that first time you really get your head around webpack it completely changes the way you think about structuring your applications because what webpack does it makes you think about that single dependency tree starting right at the root of your index.js file and traversing all the way through your different asset types so with with reacted it it's very common when it's used with webpack to make the first line of a component the require call to bring in the required CSS file to make the component that we're exporting actually work so you will see here we've got class names starting with my component in order to make that work we need to pull in its related CSS file for the first time the relationship between this component and the CSS it's needed that's needed to render it correctly is is right there in the code rather than in your head that makes that that does wonders for maintainability and really helps the code base scale really really well well at the same time you maintain that simple interface that we experience with the built-in components where if you want to use this component you just import it you know in JavaScript with the react flavor that we have here and you can just export it render it out and you don't have to worry about the internals and the fact that it might use a bunch of CSS files or one or none or lots of images or fonts we don't really have to care when we actually want to import it and render it now I work at a company in in Australia called seek which which the number one job site they're they're a household name and I nearly fell off the stage okay there's a big big piece missing here okay I'll be careful and now we we were very interested in react not because we could jump on a bandwagon because it was actually solving some real problems for us we wanted to have rich progressive single page apps we wanted to have all the benefits of a single page app where it felt fluid like a native application but it had that solid foundation of a server rendered app where it's completely crawlable you could you could view source and see all the content you could see on the screen was right there it meant performance was much better because the first thing you see is not a loading indicator it's the actual jobs you were searching for its overall something that really opened up some amazing new doors for us and so we we started working on this at a at a work hackathon and for us there were some really important requirements to make that work we needed server rendered CSS which meant our CSS couldn't depend on on on any anything running in the browser like JavaScript affecting styles for that we needed hover focus and active so that the page actually came to life immediately it there wasn't a delay before it became interactive media queries of course are really important for this because if you you render the page on your phone it needs to look correct right off the bat we want to have CSS animation there so that when things were loading we could have nice fluid loading indicators and more interestingly perhaps controversially we wanted to at least have the option to have pseudo classes for non j/s interactions now I'm sure quite a few of you are wondering what exactly I mean by that and so I prepared a little demonstration here I have this little cartoon rocket sitting on the moon I'm just going to click it and you'll see it launches and we've got a few things moving at different speeds now that's not terribly exciting except for the fact that that required no JavaScript that was just a big checkbox hack and if you're unfamiliar with checkbox hacks let me just click the check box again and reverse it so that rocket was actually a label for a check box and if you know anything about HTML you know that clicking a label also changes the value of the check box and so when you play with this technique what you can do is you know more practically you can make it so that your menu on mobile is hidden off-screen and when you click the little hamburger menu icon what you're actually doing is clicking on a label for a checkbox that changes that makes that second rule apply which is getting rid of the transform you can transition from one state to another now this is really important for those primary interactions something like a menu where you don't want it you don't want to block users from opening the menu until four hundred kilobytes of JavaScript downloads and it makes a lot more sense to just make it a standard part of the styling and that's something that we definitely wanted to leverage for the primary interactions in our app so interesting enough for us this was in late 2014 and something else really important happened at this time there was a presentation from Christopher Christopher shadow from Facebook and he said that CSS has fundamental flaws at scale that can be solved by writing styles in JavaScript this is the the most memorable slide from that talk which which ran through the problems with CSS at scale and this this one slide caused a Cambrian explosion much like we saw with flux implementations lots of people trying to solve the problem of CSS at scale and by addressing these points in particular and I'm certainly one of those people that that really had to reevaluate what we were doing with CSS and this I was really excited about the future that this opened up McKellar Bertolli hope I said that right who I believe is watching on the stream now he created a really great project called CSS in jeaious that runs through all of the different projects that people have submitted to him that are attacking these exact problems and you can go have a look now that there's this is just the top of a very long table all the different projects their versions the different features that they have it's worth noting that that more X's doesn't mean it's better it's just there's trade-offs here now for me the the library that really inspired me early on was react style by andre pop who i believe is in this room can you raise your hand yeah yeah I thank you I didn't know he was gonna be here so that's really cool so react style was the first CSS and J's library that I kind of had a close look at and I run Mel bas in Melbourne and I actually got one of one of our regulars to give a talk on react style and when this was brand new and and there was a lot of buzz in the effort for this approach and so basically the idea I mean it's a it's kind of old news now but the idea is that you would build up your stylesheet in JavaScript and then you could just attach it in to the elements in in a very familiar fashion but for me what what really sold me on it is that you could do server rented CSS because it came with a web pack plug-in to extract those styles and generate CSS files that was really exciting to me because it meant it was going some way to addressing these problems that I'd raised with you know for us we're really important in our project but there was again some trade-offs with this approach it didn't have media query support it does now but at the time it didn't didn't have any CSS animations which was going to cause trouble for us but most importantly as you saw with my crazy rocket example we needed to do classes and unfortunately react style made a choice of not supporting these and this was actually a common thread if you really want to go all in on inline styles it makes sense to not support pseudo classes so there was there's a bit of a challenge for us in adopting these approaches and yet you know when we looked at these things and we really thought about what they were solving what they were doing for us particularly the long term maintainability of a project and we couldn't help but want it like it didn't solve all of our problems but there was just something to it right like it made a lot of sense so for us we found ourselves kind of caught between these two worlds and we were asking ourselves how do we embrace the inline style mindset even though we're stuck in this battled world of regular CSS we don't have CSS when you clarify so for us the answer lay in something I've already touched on which has been block element modifier so the idea for us was was really to recognize that that the abstraction in Bend the block is really the same as a component it's really the same thing and that means these two approaches really go well together nicely so for us we followed a very strict rule which was that we would never use a block outside a component of the same name so what that meant is you for any given CSS file in the our application you would see right next to it is the JavaScript for it with the same file name and that formed a component boundary so that was our react component held together with webpack and I'm sure it goes without saying that this of course scales nicely into a tree structure that forms the basis of your whole application but it's it's it's fractal all you've got CSS files for each component all the way through your application and if you drill down to the file system again you can see that you've got this repetition in name you've got the same you got the component directory and inside you've got its JavaScript and it's matching CSS file any images it needs a scope there and you look into that CSS file and all you'll see a rules of the same name everything's prefixed with that exact same component name and this makes maintainability much much better but for us one thing that's really interesting about this approach is we found that it plays really nicely with the CSS ecosystem with a lot of these CSS and JavaScript approaches they were having to kind of reinvent the wheel in a lot of ways but for us because we were using webpack and we were using loaders we could just chain them together here you can see you know CSS loader is right in the middle of less loader and autoprefixer loader so we could use pre processors we could auto prefix our classes for cross browser compatibility we could plug it in to talk like linting tools and whatever else you want to use for us that was a real productivity boost and it meant that we could bet more safely on this approach in the long term whereas whereas CSS and JavaScript was still very much unknown territory this made it very easy for us to get people on board internally because you look at this and it just felt like regular old CSS and you were getting the this crazy boost in maintainability but it didn't feel like something really really different and I wrote about our approach in a blog post called block element modifying your JavaScript components I was really excited about this approach and I really wanted to share it with the world and I thought this is where we were gonna stay for quite a while but something interesting happened on the side a new feature landed in web pack CSS loader called local scope and basically what local scope did was change everything so if you look at the top of that file we had earlier where you would require a CSS file that's very uncommon in node land right to just require something as a pure side-effect instead with with local scope you could actually import styles CSS file now the first reaction you might have looking at that second line is what is that Styles thing of Le way to you know if I'm importing something from a CSS file like what is it is it the contents of the file it's a bit strange so to to make sense of that line we're first going to look at the CSS so this new syntax was introduced you you wrap this colon local around a selector so here we've got a header and a footer class and that had some interesting effects on on the CSS so what that meant is that when you imported that Styles object from the CSS file you now had an object with references to the header and the footer so you can see now in our div we're attaching classes for Styles header and styles dot footer it's very it's much more explicit now the relationship between the classes that we're getting from that file and how they how they relate to the Dom in our react component to make a bit more sense out of this if you look at what came out the other end when you compile the CSS what started as these locally scoped you know human readable classes turned into globally unique hashes the big thing to realize with this now is that we have no more naming collisions you're free to call things whatever you want you can have twelve header classes in your app and as long as they're in different files you're okay just like when we work in JavaScript and you don't have to worry about clashing variable names in your modules it was much much easier for us to manage and that stars object all it did was map that human readable name that you provided to the globally unique hash so when you say that this div has a class of Styles dot header what you're actually saying is its class is that thing there which I'm not going to attempt to read out now if for some reason you know particularly in development you want to have nice and names for these classes it was completely configurable so you could tell CSS loader that you want the local identify name to be the name of the file two underscores and then the name of the local so effectively what you're doing here is you're getting that that Ben notation for free out of your build system and was it was much much easier to maintain much easier to look at as well now it's seek we were already sort of working with this Ben style locally scoping everything to the component as I talked about before so as soon as we saw this feature we couldn't help but go all-in and it really didn't take long for us to port the entire code base over to using local scope it was a natural fit but what that resulted is in is something really interesting and we had basically any file any CSS file in the application that you looked at would just be a wall of local everything local local local all the way down eventually you'd come to the very odd exception like in the in the case of react when we were using CSS transition group what you would do with CSS transition group is styled the classes that introduced differently in those classes are globally scoped so we wouldn't localize those but that was really the exception now we looked at that and a natural question started to come out given you know the sheer number of these local selectors throughout our app we said what what if locally scoped CSS was the default you know you look at any other tool that we were working with you know JavaScript if you wanted something to be global you had to go out of your way to put it on window it was not something that happened by accident you you very much had to go out of your way to globalize something why is our CSS any different so what we did is we opened up a new tab in our editor and we experimented just with the API we said what if what if we could transform this automatically what if we could drop all of that local all that noise around all of the selectors and just write the classes you know if we needed to have a global class in in that odd exception we flipped the model around we said what if we had : global so in this case we're saying our locally scoped panel class nested inside it is a global class called transition active enter and this worked amazingly well for us because in our app we only had global styles in the normalized CSS and in these transition classes and that was it everything else was locally scoped and so with this simple change this would make things a lot better for our code base so luckily there's a really fantastic tool I'm sure a lot of you are familiar with it called post CSS and they call themselves a post processor but basically basically it's a preprocessor that you can write plug-ins for in JavaScript and so with with very little code and not a lot of time we created this simple plugin called post CSS local scope and its job was just to make that transformation that we talked about earlier which is turning dot class into : local class and of course it also had room for : global so it would if it saw a global notation around a class it would leave that untouched it wouldn't it would leave that as a global class this work that we put into this this this little project and all the thinking behind it I wrote up about it in another blog post called the end of global CSS now I was really surprised to see that this this blog post really took off and got a lot of people talking about it but for me most importantly it got the attention of Tobias copper's who created web pack he reached out to me on Twitter and said I hope it's ok if I integrate post CSS local scope into the CSS loader and of course what am I going to say to that it's a definite yes so shortly after that we got an experimental feature in CSS loader called module mode you just all you had to do was add question mark module to your CSS loader and you would get start to get this built in in my blog post another thing I sort of raised as an idea for the future I said that we could start generating shared classes between components automatically treating style reuse as an optimization at compile time and what I meant by that is if you look at that Styles object that you employed there's this one-to-one mapping if you say Stars dot foo is actually mapped to this global my component foo your component actually doesn't really care about the implementation of that class so you could just as easily swap this out for a many to one you've got this you've got this one style name that actually maps to three classes or it could be as many as you want and so that creates a lot of interesting room to kind of reflect your CSS without even touching your markup at all Tobias copper's is a machine he he takes these ideas these threads and just builds entire new features every night and so to my excitement we had this new feature composition that came out basically within a few days so what you would do is you would take this class and if you wanted to say it was actually made up of other classes you would just say that it composes the heading class from typography dot CSS it composes the box clasp from layout and then when you use this class in your app it's actually going to be made up of three classes the original class you defined and the two your composing so if you look at those files they're just regular CSS again with no special syntax you just write dot heading dot box the kind of classes that in a typical application are way too generic and would cause a lot of issues with CSS written with this special module syntax we completely sidestep those issues so again when you look at that Styles object it's really just three classes mapped to a single name that you insert into your into your document as we were working on on these features I reached back out to Tobias and get her and I said to him have you thought about writing a standard for CSS modules that others could implement what you're doing could totally fix the eCos CSS ecosystem if it's widely adopted and again not long after we had this conversation a new organization fired up on github a new repo where the big readme describing what CSS modules are in the hope that we can start to kind of get this beyond just being a feature hidden within web pack basically so I created the CSS modules logo first as a joke but it kind of stuck and it's no longer marked as experimental we also added an S to the end of the option once we formalized the name so now you have CSS loaders modules mode and you get this built in so a lot of you are going to be using CSS loader right now so you already if you're not already you already have CSS modules built in and you can just turn it on as easy as AK there's a bunch of us working on it and it's not just Tobias and it's not just me really what we're trying to do is is make this into a real thing that's not just built into web pack not just for react and this is just trying to fix the some of the fundamental problems we have with ss and we're still not entirely sure where we're going with this which is pretty exciting to me so yeah we've got it in webpack as I said but we've also got it working in browserify JSP M as well but there's a big world out there not just within the JavaScript community of course but people use CSS everywhere and so if you feel that your build tool is missing or your language or the environment that you work in I really would encourage you to look at how you could contribute to our efforts it would be really great to get CSS modules making CSS more maintainable for everybody not just the people in this room now Michael Jackson said this on Twitter very recently he said I'm really encouraged by the work on CSS modules there are only fixes part of the problem and you know I agree like CSS modules is by no means finished like I said we're not entirely sure where we're going with this which which I like but you know there's some there's some big things that are missing one thing that's actually about to land in CSS modules 1.0 is a feature we're calling values written by glen madden on the CSS modules team a friend of mine from melbourne as well and basically valleys let you define these these simple valleys that you can just plug into your CSS that's not new in the world of pre processes but but what's really great about them is that they work work really well with CSS modules in general so what you can do is for examples you can build a breakpoints or CSS file and you can define the values right there give them nice meaningful names you can import these into other CSS files or into your JavaScript so if you look at this component here what it's doing is it's importing a value from breakpoints or CSS and then it's plugging it into a media query so standardizing media queries across your files is now something that just is part of CSS if you're using CSS modules and the other big problem intimately that the harder problem one that's keeping me up at night it basically is theming there's there's two problems with theming the first one is around overriding styles but I actually think this is the problem that's kind of already got some good solutions out there some of you may already be familiar with a pretty small project of mine called fimA ball and the idea with with this project is to try and make it so that styles are just props to components if you if you import a third party component and you want to override its styles with your own in the olden days what you would do is just write a bunch of global CSS with bang important everywhere to try and override their stuff we're trying to make this a bit more of a first-class part of components so especially those of you who are component authors maybe pay close attention to this because I'd like to get some more support on this approach the idea is that with your component like I said you just pass in a theme as a prop and you can completely customize the way it looks so as a real-world example here we've created a theme for this component and we've just defined some classes that will be part of its public API and then the inside of your react component where you're rendering it you can import the theme from your CSS file so it's a CSS module and then here we've got kind of this first-class CSS module we're passing the object right down into the component and the component can use that instead of its default now component authors are going to look at this and say like yeah that's great but the world doesn't revolve around CSS modules there's a lot of different approaches out there and I completely agree the last thing I want to do is create some kind of like monoculture around CSS modules so what I did with with react fema ball was make it so that it kind of worked with as many different approaches as possible here you see using it with Radium we're creating a style sheet in Radium we're wrapping that component with radium's decorator and then we're passing in the theme and this this works great you've also got support for jss another great project in this space here we're building up a JSS style sheet attaching it to the dom and then we're handing it the sheets classes down into the component that works as well we've got inline Styles if you just write a standard object literal there's nothing fancy going on here but you can just pass that right in and it when it works fine what's really interesting is that after I came out with react theme of all this pattern actually landed in react not so much the working across the different styles of CSS that are out in the wild but that this idea of like a first-class CSS module it so it's it's already there in react Oh 14 so basically what happens now is when you use the transition group what where previously you would provide a transition name and it was just a string that would be prefixed to these global classes now what you can do is you can pass in an object that map's these inter interactive leave and so on you map them to global classes so a common use case would be something like this where you might have some BEM style classes in the global scope and you're saying to reiax transition group that you want to map to these global classes you've defined but that looks very familiar doesn't it I mean essentially that is what we get from a CSS module so that allows a really interesting pattern it means that you can define your transitions in a simple file like this and you can just call them don't enter don't Interactive and so on you don't have to come up with some new name for it in the global scope and then what you can do is you can import the styles from that transition file and you can pass it down as the transition name essentially this the same pattern that we've seen in really mobile but this is in reactor core the other problem with theming and it's the big problem with theming that's caused a lot of debate is how you override theme variables if you think about something like bootstrap where you know the way you work with it typically is you override the built-in variables in their preprocessor it's it's a very roundabout way to achieve what's very natural in JavaScript because essentially what we what you kind of want is function to have functions in your CSS you want you want to be able to import someone's theme which is a function pass it in some overrides and out the other end come some CSS now if you think earlier to you know our desire for CSS in JavaScript one of the big reasons we were attracted to it is because it just simplifies a lot of things javascript is just a better program programming language than any preprocessor it's much more widely supported it has a great package manager behind it in the form of NPM you know we really want to leverage this ecosystem so one thing I've been experimenting with wildly is is is something I really want to share with you today it's definitely not a complete idea and but that's sort of the idea I kind of want to get some feedback on it and get get some input before I continue I really wanted to add a disclaimer here the views expressed in this presentation I'm not necessarily the views of the CSS modules team this is the source of much debate so CSS modules in JavaScript that's kind of the idea that I'm playing with it seems to contradict the whole point of CSS modules but I don't know it's interesting to me because if you look at the way you use loaders in web pack you know you can just chain them together quite simply you might have a preprocessor before the CSS loader but if the preprocessor is transforming you know one file type into another what's to say that you can't have some other loader in there that takes in JavaScript and outputs CSS now the point I want to make today to try and inspire hopefully a few of you is that CSS modules I think make a great compilation target why is that if you if you compile something into a CSS module what you get is first-class web pack support you can just plug into all the other tools out there and which means you get local scoping for free your CSS in JavaScript solution doesn't have to worry about this problem at all it's a solved problem you can extract a CSS file with standard tooling again this is something that we're already doing in web pack we don't have to reinvent the wheel and more importantly I think for people working on these new projects especially those of us who don't have a whole lot of free time to do this stuff and really what you want to do is you want to focus on the API not the tooling so luckily for us Andrae pop again has inspired me with his open-source work he created a really great project called styling and it's probably the thing that really got me thinking about this this solution so the idea of styling is that rather than writing a CSS file you know we're typically if you wanted more functionality you might write a sass file instead of reaching for sass just reach for plain old JavaScript in this case we're importing this styling library we're importing a color library that we pulled off NPM we've got primary colors you know here we got values right we can just import values from other JavaScript files and then we export these named styles wrapping them with this styling function call and it's just JavaScript you can do anything javascript can do but I think more importantly you know the the social factor around javascript is really important all of the functionality on NPM is available to you and anything that you do to solve these CSS related problems you can just wrap it up in a function and publish it it's really great and configuring it is nice and easy in your web pack configuration when you wire up the loader for any file in this case that ends in dot style J s you're saying that it first needs to run through babel before going through styling and then after that it needs to go through CSS loader in style loader my I threw my hat in the ring to try and get my head around this problem I created a very small loader called JSS loader it's not production ready it's very much an experiment but I just wanted to test the waters in this space and this is kind of what it looks like so it's very much inspired by styling as well what you do is you can you know again you can import values from other files here we're importing a function breakpoints as a function it's like mixin so here we're using the object spread notation to say that this selector inside it also has a large screen break point worth a different padding value now in this case wiring up is even simpler and but that is a source of its limitation so I will warned about that the loader's here we've got star loader but that comes after CSS loader with modules mode but more importantly before that it runs through jss loader and it's as simple as that and the great thing that's using something like jss again it fits in with this idea of trying not to reinvent too many wheels and jss is a really great tool it's really good at what it does it's basically if you think of it as a preprocessor for CSS made with JavaScript there's already a plug-in ecosystem around it to do things like nested selectors and extends automatic pixel values camelcase sorting of props that sort of thing and if you want to make more plugins you just plug into jss rather than in some weird thing I invent it which is really cool the big concern for me and this is where a lot of the debate comes in is how does this affect the approachability of CSS modules the interesting thing about working in the open-source space is that our main concern is not just creating the best thing possible because if no one uses it it's not that interesting really for us it's really important that we that we raise the quality of CSS across the board try and get everybody thinking about writing CSS in this modular fashion thinking about component driven design and I think there's there's a real risk that the further you kind of go in the deep end with some of these approaches the more you're gonna just lose the wider web community so there's a real balancing act here for me you know and the rest of the CSS team you know what a CSS modules team what what what do you do at these decision points it's it's really not easy we want to make CSS as powerful as possible but we don't want to break the language or make it into something too esoteric and this is where your input is going to be really important if you want to talk to me about this during the conference or on Twitter afterwards I'd love to talk to you about it but more importantly I want you to experiment with us I think there's a lot of room to to try some new things in this space to try to improve CSS maybe to make CSS modules a common compilation target for CSS in jeaious it's definitely something that we don't know where we're going and people like you are going to help drive the future it's it's also we're stressing that that you know CSS modules my addition to to really kicking that off was relatively minor was a small amount of pretty crappy code I've since improved it but the point is that it started off with a very simple decision to improve the interface for developers focusing on that developer experience and the rest will come I want to end by saying that the community around react is really really impressive and when I say react of course I'm being I'm be a bit more inclusive it's not just react there's a lot of great libraries out there in languages Elm cycle jeaious some really great work happening and in the CSS community in particular there's just a lot of people trying different things it seems like when it comes to flux we've largely landed on redux by the sounds of it but CSS by no means sort of ended up in that space I think since this modules is the closest we've got to to a consensus I hear a lot of people using CSS modules but I don't think we're finished and it's really exciting that so many people care about this problem that's it for me thank you so much for having me it's really a pleasure being here thank you so much for seeing so much so we have time to go roughly through four or five six printed questions in a timely manner okay we're gonna go for it for lunch I'm gonna skip the troll question I mean what do i what do I say to that I thank you Andre yeah so you yeah Andre was a proponent of CSS modules for was is is his question is about the wall-e hit about the lack of constant sharing hopefully values in CSS modules addresses this problem using freestyle freestyle is great I had a look at it as a result of your tweet and I'm actually I think it's the first thing that I've seen that really makes me think about it as an alternative for me in my project to CSS modules it's killer feature is that it can render the CSS for just the things you see on screen whereas something like CSS modules you kind of have to just bring in a bundle of all styles in the app so I think we're still trying to address these problems but by all means use what works best for you and I'm not here to sell you on CSS modules yeah I kind of answered the second one as well so values and CSS modules coming in 1.0 so keep an eye out for that talking about CSS and J's how to manage selecting of parents siblings since we can't rely on CSS now well I think the design patterns in something like Ben it's all about kind of trying to minimize this sort of stuff we do do very simple nesting in our applications but the really good thing about CSS modules is that is that it scopes it to the one file so when we do nesting it's only nesting within the rules of a single file we definitely don't nest across component boundaries in the CSS if you want a component to look different depending on its context and we make that a prop of the react component so if a component can be in like a primary or secondary mode if it's a button for example you know you don't make that depend on whether it's in you know a certain parent you make that a prop of the component and that leads to much more maintainable code much more testable code doesn't local scope feature bind you to CSS bind your CSS to web pack forever and this is exactly exactly the line of thought that led to CSS modules being extracted from web pack and my feeling is that as much as I love using webpack you know CSS modules the the idea in it was was much greater I think than any one tool and really deserve to be something that you could use anywhere so like I said you know we need the help with the community to continue this effort but we don't want a couple you to a web pack we want you two to have modular CSS and no matter where you are I guess I'll answer one more I'm gonna pick the best one let's see yeah okay that's a good question Andre pops one so as far as I know composers can result in non-deterministic style overrides how to solve that and that's a really good question and it's something that that is probably one of the the areas that we need a bit more tooling around the idea that we're floating at the moment just to clarify the problem when you're composing multiple classes into one imagine that you're composing five classes and for all you know like two of them might actually be defining a rule for the same property and so now you've got this this situation where the the rule that wins is kind of determined by the the source order which is completely abstracted from you right when you when use a tool like web pack you can't say that this class should be in the file before that one so that's kind of one of those things that you can't I'm not sure how you solve that the the the idea that we're working at the moment is it's going to be like in some sort of linting tool perhaps that'll warn you and say like hey you just shouldn't do this it's actually a bad idea but you know that that still has to come so in the meantime tread carefully and hopefully we'll have a better answer for that soon that's it so I'm gonna be around the conference of course so please I'm alone in a foreign city come talk to me I'd love to talk to you even if I look like I don't want have you bothered I do so come talk to me thank you very much thank you Mark you

Channel: ReactiveConf

Views: 21,378

Keywords: Cascading Style Sheets (Programming Language), JavaScript (Programming Language), ReactJS

Id: zR1lOuyQEt8

Length: 45min 9sec (2709 seconds)

Published: Mon Nov 16 2015