Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
ready to get started here when I welcome everybody my name is Ivan booth and I'm the drupalcon front end track chair I'm a freelance developer group work org I'm thrilled today to introduce Jonathan snook jonathan is most well known for his book
scalable and modular architecture for CSS and if you're not sure what that's about you're going to get to learn all about it interests few minutes while not technically a lumberjack himself he's been smacking CSS in their control for some years
now he's written for this apart 24 ways and net magazine and also wrote two other books the art and science of CSS and accelerated Dom scripting and he's actually speaking at both the drupalcon and what fishings here in portland suite so he's a
busy guy Johnson has been building websites for nearly 20 years and currently works at Shopify he previously worked at Yahoo where his redesign of yahoo mail was a raw source of much of the smacks approach I'm really happy to be welcoming Jonathan to drupalcon
because Drupal 8 itself is adopting a smacks approach for its style sheets so while these ideas are applicable to any web project I'm particularly excited to see the positive effect that is happy having on Drupal front end development and while you can't
get Jonathan snooks face on a teacher you can get Jack the lumberjack and it gets even back but there is you can get Jack the lumberjack on a t-shirt along with the book itself at SMA CSS com so with that please welcome Jonathan so thank you very much for
having me that was a great intro like that so I'm here to talk about how your CSS is a mess and to be honest about mine was too and still is from time to time so i came across the street a while back and I think it's rather amusing so observing that
the maximum number of people who can productively simultaneously work on CSS is one how many of you agree that's a pretty good crowd and things like you know before Shopify before yahoo i ran my own company called sink dossier and the thing with that is
that it was only one person that means that i was the one who had to do all the front end all the back end everything that I needed to do deliver it off to the client and then move on to the next project that could have been neat absolute best CSS or the absolute
worst and the thing that I wouldn't have known exactly pass it off at the client I never have to worry about it ever again so as mentioned right now I work for a company called Shopify and at Shopify we're a team of four designers we work with five
developers or still only one team working on one project that means we're all in the same room and anytime I have a question any time I'm like hey I have to work on this file can you just like not commit that pressing changes i need to go in i don't
want to deal with any merge conflicts i can turn around and talk to people but in between these two i work for a company called Yahoo you guys might have heard of it it's been in the news as of late and I worked with the team of 30 designers these guys
were Photoshop kings and queens these new photoshop inside and now and they would pass their work on to us the prototyping team which is the one that I worked on now the thing is that we did prototyping a little bit different I had this like brilliant idea
that what if the prototypes we built were actually like production quality and so we actually took the front-end code all the HTML CSS that we would do to build these prototypes and pass off to a team of two hundred engineers that the stuff that we were producing
ended up being integrated with multiple teams and multiple projects so we were dealing with yahoo mail passenger calendar all of this stuff was based off the same HTML and CSS because traditionally the way they did it was actually take a photoshop comp throw
it over to the engineering team and in six months later the team would go here's the product and the designers would go that wasn't quite what I wanted when you're dealing with multiple teams different teams have different ways of solving problems
and we really wanted to solve the problem once and distribute that really early on in the project for example we want to do this little autocomplete widget so our team built the HTML and CSS actually built the JavaScript prototype for this article day widget
passed it off to the different teams like hey look we've got this autocomplete widget and sure enough the messenger team went away and they built all their own JavaScript stuff for it and the mail team went off and built all their JavaScript for it and
we kind of went hey guys we've already solved this problem let's just use all the same code and this this is something that happens with large teams working within their own silos we really wanted to try to consolidate this now when it comes to CSS
I think that there's this conception or misconception that CSS is easy I know a lot of projects that I've done where you know with the back-end development all the PHP code got to be code reviewed you know got to do that before it goes in JavaScript
of course better do a code review CSS OSU CSS go ahead and commit Lori butter and the thing is it's like okay we take this site that's just like plain HTML we throw in some styles and just magically we have a site you know we have selectors we have
properties and then suddenly we get CSS that kind of looks like this this is copied and pasted from an actual project and this is really just an abstraction away from inline styles could we know my styles are bad right and you know this makes me kind of like
this it's a little scary here's some code I took form from myspace now we have to like these really long selector chains and if you can imagine the HTML that must exist for this to work I we have to have all these elements in place they have to have
all these classes on it all these IDs everything has to be very meticulous or it's not going to work I think this is that the only thing that we really care about is 58 right with their status bar would care but like the status thing you can see there's
probably a link in there and this is separator that's really all we care about now Drupal doesn't get off the hook this this side took from from the dribble down or website and the interesting thing I'm kind of shortening it here but there's
two things here there's a pattern ave and there's a clontech nav and they both do the same thing it's a horizontal navigation but instead of you know go to find this pattern and reusing the same code they duplicated exactly some code 44 post things
and it's this idea of reuse that we wanted to take advantage of now I'm certainly not without blame this is from my own website from a few years ago because my website hasn't changed in like four years but I don't have to worry about the code
can be as good or as bad because I'm the only one touching it and I haven't touched it really for years it's fantastic this is great code but really this is what I cared about right I cared about what the author name look like and I cared about
with the comment number look like now of course we often run into you projects where you know we have a single CSS file and we just keep adding to it each new page that we work on we add some more stuff and you know you're working at the Akeno I'd
see to fix this one quick glance can add it to be into the CSS file and again this is from an actual project and I think this is when we have CSS that is this big right we end up filling with it constantly trying to change things add a new selector what we're
going to throw bang important on it we're going to get something that will finally work until you know what maybe would just kind of get frustrated and get rid of it let me get maybe some of you feel like this is you know you're really happy and CSS
is fantastic okay so now I mention working at Yahoo and a lot of the stuff that we were doing I started really thinking about the process that I was working on and I wanted to find something that was scalable you know for what we were working on and realizing
that taking a modular approach taking things into diesel component and just having on this architecture for CSS of course everybody loves acronyms so I called its max SMA CSS and so the idea what this was like I'm really trying to understand how do I build
a website how do I write my HTML how do I write my CSS so that it makes sense there's a bunch of stuff in the book I'm only to talk about three things to one is categorization you know how do we what are the rules that were writing what are the purposes
that they're serving within our district once we sort of categorize things what is the naming convention that we want to use to help clarify the intent what we're right and lastly and this is going to sound a little weird decoupling HTML from CSS this
idea that you know yes CSS is designed to style HTML but bear with me we'll get to them we have first thing categorization so in thinking about things I realize that there was really sort of five categories that things could fit into one our base styles
layout styles module Styles state and theme just bear with me a little bit cuz I realized that you know modules are kinda one of those things that you guys have a problem with as far as naming convention modules were a little confusing so apologies I wasn't
aware of that naming convention when I wrote the book it's been explained to me that like regions and kind of like how you deal with templates it's more the sense things as opposed to using the module and then you know of course we have states and
then themes I now have a specific meeting within within Drupal and this is really just out of talking about user-defined customizations I'll kinda give it to them so just think about that when I say module or when I say theme I'm not talking about
Drupal modules or triple themes but really deserve these other concepts and took it into so based styles are like what is the HTML element look like no classes no IDs what does that element look like by default so if you're using a CSS reset such as like
Eric Myers reset or something like normalization normalize CSS those things are really finding what that baseline is for everything on the page those are your base styles and then on top of that are your layout styles so layout styles is you know you have
a page and there's a lot of stuff in that page what constitutes layout to me those are like one the major containers like you've got a header you've got a sidebar use about a Content area and then you want to put content in here this is just that
structure that you have on a page we look at something like a paypal website you know it's got a header it's got the sort of main content area it's a little sidebar stuff you might have a grid system that you're using with on your particular
[ ... ]
Nota: se han omitido las otras 5.528 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.