Presentación
PDF (pincha para descargar)
Vídeo
Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
hey everyone hey would you Kanye yeah um I want to thank everybody showed up for my presentation talking about object-oriented CSS sass and how to do it better in my humble opinion so you're a rare portland and we're going to talk about SAS so just
kind of a quick survey of the room how many people here are nudists ass raise hands wow that's epically awesome ok it's only cool how many people here use object-oriented CSS type methods all right you are my target audience ok this is totally cool
um ok and jump into this that's me my name is Dale sandy I work up in Seattle at a place called substantial that substantial how many people here from Seattle all right we will all get together for coffee later so this is me on the twitters if you find
anything I say to be interesting and want to hear more about it I tweet about this crap all the time I also recorded and for the people up in Seattle and for the people from Portland who want to drive up to Seattle if you're ever so inclined I do also
run a SAS meetup up in Seattle and again you can follow me on the twitters I actually have more people following me on the twitters access meet up around the world that actually show up to the meetup so that's pretty cool I guess so I talked about a lot
of stuff there too and this is my daughter's in it today is her birthday so everybody say happy birthday Zanna thank you that is she's so cute so yes we're going to talk about SAS extends and a concept called silent place holders which is really
cool when you understand what they're doing and how they can work for you ninjas there's secret code in your in your in your code yeah okay so object-oriented CSS frameworks attempts at creating objects to streamline application okay so we all know
that doing things to make things easier usually means you end up writing a crap ton more code which then makes your life more complicated so this is this is the precursor to what I'm going to talk about here so object audience is s Nicole Sullivan teacher
taught us some pretty great concepts you know identify reusable objects be semantic with your HTML minimize your selectors extend your classes style separate from content and content separate from container and this presentation i'm primarily going to
focus on these last three things here and of course style separate from content content separate container duh this where we need to go object-oriented CSS frameworks CSS frameworks they've been around for a long time even before object or net CSK mod
I mean how many people in this room have used like jQuery UI okay so yeah you all know you put in one module you just inherited twenty thousand lines of CSS yay thank you where they fail is that they're constantly trying to solve all of your problems even
though you need to solve one problem and where a lot of people will look at SAS and go Oh screw use as people you're doing nothing but giving me a lot of code bloat I was like have you looked at twitter bootstrap lately okay 4914 lines of code before you
write line one to make it what you want it to look like not to look like Twitter bootstrap I say I don't want that ok pretty simple dry coating we all understand the concept of dry coating don't repeat yourself nine out of ten developers agree that
this is a great way to do it that one developer we just don't talk to him bootstrap buttons okay so I'm gonna do right now is just talk about buttons very simple concept right so let's look at some code for bootstrap buttons so you know how much
CSS can it really be in bootstrap buttons when we're only just kind of talking about two types of selectors with just you know and nav tabs and have pills I mean this goes on and on and on and on and on and on and on and on so that's a lot of code
that's 169 lines of code just for those two selectors right there that kind of code makes kittens cry that's horrible Adam you want to talk about that CSS vanilla CSS by itself is not a dry concept it's a scripting concept that endlessly repeats
itself we've all been environments where we create something and then you're working with the designer and you have all these little you know two pixels here two pixels there this hex value this hex value you're repeating stuff all over the place
endlessly you know just in this example alone there's ten references to white you know it's just like it's not it's it's not something that a lot of people like to work with because it's very hard to manage and what always ends up happening
is that you know every developer in this room who started working with CSS I mean you start out you're like this is going to be awesome this time i'm going to write good csi's you know and then the project starts to evolve the more things happen
and then you get more design templates and then now the product is live and you have a maintenance team that are working on it and then they're looking at your CSS and they're like I don't understand any of this that's happening on here so
I'm just going to wrap a div around it slap an ID on it you know and I'm just going to go right to the bottom of the CSS put my ID and then I'm going to redefine font families I'm gonna redefine colors and it's gonna look awesome and it
sucks okay so objects aren't ncess tries to get us away from that and the interesting thing about oo CSS is that they readily admit that one of the coolest best prints ables of CSS is to extend the design rules of CSS in CSS sucks okay it's hard it's
hard to do because you have all these lines of CSS and you're like oh yeah I want to reuse this thing and so that I'm gonna go all the way up to line two hundred something and comma delimited put my next selector and then I'm going to go all the
way down to the line four thousand something and extend on top of that it's it's very hard to visualize that and understand it so nobody ever really does it so object ornate CSS says okay fine don't do that what we want you to do is create all
these quote-unquote objects and you know these little snippets of CSS and then go into your dom and then I want you to put all of the classes these presentational classes inside the Dom all over the place so all great and dandy when you're doing this but
then when you start working with something with Twitter bootstrap and then you find yourself you know putting 16 classes on a single down my limit just to make a button look the way you want it to look is kind of stupid to me I don't like it so you end
up with something like this I mean here's you know you have you know this class in this class in this class in this class in this class in this class in this class and so then as you keep building out templates and modules and stuff you're repeating
this endlessly over and over again it just gets really complicated to manage from there especially through the life cycle cycle of a project you're always going to run into situations where the design is going to evolve and then you have these presentational
classes all over your dom and people start doing evil things like rewriting what that presentational class is actually doing which goes against the naming convention because everybody sucks at naming things naming is hard so it's just it's a great
idea to start out with but it totally lends itself to a lot of problems so then again picking on Twitter buttons you have all these all the CSS right here right and again this goes on and on and on and then your designer comes in and says I've designed
all the buttons doc that's how I feel when you just said that no no no no I'm gonna go away I'm going okay so developers we want our cake and we want to eat it to write CSS we want it to be presentational it needs to convey design that's what
CSS is for no screw you CSS is to be semantic because I wanted to have meaning right so vanilla CSS by itself this is really really hard to do vanilla CSS conveying presentation and semantics is about as realistic is this cat getting another top 10 hit is
just like it's not going to happen so I've just beat up on object or new CSS so now you're looking to be going okay so what's the better way to do it so then this is when I say object-oriented s CSS yeah so placeholder classes this is um this
is a pretty cool concept I watched the concept evolved with the SAS team for for quite a while as you know the the role of object ornacia has started to emerge and a lot more people were talking about it and the principal developers Nathan wise in bham Chris
Epstein and a few others were you know on github talking about what if there was a way that we could embrace this without having to do it the way they want us to do it we can actually embrace it more semantically inside of our CSS and then have all the control
[ ... ]
Nota: se han omitido las otras 4.528 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.