Is Bootstrap a programming language?



  • @Maciejasjmj said:

    In Web forms, you can have multiple same server-side ids, but in actual rendered HTML, they get mangled to include the context, so that they're actually unique. Sadly, that means you have no reliable way to query by ID in your client-side code.

    In MVC, you just write HTML. And valid HTML can't have two elements with the same ID anywhere on the page, so if you want to render your partial twice, you need to either do the mangling in JS, or use a class/data attribute and query with context.

    Ah, you're talking about controls that you will be reusing multiple times on the same page. I feel sorry for you. My solution didn't even require server-side IDs, since when I'm building custom controls I put them in a single div like:

    <div id="myControl">
        <!--​ Custom HTML -->
    </div>
    

    My CSS always works out for me.



  • @Maciejasjmj said:

    that's for the client to apply custom overrides

    If they define the same selectors as in the base style sheets, and it doesn't specify to load the custom styles before the standard ones, you wouldn't need !important there either.

    @Maciejasjmj said:

    just let you specify the specificity

    The more specific the selector specifies which conflicting style wins out. But if you have a situation where you need a general selector (e.g. .error) to be applied to an element that has a more specific selector defining styles (e.g. .parent li.item), that's where !important works well, because it means you don't have to effectively copy every style where that additional class may show just to override a few styles.

    It's use should be minimized, yes, but it shouldn't be forbidden.


  • BINNED

    @abarker said:

    Here's what I think: you have no idea in Belgium how to use CSS, so you rely on pre-built files like bootstrap.css to do the work for you. How about you get your head out of your ass and shut up. Go learn how to use CSS before you come around trying to school a forum full of IT professionals.

    You leave Lotus Notes Guy alone! We need people like him here for entertainment.



  • Why are people styling based on IDs? You shouldn't be doing that, it is akin to sticking !important everywhere anyway.

    As for querying by ID in your client side code, why would you want to do that?



  • @lucas said:

    Why are people styling based on IDs? You shouldn't be doing that, it is akin to sticking !important everywhere anyway.

    It's actually very useful when you want to limit the scope of your styles to a given area. Let's say that you want certain styles to only apply to elements within a certain div. You give that div an id and use it in your CSS targeting.

    @lucas said:

    As for querying by ID in your client side code, why would you want to do that?

    Really? How else do expect to find a specific control from your client side code without an ID?



  • @abarker said:

    Really? How else do expect to find a specific control from your client side code without an ID?

    Well, you can loop over every btn object and query on its attributes to figure out if it's indeed the one you're looking for. That's very efficient.

    BWT, I'm only commenting because @antiquarian suggested this would be more fun... but is not.



  • @Eldelshell said:

    Well, you can loop over every btn object and query on its attributes to figure out if it's indeed the one you're looking for. That's very efficient.

    But what if your page has a grid of data with identical edit buttons for each record? What do you do then? What then?! 😱

    This meltdown has been brought to you courtesy of Discourse®.


  • BINNED

    I couldn't agree more!



  • @ChaosTheEternal said:

    The more specific the selector specifies which conflicting style wins out. But if you have a situation where you need a general selector (e.g. .error) to be applied to an element that has a more specific selector defining styles (e.g. .parent li.item), that's where !important works well, because it means you don't have to effectively copy every style where that additional class may show just to override a few styles.

    It's use should be minimized, yes, but it shouldn't be forbidden.

    You are doing CSS very very very wrong.



  • @lucas said:

    You are doing CSS very very very wrong.

    Or he's doing shit the creators of CSS never anticipated (because: idiots), like doing A/B or multivariate testing through JavaScript.



  • @abarker said:

    It's actually very useful when you want to limit the scope of your styles to a given area. Let's say that you want certain styles to only apply to elements within a certain div. You give that div an id and use it in your CSS targeting.

    You should do that via class. You really shouldn't be using ID in your CSS unless you really really have to.

    @lucas said:

    Really? How else do expect to find a specific control from your client side code without an ID?

    You might want to do this if you are changing the innerHTML on an element.

    if you are doing on say a btn event you have the e.target attribute and it is trivial to get parent elements with something like jQuery. I tend to build a lot of my JS as either a jQuery plugin, or as a web component so it never has to rely on an ID being present on the page.



  • How does A/B testing have anything to do with how you structured you CSS?

    If you are using important that means you haven't though about your CSS correctly. If you are inheriting a mess (like I normally you do) you might have to do that ... but it really is a last resort.

    If you are starting a new project you really should build proper "web components" aka like this

    Bootstrap is pretty much built around the same set of ideas.

    If you do things like that, you don't have weird specificity issues.



  • @lucas said:

    How does A/B testing have anything to do with how you structured you CSS?

    Because you're a 3rd party who has no control or input over how the site structured their CSS. So you have to work with the shit you're given. Which means, you're shitting !important all over the place.



  • @lucas said:

    You should do that via class. You really shouldn't be using ID in your CSS unless you really really have to.

    Some people don't want to apply a class to every on their site. Sometimes it's easier to apply an ID to one div in define a CSS scope for all of the elements inside. It's a difference of style and preference, so don't come at me with "should" and "shouldn't". You don't like to do it, fine. But it has certainly made things a lot easier for me in some scenarios.

    @lucas said:

    You might want to do this if you are changing the innerHTML on an element.

    if you are doing on say a btn event you have the e.target attribute and it is trivial to get parent elements with something like jQuery. I tend to build a lot of my JS as either a jQuery plugin, or as a web component so it never has to rely on an ID being present on the page.

    Sometimes I want my client code to do some quick calculations based on user input when a button is clicked. Finding the input fields is 10 times easier if they have an ID.

    I don't understand what your aversion to using IDs on an HTML page is, but they are useful. They make some things significantly easier to do, both in client code and in CSS.



  • Ever heard of an iFrame?



  • @abarker said:

    Some people don't want to apply a class to every on their site. Sometimes it's easier to apply an ID to one div in define a CSS scope for all of the elements inside. It's a difference of style and preference, so don't come at me with "should" and "shouldn't". You don't like to do it, fine. But it has certainly made things a lot easier for me in some scenarios.

    You can do the same with class and not have to worry about how many times you may use it on the same page in the future. There is no benefit in using ID in this situation, so you may as well use a class.

    #my-web-component p
    

    vs

    .my-web-component p
    

    There is no difference other than the number of times you may want to use it on the page. If you are writing CSS so it is reusable, you should without question use the latter.

    @abarker said:

    Sometimes I want my client code to do some quick calculations based on user input when a button is clicked. Finding the input fields is 10 times easier if they have an ID.

    I don't understand what your aversion to using IDs on an HTML page is, but they are useful. They make some things significantly easier to do, both in client code and in CSS.

    Why are you trying to find the input field, you already know where it is via its click event!

    IDs can be useful in JavaScript (I did make a blaise statement earlier, I probably shouldn't have done), but almost never in CSS.


  • Discourse touched me in a no-no place

    @lucas said:

    !important

    Whoever thought that up deserves the bastinado. That reads as "not important" to me.



  • It reads "Your CSS needs refactoring" to me.


  • Discourse touched me in a no-no place

    @lucas said:

    It reads "Your CSS needs refactoring" to me.

    It means a multitude of things, all of them bad.



  • @lucas said:

    You can do the same with class and not have to worry about how many times you may use it on the same page in the future. There is no benefit in using ID in this situation, so you may as well use a class.

    It depends how reusable you want it to be. Maybe you only want it to be focused to a specific div on a page, in which case using an ID makes sure that you shouldn't be able to accidentally use it more than once.

    @lucas said:

    There is no difference other than the number of times you may want to use it on the page. If you are writing CSS so it is reusable, you should without question use the latter.

    Be careful with absolutist phrases like "without question". There's bound to be an exception that will bite you in the ass.

    @lucas said:

    Why are you trying to find the input field, you already know where it is via its click event!

    No, you have a hook into the button via the click event, not the input field(s). Take the mockup I just made here:

    The user enters values 1 and 2, clicks the sum button. Do you know where the fields with the user entered data are? Nope, not with IDs to grab those fields. Of course, in this case, you can just grab all the text inputs and you're good to go. How about if we add a parallel set of fields for subtraction?

    Well now you're really screwed. Better start using those IDs!


    As an additional point to combined my two arguments, let's say that you have a control which needs an ID so it can be accessed in client code. Let's also say, for arguments sake, that control needs to be uniquely styled. Would you create a CSS class just for that control, or would you use the control's ID to target the CSS styling? I'd use the ID since you need it anyway. What's the point of creating a one off class in that situation?*

    *Yes, I have done this. I can't give details though, due to an NDA.



  • @abarker said:

    Would you create a CSS class just for that control, or would you use the controls ID to target the CSS styling?

    The only point I would do this is when you can't be sure of the ID for what you're styling (WebForms pre-.NET 4.0). Otherwise, I have no qualm with styling targetting an ID.



  • @lucas said:

    Ever heard of an iFrame?

    Of course.

    I don't see how that helps solve the problem at all, though.



  • I can't be arsed with the quote pyramid.

    1. If it is CSS why would you ever care if it is one or more times? Unless your UI design is WTF. Even then you can still use another class to cascade over that one ... you know using the cascading part of cascading style sheets.
    2. If you are creating reusable CSS i.e. you can use it anywhere you shouldn't be relying on IDs.
    3. Yes you do, because the parent should be a form and you can do form.input.whatever, maybe your form should have an ID, but your inputs don't need it. If you were specifically talking about mobile dev, I might agree because selector speed really matters there, on a desktop ... not unless your customers are using IE7.
    4. Just create a class and apply it to the element. If you only add the class once ... it doesn't matter. If it is purely unique for the element you should use the style attribute as that is what it is there for.

    This pretty much sums up what I am talking about.

    http://vimeo.com/44773888



  • I'm just going to leave this here, because I find it amusing given the current conversation:

    /* Taken from http://www.w3.org/2008/site/css/advanced, line 172 */
    .w3c_home #w3c_most-recently{ margin-top:0 !important; }
    


  • Why would a 3rd party component on another web page be anything else?



  • @lucas said:

    1. If it is CSS why would you ever care if it is one or more times? Unless your UI design is WTF. Even then you can still use another class to cascade over that one ... you know using the cascading part of cascading style sheets.
    2. If you are creating reusable CSS i.e. you can use it anywhere you shouldn't be relying on IDs.

    @lucas said:

    Just create a class it doesn't matter how many times, it can be once or many it doesn't matter and the browser doesn't care. If it is purely unique for the element you should use the style attribute as that is what it is there for.

    So it basically comes down style preference. Your preference is to avoid IDs in CSS. Got it.


    @lucas said:

    Yes you do, because the parent should be a form and you can do form.input.whatever, maybe your form should have an ID, but your inputs don't need it. If you were specifically talking about mobile dev, I might agree because selector speed really matters there, on a desktop ... not unless your customers are using IE7.

    Ok, you obviously have a very religious viewpoint on this, which amounts to:

    IDs in web development are the spawn of the devil and must be abolished wherever they are found. Those who use use IDs in web development are ignorant and must be shown the error of their ways.

    Oh, ummm ... are you familiar with TCotCDCK?


    @lucas said:

    This pretty much sums up what I am talking about.

    Will not watch. Especially if it takes half an hour to "pretty much" sum up your point.


    Filed Under: @lucas is to not using HTML IDs as Jeff is to Discourse



  • @lucas said:

    Why would a 3rd party component on another web page be anything else?

    Gee, I dunno. Web analytics? Tag management? A/B or multivariate testing, like I just fucking gave as an example?

    Do you... make... websites? Do you seriously make websites with zero 3rd party components that aren't in iframes? I mean, maybe you do, which is great-- but 95% of websites have them.



  • It isn't style preference, it is just makes sense ... ignore me if you want. You can do it anyway you like, I certainly can't stop you through the ether of the internet comments. However most of the CSS frameworks are designed in the manner I describe.

    I don't think IDs are the spawn of the devil, I just use them very sparingly. As I said previously I was blaise in my first comment because I was wound up because I am fighting developers that do CSS very very wrong ... maybe this was the wrong topic for me today..

    The video is 30 minutes, he talks about how you should use IDs for minutes. The rest is about the idea of OOCSS (which I was alluding to). It is a good presentation and changed my thinking about how I write CSS and generally IMO has made my CSS better as a result. Choose to ignore if you wish, but there are some really good tips.

    I am out of this discussion.



  • A/B multivariate testing ... when should an !important make any difference?

    If they are 3rd party components that are part of the website, why can't you control what classes they expose. Even if you can't control that you can certainly you could wrap them with a div with the class .my-third-party-component where they are injected, still won't have to use !importants. Looks like a lack of imagination on your part.

    I make websites, possibly more than you as you actually asked earlier what a "CSS framework" was.



  • @lucas said:

    A/B multivariate testing ... when should an !important make any difference?

    "Does a CTA with a red background work better than our green background? Let's add a CSS rule for that-- oh, hm, conflicts with the site's stylesheet and there's no way to make the rule more specific. Well, I guess we have to use !important."

    That came up about once a week while I was doing A/B and multivariate testing work.

    @lucas said:

    If they are 3rd party components that are part of the website, why can't you control what classes they expose.

    The third-party component is the JavaScript and/or CSS file. I didn't have any control over the website.

    Sure, "technically" you could stomp over all the classes with JavaScript, but that's a lot more WTF-y than adding a single !important to your CSS patch.

    @lucas said:

    I make websites, possibly more than you as you actually asked earlier what a "CSS framework" was.

    Ok Mr. Super-Expert. Your penis is larger than mine, or whatever.

    For the record, I didn't know what a "CSS framework" is because I'm not a front-end designer. I'm kind of a "middle-end JavaScript guy who does analytics and testing work, but has the artistic ability of a mentally-deranged ferret."



    1. Change the parent class and override it using basic specificity ... the cascading part is there for a reason. If it is built as a web component (like I have been banging on about) it becomes trivial.
    2. Surely if they are JS or CSS and they aren't injected by an iFrame you can change the source to suit? It is pretty impossible to obfuscate CSS.
    3. I am neither a "front-end designer", I am a full stack developer that happens to do a lot of JS and CSS from my last two roles.


  • @blakeyrat said:

    Do you... make... websites?

    I was starting to wonder the same thing about him.



  • Get fucked mate.



  • @lucas said:

    Change the parent class and override it, use the cascasding part of the acronym

    I have no control over the site. I think you're having trouble with this concept. I can't change the site's classes. I can't change anything the site serves up.

    (I mean, like I said, I could technically using JavaScript, but it's pretty shitty to load JavaScript on a site that really only needs a CSS patch. Especially when the only reason I can't use a CSS patch is Lucas's Holy Rule Of Never Using !Important Bow Before Him!!!)

    @lucas said:

    Surely if they are JS or CSS and they aren't injected by an iFrame you can change the source to suit? It is pretty impossible to obfuscate CSS.

    You mean writing a JavaScript to dive into their in-memory CSS DOM object and fuck around with it? That's a nightmarish amount of work to obey your dumb and arbitrary "rule".

    @lucas said:

    I am neither a "front-end designer", I am a full stack developer that happens to do a lot of JS and CSS from my last two roles.

    And you've never made a site with analytics or testing? What kind of sites are you making, seriously? Bob's Fishing Bait World Headquarters Dot Com? Help me visualize what kind of chintzy site has no third-party code on it.

    If you're not doing at least analytics, you're not serving your client's needs at all. If you're not at least trying to sell them on testing, you're depriving both them and yourself from tons of revenue.



  • @lucas said:

    Get fucked mate.

    Aww, I got insulted by someone who can't see that there might possibly be way to do something other than his own! It's almost like Jeff never left!

    Also, as a side note, my wife does a very fine job of helping me with what you suggested, TYVM. ;)



  • Surely you are testing your own companies site and get this added as part of the test plan. I have no idea on your specific requirements, but it doesn't sound like you are actually devving the actual site.



  • @lucas said:

    own companiescompany's site

    FTFY



  • I have given quite a lot of reasoning why I something should be done as I suggest, even with links and videos which you said you wasn't going to watch ... what other response is appropriate after that last comment?



  • @lucas said:

    Surely you are testing your own companies site

    No, I wasn't.

    Why is this such a hard concept to grasp?

    The only control I had over the site was either a JS file injected via a Atlas Universal Action Tag (which, of course, being Mr. Super Web Developer Man, you know exactly what that is), or a JS/CSS file injected via Omniture Test&Target or whatever it's called now.

    @lucas said:

    I have no idea on your specific requirements, but it doesn't sound like you are actually devving the actual site.

    Well, however you define "web developer", maybe I fell under the definition or maybe I didn't. Whatever, that's not the point.

    The point is that CSS !important is really handy in some situations, and used for legit reasons every goddamned day of the week.

    Saying that merely using it is a WTF is just ignorance of the web industry. Which is strange coming from such a Mr. Super Expert web developer like you.



  • @lucas said:

    said you wasn'tweren't going to watch

    FTFY



  • Right you never said that, and that changes a huge amount of things about the assumptions of what you are doing and why you are doing it. Sorry I come from the mindset where I have full control or at least can make sure the requirements state that I the things I mention are possible.



  • Being a grammar nazi is possibly the poorest attempt at proving anything.



  • @lucas said:

    Right you never said that, and that changes a huge amount of things about the assumptions of what you are doing and why you are doing it.

    And it coincidentally makes your hard rule a piece of utter crap when it comes to getting real work done on the real web with web sites.

    @lucas said:

    Sorry I come from the mindset where I have full control or at least can make sure the requirements state that I the things I mention are possible.

    Obviously, since I had to explain it like 65 times until your tiny little brain cells were able to absorb some of the information.

    BTW, you're still cheating your client/employer by not doing analytics or testing on your sites.



  • Honestly, my only problem at this point is that you are in a situation where you cannot claim to be absolutely, 100% correct. But you aren't. It's a style preference. You are Jeffing.

    Filed Under: It's so much fun poking an angry tiger through the bars! | Something new for the Discopaedia



  • My point still stands, if you are using IDs all over the CSS it is done wrong from an architecture point of view. You can throw as many little insult as possible but it doesn't change the fact that something is very wrong with how CSS is built, which means the markup is probably a bit shit as well.

    But hey ho, lets make "your specific usecase" completely undermine the main point that I was making that CSS should be done from a web components point of view.



  • @lucas said:

    Being a grammar nazi is possibly the poorest attempt at proving anything.

    Wasn't trying to prove anything with that. Just having fun.



  • Actually now I'm more annoyed that a super expert genius web developer like you aren't doing any kind of testing.



  • I stopped having fun chatting with you quite a while ago.



  • I do actually. So don't make assumptions



  • @lucas said:

    I stopped having fun chatting with you quite a while ago.

    Poor baby. 👶 🍼


Log in to reply