1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS-in-JS: What do you think?

Discussion in 'CSS' started by Gary-SC, Aug 16, 2019.

  1. #1
    Gary-SC, Aug 16, 2019 IP
    SEMrush
  2. mmerlinn

    mmerlinn Notable Member

    Messages:
    2,242
    Likes Received:
    283
    Best Answers:
    6
    Trophy Points:
    260
    #2
    My question is what happens in environments where JS is disabled for speed, security, or other reasons?
     
    mmerlinn, Aug 17, 2019 IP
  3. NetStar

    NetStar Notable Member

    Messages:
    2,266
    Likes Received:
    467
    Best Answers:
    21
    Trophy Points:
    215
    #3
    I once disabled JavaScript and tried surfing the web. The experience was horrible and impossible on most web sites. Anyone who is disabling JavaScript is certainly not doing it for speed...and as for security I'm sure if that is their primary focus there are a LOT of other security concerns to be worried about. I think those people are few and far in between... I also feel those visitors most likely aren't valuable traffic anyway.
     
    NetStar, Aug 18, 2019 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    25,186
    Likes Received:
    3,428
    Best Answers:
    100
    Trophy Points:
    665
    #4
    I hadn't encountered that term before, so I'm working through the primer - and hour long! - and I'll add my comments as they come up.

    Their reasons to use it:
    1. dead code - ffs, yes code can get messy, but so can the javascript. Use decent naming conventions, split into files, document your code. Their argument is just as valid for css-in-php but I wouldn't entertain that either. "Lets me go, I don't need to think about things", "it's nice to just let the tool do things for you", "naming can be hard", "concerns I don't want to care about"
    2. Bye bye naming concerns - ooh you don't need to be nervous about calling an H1 a "heading", oh ffs!
    3. Critical CSS - maybe think about why your site is taking so long to load that the user even notices that the css hasn't loaded yet?
    4. Easy to use with design systems/component libraries - isn't that a bare minimum requirement
    The guest goes on to say that you will eventually need to break your style component out into a separate file (but not css). He talks about developers having different strengths and how js-in-css is the bandaid (my word) to cover all coders.

    I was quite interested in how it handled media queries but, really, it will be just as messy in js as it is in CSS.

    I'm quitting after 44 minutes, but I'm not convinced.

    As a freelancer I need to pick the tools that are right for my clients and for my skill set - but still universal enough that if the client walks away/I'm hit by a bus then the next developer will be able to read the online docs and be up and running quickly. js-in-css offers me little.

    If you are in a big development house, working on complex sites, then I can see that there might be a requirement. The endless rotation of staff through a project means that they will have a variety of skills and it may be sound business sense to pick tools that meet everyone halfway. Or you could just train your staff and keep the really tricky tasks for the specialists.

    I suspect for the type of developers we have here, that css-in-js will not be a core approach.
     
    sarahk, Aug 18, 2019 IP
    mmerlinn likes this.
  5. mmerlinn

    mmerlinn Notable Member

    Messages:
    2,242
    Likes Received:
    283
    Best Answers:
    6
    Trophy Points:
    260
    #5
    Surfing the web with JS disabled is a disaster. It also shows me that whoever coded those pages wants to limit visitors to his pages. To the best of my knowledge, screen readers, indexing bots, and so on cannot properly read JS so those types of visitors effectively have JS turned off. So, by my way of thinking, the websites are giving potential visitors the middle finger by using JS in ways that are not compatible to many user agents.

    Or to put it another way (per @deathshadow) if the page will not work WITHOUT JS, then the page should be taken out back and shot.
     
    mmerlinn, Aug 18, 2019 IP
    sarahk likes this.
  6. NetStar

    NetStar Notable Member

    Messages:
    2,266
    Likes Received:
    467
    Best Answers:
    21
    Trophy Points:
    215
    #6
    Eh.. I do agree... but there are times when it's completely necessary to use JavaScript frameworks. Vue, Angular etc. These are essential tools when developing for the modern age. Jquery is also a necessary library when writing proper JavaScript for cross browser accessibility.
     
    NetStar, Aug 18, 2019 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,926
    Likes Received:
    1,625
    Best Answers:
    232
    Trophy Points:
    515
    #7
    Generally -- and this is just my opinion -- there's only one real reason to use JS to control style: For dynamic values CSS can't figure out on its own.

    This includes certain types of animations, movement/interaction of game sprites, etc.

    Other than that, it has ZERO business in the JS. It has as little business in the scripting as it does in the HTML... but I'm the nutter who thinks that 99% of the time you see style="" and 100% of the time you see <style>, that you're looking at developer ignorance, incompetence, and ineptitude.

    SEPARATION OF CONCERNS!!! HTML is for saying what the content IS for all UA's, not just screen media. CSS is for saying what things look like, and JavaScript is for behaviors that do not fit the scope of either, or for ENHANCING already working pages.

    Good scripting should ENHANCE an already working page, not be the only means of providing basic functionality. This is half of where the majority of scripting-heavy developers are screwing things up.

    The other half being when they use JavaScript for things HTML and CSS can do without scripting!

    It's the type of nonsense one can expect from people who never embraced separation of concerns, progressive enhancement, semantic markup... and probably are so ignorant that they don't understand or don't even use the "media" attribute. It's just more mental midgetry from people unqualified to write a single line of HTML, much less style a page.
     
    deathshadow, Aug 18, 2019 IP